NavTabs / colors / customization ?

[erich37]

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.






Appreciate your help!
Many thanks!

 

[Paul B]

When you hover over the Tab, then the text turns "white color" for a quick moment, before it switches back towards blue.

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.

/* 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]

thanks Brogan, I will check this out.

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

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. ) ?

 

[Paul B]

Have fun!

It made me pull my bloody hair out.

<-- See!

 

[erich37]

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

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

 

[Paul B]

come on, this stuff is simply not possible

It is, check my site

No flickering there.

 

[erich37]

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).

 

[Paul B]

Just edit the CSS above to suit.

 

[Shelley]

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)

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

.navTabs .navTab.account.PopupClosed .navLink:hover {
    color: #032A46;
}

 

[Shelley]

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

.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]

Shelley, you are a CSS genius

that did the trick

 

[erich37]

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

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

 

[kankan]

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

 

[kankan]

Found it :

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