1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 How to Find What CSS Controls

Discussion in 'Styling and Customization Questions' started by Amaury, Feb 2, 2015.

  1. Amaury

    Amaury Well-Known Member

    Thanks to a recommendation from @Tracy Perry a while ago, I finally went through all of my CSS in EXTRA.css and removed important declarations from all the custom CSS that worked without them (so there are still a few that needed them, but not many), but there are a few CSS classes that I can't remember what they change.

    Is there a way to figure out what they change? For example, what does this change?

    Code:
    .xenOverlay > .section, .xenOverlay > .sectionMain {
        background: @primaryLight !important;
    }
     
  2. Arty

    Arty Well-Known Member

    xenOverlay is used for container in overlays, so that code is used for any .section or .sectionMain elements that are direct children of overlay container.

    Most overlays have formOverlay as first child, so that code is for overlays without forms. None of XenForo overlays use that, so its probably for some add-on that uses different structure thus messing up layout for third party styles.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    Possibly. That was just an example.

    But that's the question: There's some CSS I remember putting in EXTRA.css a long time ago, but now I can't remember what it changes. Is there a way to find out what it changes?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Search for the class(es) in the templates - the templates it is being used in will give you a clue.
     
    Amaury likes this.
  5. Arty

    Arty Well-Known Member

    There is no easy way.

    Look at class names, search templates for those classes. If there are some class names used only in one template you'll easily figure it out. If its more generic (like in your example above), its a bit harder.
     
    Amaury likes this.
  6. Amaury

    Amaury Well-Known Member

    Thanks, guys! I got one figured out: .thread_view .subHeading -- it's for the headers on our custom postbit -- which is entirely custom and not in any core templates.

    When I wake up later and am refreshed, I'll figure out the remaining ones:
    • .thread_view .threadAlerts
    • .thread_view .threadAlerts dt
    • .thread_view .threadAlerts dd
    • .xenOverlay > .section, .xenOverlay > .sectionMain

    The first three I found in the thread_view.css template and the last one in the xenforo_overlay.css template.
     
  7. Arty

    Arty Well-Known Member

    Classes in lower case with underscore like .thread_view are usually applied to <div id="content"> and represent currently rendered template. So those rules are applied only when thread_view template is rendered, which is used for displaying thread.

    .threadAlerts is used inside thread for alerts like "this thread has been deleted". You can see such alert by soft deleting thread then viewing that deleted thread.
     
    Amaury likes this.
  8. Amaury

    Amaury Well-Known Member

    I feel like an idiot for forgetting those ones.

    So now that just leaves figuring out .xenOverlay > .section, .xenOverlay > .sectionMain and finding out which type of overlay it's for (and I'll probably feel like an idiot again when I do :p). You replied to it above, but it's actually in XenForo from the template search I did and not from an add-on.
     
  9. Amaury

    Amaury Well-Known Member

    @Brogan, @Arty, I am indeed an idiot. .xenOverlay > .section, .xenOverlay > .sectionMain is for the Moderation Actions overlay in threads.

    While doing something unrelated, I noticed that the X overlaps with the header in the Moderation Actions overlay when no actions are logged. I wanted to fix it, and upon inspecting the element, guess what CSS I found...? :p

    So yeah. I don't remember that being the CSS, but I do remember doing something with the area sometime last year.

    Edit: Looks like it also gets the Interact overlay for profile posts.
     
    Last edited: Feb 2, 2015

Share This Page