XF 1.4 How to Find What CSS Controls

[Amaury]

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?

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

 

[Arty]

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]

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?

 

[Paul B]

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

 

[Arty]

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]

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.

 

[Arty]

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]

.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.

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 ). You replied to it above, but it's actually in XenForo from the template search I did and not from an add-on.

 

[Amaury]

@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...?

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.