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

Header link color question..

Discussion in 'Styling and Customization Questions' started by ROBD, Aug 8, 2012.

  1. ROBD

    ROBD Member

    Could anybody tell me how to change the top navigation links without changing the bottom? It's pretty much the last thing I need to do and I'm "finished" with the site design, but I just can't seem to change one without changing the other.

    I can get them to be two different colors using firebug, but then I can't translate that success to the admin control panel for some reason.

    In firebug the top nav links are found here:

    .navtabs
    .navtab popupclosed
    .navlink
    color: #ffffff; <this line I want to control separately from the one below

    and the bottom nav links are found here:

    .navtabs
    .navtab .selected
    .tablinks
    border-color: #000000;
    color:#000000; <this line I want to control separately from the one above
    display: block;
    font-size: 12px;
    line-height 29px;
    etc..

    I hope I made that clear enough. Any help would be appreciated. Thx.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Try this:

    Code:
    .navTabs .navTab a.navLink
    {
    	color: green !important;
    }
    
    .navTabs .navTab .tabLinks a
    {
    	color: red !important;
    }
    
    Screen shot 2012-08-08 at 1.28.10 AM.png
     
  3. ROBD

    ROBD Member

    Thanks Jake, but that didn't work for me. Most likely, I'm not following your directions correctly though as you have the right idea about what I'm trying to do.

    I separately pasted this code:
    .navTabs .navTab a.navLink
    {
    color: white !important;
    }

    .navTabs .navTab .tabLinks a
    {
    color: black !important;
    }

    into all five text boxes that accept code that contained the label "tab" or "tabs" and deleted it if it didn't work, and then went and pasted it in the next "tabs" section in this area:
    Style Properties: Header and Navigation


    And none of the five worked. If it helps, the bottom links are already black like I want them to be, and the highlighted upper link is white, but the rest of the upper links are black and I would like for all of the upper links to be white while having the lower links stay black.

    ??
     
  4. Shelley

    Shelley Well-Known Member

    Works for me from the solution jake provided you may have some kind of conflict in your css overriding it? .

    jake-solution.png

    Code:
    .navTabs .navTab a.navLink
    {
        color: green !important;
    }
    
    .navTabs .navTab .tabLinks a
    {
        color: red !important;
    }
    
    .navTabs .navTab.selected .navLink
    {
        color: orange !important;
    }
     
  5. ROBD

    ROBD Member

    Possibly so Shelley, can I ask where you pasted that code?
     
  6. Shelley

    Shelley Well-Known Member

    paste that into your EXTRA.CSS Template for that specific style.
     
  7. ROBD

    ROBD Member

    Ahh..OK, thanks Shelley that did the trick. I'm sure that should have been obvious to me but it wasn't.

    Really appreciate your help.
     
  8. Shelley

    Shelley Well-Known Member

    Ah. I automatically assumed you knew about the extra.css

    Just a little extra info. Your able to modify every element through the extra.css template and I would suggest using it if your planning on customizing the navbar extensively. Also, extra.css is never overwritten during upgrades so your alterations will be left intact. Unsure whether you knew that but it doesn't hurt to mention as others may bump onto this thread and benefit from that info and jakes solution he posted. :)
     
  9. ROBD

    ROBD Member

    No, I had no clue, and that's great info to know.

    Thanks again Shelley.
     

Share This Page