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

NavTabs / colors / customization ?

Discussion in 'Styling and Customization Questions' started by erich37, Apr 19, 2013.

  1. erich37

    erich37 Well-Known Member

    I have played a bit with the navigation Tabs and changed the colors.

    But now I am stuck at the "Account Tab" when the account is selected, meaning when you are at the page: www.domain.com/community/account/


    When you hover over the Tab, then the text turns "white color" for a quick moment, before it switches back towards blue.
    I would like to change the color of this Tab when you hover over it from "white color" towards some other color, e.g.: green.
    But I can not find the CSS-class which triggers this quickly appearing "white-colored text" when you hover over that specific button.


    hover-white.png



    Appreciate your help!
    Many thanks!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    This one thing took me a long time to resolve. Trying to catch it in Firebug was an exercise in frustration.

    Check my site and you will note it doesn't happen: http://cliptheapex.com/community/

    Here's my EXTRA.css for the tabs, I can't remember which one deals with the quick flicker.
    You will have to experiment.

    Code:
    /* Navigation tab */
    .navTabs .publicTabs .navLink {
    padding: 0 16px;
    }
     
    .navTabs .visitorTabs {
    margin-right: 8px;
    }
     
    .navTabs .visitorTabs .navLink {
    padding: 0 8px;
    }
     
    .navTabs .navTab.PopupClosed:hover {
    background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
    color: @CTAExtraColour8 !important;
    }
     
    .navTabs .navTab.PopupClosed:hover a {
    color: @CTAExtraColour8;
    }
     
    .navTabs .navTab.selected .tabLinks:hover a {
    color: @CTAExtraColour7;
    }
     
    .navTabs .navTab.PopupClosed .navLink:hover {
    color: @CTAExtraColour8;
    }
     
    .navTabs .navTab.PopupOpen .navLink {
    color: @CTAExtraColour8;
    }
     
    .navTabs .navTab.selected.PopupOpen .navLink  {
    text-shadow: none;
    }
     
    /* Pop up menus */
    .Popup .PopupControl,
    .Popup.PopupContainerControl {
    color: @CTAExtraColour2;
    }
     
    .Popup .PopupControl.PopupOpen,
    .Popup.PopupContainerControl.PopupOpen {
    border-radius: 0;
    text-shadow: none;
    }
     
    .Popup .PopupControl.PopupOpen {
    color: @CTAExtraColour2;
    }
     
    .Popup .PopupControl.PopupClosed {
    color: @CTAExtraColour2;
    }
     
    erich37 likes this.
  3. erich37

    erich37 Well-Known Member

    thanks Brogan, I will check this out.

    Firebug is driving me crazy with this Account-Tab in the Navbar :cool:

    It seems it pulls different colors for the text-colors for this specific Tab (when hovered) then with the other Tabs (Forum-Tab, Member-Tab, etc. ) ?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Have fun!

    It made me pull my bloody hair out.

    <-- See! :D
     
    LanceBase likes this.
  5. erich37

    erich37 Well-Known Member

    come on, this stuff is simply not possible :( ......... and I have no hair already :eek:

    I know you will kick my as*s, but this is simply a style-bug.... or to say the least: it is not "flexible"
    :censored:
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    It is, check my site :)

    No flickering there.
     
  7. erich37

    erich37 Well-Known Member

    well, your site has the same bg-color (grey) for the the tabs when you hover over the tabs... which I find kinda confusing for the user.

    If you have different bg-colors for when the tabs are hovered, then you also need different colors for the Tab-text.
    In this case, it simply is not possible to adapt the text-color for the Account-Tab (the white flickering).
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Just edit the CSS above to suit.
     
  9. Shelley

    Shelley Well-Known Member

    Why don't you just apply the following adjusting the text to suit to stop the flicker the colour you set will apply to all the tab popupclosed hovers (i think)

    Code:
    .navTabs .navTab.PopupClosed .navLink:hover {
        color: red;
    }
    edit: If your wanting to stop the flicker on the account tab specifically and running the default navbar/colours this will stop the brief flickering upon hovering.

    Code:
    .navTabs .navTab.account.PopupClosed .navLink:hover {
        color: #032A46;
    }
     
    LanceBase, Phil and erich37 like this.
  10. Shelley

    Shelley Well-Known Member

    And for the brief moment the background account tab switches to a dark blue and just add the default selected tab add the following.

    Code:
    .navTabs .navTab.account.PopupClosed:hover {
        background: url("@imagePath/xenforo/gradients/tab-unselected-25px-light.png") repeat-x scroll center top #6CB2E4;
        border-radius: 3px 3px 0 0;
        color: #2B485C;
        text-shadow: 0 0 0 transparent, 1px 1px 2px white; }
     
    erich37 likes this.
  11. erich37

    erich37 Well-Known Member

    Shelley, you are a CSS genius (y)

    that did the trick
    :)
     
  12. erich37

    erich37 Well-Known Member

    for the record, this is what I came up with for template extra.css and it works fine now:

    Code:
    .navTabs .navTab.selected.PopupOpen .navLink  {
    text-shadow: none;
    color:#7b157b !important;
    }
     
    .navTabs .navTab.account.PopupClosed .navLink:hover {
    background: #468000 !important;
    color: #FFFFFF !important;
    text-shadow: none;
    }
     
    .navTabs .navTab.PopupClosed .navLink
    {
    color: #FFFFFF !important;
    }
     
    .navTabs .navTab.selected.PopupClosed .navLink {
        color: #7B157B !important;
        text-shadow: none;
    }
    
    :)
     
  13. kankan

    kankan Active Member

    Hello
    What should i do to color the link 'donation' in the navigation bar ?
    Regards
     
  14. kankan

    kankan Active Member

    Found it :

    Code:
    .navTabs .navTab.donations.PopupClosed .navLink {
        color: #f9bc6d!important;
    }
    
     

Share This Page