How to Change Nav Bar Tab Hover Color

[AlexisMedia]

It appears the admin stylevar uses navbar_tab_selected_background as both the selected and the hover color. How can I get a different hover color then selected? I'm referring to the "forum" and "what's new" tabs...

Thanks!

[TheLastSuperman]

Originally Posted by AlexisMedia

It appears the admin stylevar uses navbar_tab_selected_background as both the selected and the hover color. How can I get a different hover color then selected? I'm referring to the "forum" and "what's new" tabs...

Thanks!

Edit the CSS Template: vbulletin-chrome.css

Find:

.navtabs li.selected a.navtab {
	color:{vb:stylevar navbar_tab_linkhover_color};
	background:{vb:stylevar navbar_tab_selected_background};
        _background-image:none;
	position:relative;
	top:-{vb:stylevar navbar_tab_selected_top_width}px;
	padding-top:{vb:stylevar navbar_tab_selected_top_width}px;
	z-index:10;
}

Replace {vb:stylevar navbar_tab_linkhover_color} with either a hex #FF0000 or a rgb(205, 205, 205) value OR use another stylevar you know has the correct color .

[LifesGreatestGift]

you will need to add some new css code

You can change the "selected" color in the stylevar. For hover color go to template additional.css

Add the following, feel free to customize the color

.navtabs li a.navtab:hover {
	color:#ffffff; /* Color of text for hover */
	background-color:#000000; /* Color for background of button when hovered */
}

Now if you'd like to use an image for the background button hover then use

background:url(hxxp://urltoimage.png) #000000 no-repeat;

as opposed to background-color

[AlexisMedia]

Originally Posted by TheLastSuperman

Edit the CSS Template: vbulletin-chrome.css

Can I ask how you knew that would be located in that specific template? I never would have guessed that as it's not named anywhere close? I'd like to be able to hunt this stuff down on my own quickly if I can learn it : )

Thanks!

--------------- Added [DATE]1292889310[/DATE] at [TIME]1292889310[/TIME] ---------------

Originally Posted by TheWindows7Site

go to template additional.css

I've already done it the other way but this way is a good idea to change it too so I have less edit logging to do then it sounds like...

Thanks!

[LifesGreatestGift]

He finds the css identifier with firebug then searches in templates to see where it is called. More than likely most styling is called in vbulletin-chrome.css

[AlexisMedia]

Ok, got ya... Thanks!