XF 1.5 How to find which sytling it is?

[Huskermax]

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.

 

[Huskermax]

http://forum.huskermax.com/vbbst/index.php

Forgot a link.

 

[gwordz]

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.

 

[Huskermax]

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:

#moderatorBar
{
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?

 

[Paul B]

You may need to use higher specificity (if possible), or you can use the !important declaration.

 

[gwordz]

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

#moderatorBar
{
background-color: yellow !important;
}

 

[Huskermax]

OK, I will try out the !important code thanks a lot.

http://forum.huskermax.com/vbbst/index.php

If you go to the link and hover over the Members link until it drops down the menu. You will see the "Members" text is still the blue color. I can not find this code any help would be appreciated.

 

[Huskermax]

OK, I will try out the !important code thanks a lot.

http://forum.huskermax.com/vbbst/index.php

If you go to the link and hover over the Members link until it drops down the menu. You will see the "Members" text is still the blue color. I can not find this code any help would be appreciated.

I found it, it was the link hover color.