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

Color Change

Discussion in 'Styling and Customization Questions' started by Craig, Nov 13, 2012.

  1. Craig

    Craig Active Member

    Good morning to you.
    I am wondering if there is a way to change the color(s) of the navbar / menu items?
    for example


    • Home
    • Forums
    • Members
    • Help
    • Contact
    IF I wanted to just change the color for the menu item "contact" how would I go about doing that?

    Thank you in advance for your help!
     
  2. James

    James Well-Known Member

    You can change the colour of them all using the style properties system.

    For just contact, you would merely add it to EXTRA.css. Seeing as "Contact" isn't a default XenForo tab, I can't provide specific selectors, but it's simple CSS.
     
    Jake Bunce and Craig like this.
  3. Craig

    Craig Active Member

    Thank you for the response but.... I don't know how to write code of any type.
     
  4. James

    James Well-Known Member

    If you provide a link to your site we can provide the css
     
    Jake Bunce likes this.
  5. Craig

    Craig Active Member

    The one I actually want changed it VIP Membership. I used Contact as merely an example.
    Thanks for the offer! The site link is;

    Doomsday Prepper Forums
     
  6. James

    James Well-Known Member

    You don't actually have any unique classes on that link for it to be altered individually. Did you create those links with template edits?
     
    Jake Bunce likes this.
  7. Craig

    Craig Active Member

    Jake Bunce likes this.
  8. James

    James Well-Known Member

    I've submitted a request to Jake, but at the minute there's no way to target just that tab individually.
     
    Jake Bunce likes this.
  9. James

    James Well-Known Member

    Actually, here's a very hackish way to do it:
    In EXTRA.css:
    Code:
     a[href="http://www.doomsdayprepperforums.com/index.php?link-forums/vip-membership.83/"]{
     background: red !important;
    }
    
    Change "red" to change the background colour.
     
    Jake Bunce likes this.
  10. Craig

    Craig Active Member

    unfortunately I know no other way to make a tab.
     
  11. 0xym0r0n

    0xym0r0n Well-Known Member

    AdminCP > Appearance > Templates > Extra.css

    add this anywhere
    Code:
    .navTabs .navTab.contact .navLink
    {
        color: #FF0000;
    }
    change contact to forums, help, etc
    You might have to play with the casing but I am able to hide tabs and links based off the same cs. So, in theory, this code should work for color.

    Sourced: http://xenforo.com/community/threads/change-colour-of-tabs.38846/#post-429148

    And for nodes as tabs: http://xenforo.com/community/threads/nodes-as-tabs.26687/page-12#post-435085

    So instead of contact or home it'd be nodetab1 nodetab2 etc
     
    Jake Bunce likes this.
  12. James

    James Well-Known Member

    This doesn't work.
     
    Jake Bunce likes this.
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  14. Craig

    Craig Active Member


    I am still not able to get the color to change.

    I used
    .navTabs .navTab.nodetab83 .navLink
    {
    color: red;
    }
    and I added the missing
    {$extraTabId}

    Yet I still can't get the tab color to change.
    When I hover over it on the node tree it shows vip-membership.83
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Your style still has the bug. You did not fix it. Make sure you are editing the correct style. And note that there are 3 extraTabs blocks, and so there are 3 places to apply the fix.
     
    Craig likes this.
  16. Craig

    Craig Active Member

    Ok, I went through and made sure each section looks like;

    <xen:else />
    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">

    But I still am not getting the color change.
    Should I put {} around any and all $extraTabId
     
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Craig likes this.
  18. Craig

    Craig Active Member

    I changed it to the following;

    .navTabs .navTab.nodetab83 .navLink
    {
    color: red;
    }

    But still no go
     
  19. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It's being overridden by other CSS in your style. Add !important to force it:

    Code:
    .navTabs .navTab.nodetab83 .navLink
    {
    color: red !important;
    }
    
     
    Craig likes this.
  20. Craig

    Craig Active Member

    That worked like a charm! Thank you so very much!
    I appreciate all of the help and patience!
     
    0xym0r0n likes this.

Share This Page