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

XF 1.5 How to find which sytling it is?

Discussion in 'Styling and Customization Questions' started by Huskermax, Jun 3, 2016.

  1. Huskermax

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

    Huskermax Member

  3. gwordz

    gwordz Member

    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: Jun 4, 2016
  4. Huskermax

    Huskermax Member

    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?
  5. Brogan

    Brogan XenForo Moderator Staff Member

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

    gwordz Member

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

    Huskermax Member

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


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

    Huskermax Member

    I found it, it was the link hover color.

Share This Page