XF 1.5 How to find which sytling it is?


Active member
So in firebug I am looking at the nav bar and the top bar when logged in as a moderator or admin.

The top bar is called #moderatorBar and I found the css template to edit the color.

The navbar where Home and Forums links wold be along with user name and inbox, alerts on the right side is labeled navigation.css

I would like to edit the color of text, hover text, selected color and border color so on an so fourth. I am finding it hard to find what section of style properties I need to be in to edit these. Is their a way to find which section using firbug?

I can't find any style properties for the mod bar and I can't find the ones that effect the hover over color. I really don't want to edit the template directly.
The easiest way to style anything would be to navigate to the EXTRA.css template of your current style and put all customizations in there. That will override your default styling and be update safe (as when you update your style that template is not replaced). You can find the selector to style of any aspect of your site by simply right clicking and "Inspect Element" or whatever language your browser uses.

*edit: @Brogan has a series of guides that can better explain than I can. Here is one for you.
Last edited:
Thanks for the link. Brogan put together a nice temp to follow. One problem I am having I can't find an answer too is I am trying to edit the mod bar:

background-color: @primaryDarker;
border-bottom: 1px solid @primaryLightish;
font-size: 11px;

If I edit the above code in the moderator_bar.css template to Yellow it changes the mod bar back ground to yellow. but if I take that same code and past it in to extra.css it won't change the color. Even though that is what I have been doing to edit the colors so far from other templates after using browser inspector to find which one.

Does this make sense?
Exactly what Brogan said! Make your code look similar to this and it should take effect for you when pasted into your EXTRA.css

background-color: yellow !important;
Top Bottom