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

NavTabs / colors / customization ?

erich37

Well-known member
#1
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!
 

Brogan

XenForo moderator
Staff member
#2
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.

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

Well-known member
#3
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. ) ?
 

erich37

Well-known member
#5
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:
 

erich37

Well-known member
#7
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).
 

Shelley

Well-known member
#9
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;
}
 

Shelley

Well-known member
#10
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

Well-known member
#12
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;
}
:)