How do I customize the hover background color of the tabs in the member profile?

[tcarr9]

When looking at a member's profile page, if I hover over the active tab the link color changes but not the background. If I hover over a different tab, both the link color and the background change, to what is either the same color or very similar colors, making it impossible to read the name of the tab.

How can I change either the background color or the link color (either one will do) when hovering over these tabs? This doesn't appear to be a style var, at least not an obvious one. I've had problems with other places where I hover over a tab or button that had to be fixed by adding a few lines to additional.css, but I wouldn't know how to guess what to add there for this.

[napy8gen]

It is actually under stylevars> common> tabslight_
there are 3 of them

but the hover is using stylevars> navbar> navbar_tab_selected_background

I reported this way back in January. Wanting a new stylevar for it. But they never listened.
You can vote on it.
http://tracker.vbulletin.com/browse/VBIV-4469

[tcarr9]

Thanks so much! I used the hack I found in the tracker link and it works nicely now! What I did was edit vbulletin.css to find this:

dl.tabslight dd a:hover {
	color:{vb:stylevar linkhover_color};
	background:{vb:stylevar navbar_tab_selected_background.backgroundColor} {vb:stylevar navbar_tab_selected_background.backgroundImage} repeat-x 0 -{vb:stylevar navbar_tab_selected_top_width}px;
}

and replace it with this:

dl.tabslight dd a:hover {
	color:{vb:stylevar linkhover_color};
	background:{vb:stylevar tabslight_selected_background};
}

[napy8gen]

yes that is the css location of it. :-)
but the proper way is to change only at the stylevars.

[benstillman]

Freaking awesome. I've been trying to figure this one out for two days.

[Qwk86gn]

Originally Posted by tcarr9

Thanks so much! I used the hack I found in the tracker link and it works nicely now! What I did was edit vbulletin.css to find this:

dl.tabslight dd a:hover {
    color:{vb:stylevar linkhover_color};
    background:{vb:stylevar navbar_tab_selected_background.backgroundColor} {vb:stylevar navbar_tab_selected_background.backgroundImage} repeat-x 0 -{vb:stylevar navbar_tab_selected_top_width}px;
}

and replace it with this:

dl.tabslight dd a:hover {
    color:{vb:stylevar linkhover_color};
    background:{vb:stylevar tabslight_selected_background};
}

Just a tip here, you can add any code like that to your additional.css to avoid issues when upgrading to futurre version. Keeps from having to revert or change templates when updating vBulletin.

The additional.css is called upon last so anything in there will "overwrite" the default value in the templates.

[tcarr9]

Thanks for a great tip! I've reverted all changes made to css files except additional.css and moved my changes to additional.css.