vBulletin 5: which stylevar controls the colour of the nav bar tab?

[jdj]

I'm going through the stylevars of vBulletin 5 customising my test site.

Looking at the tabs in the nav bar vBulletin.com has white as the background to the selected tab, bright blue for hover, and dark blue for the rest of the bar with the font in black or white according to whether it's highlighted (home, forum, blogs, articles, groups, tracker, purchase on this site).

I've identified that the stylevar that controls the bright blue hover colour is not actually in the NavBar sub section but is under Header and is header_tab_background_hover.

I cannot find the stylevar or stylevars that are controlling the dark blue colour (the dark blue behind home, forums, blogs, articles etc.)

Which is it? Or are there several?

[kehindelawal]

why not use firebug to get it?

[jdj]

why not use firebug to get it?

I've looked at the page in firebug; even when I have the item selected firebug does not give me a description that resembles anything written in the list of stylevars. That's why I'm asking the question on the forum - someone here must know which stylevar or stylevars control the colours of the tab.

[Classicrv]

Possibly these are what you're looking for? ---> http://screencast.com/t/VUzhZdh0S

[jdj]

The header_subtabar_background stylevar is just set to transparent; no colour. So that's not where the persistent blue colour is coming from. Firebug tells me it's #033145 which looks like that colour but doesn't give a name from the stylesheet that corresponds to anything in the list of stylevars. So there must be a setting somewhere in the stylevars that changes this.

[Wayne Luke]

header_tab_* controls the tabs themselves.

There are no "navbar*" style variables in vBulletin 5. This may be due to upgrading and maintaining incompatible vBulletin 4 styles in the database.

[Wayne Luke]

Should be header_tabbar_background.

#channel-tabbar {
	background: {vb:stylevar header_tabbar_background};
	width:100%;
	border-bottom: {vb:stylevar header_tabbar_border};
	height: 35px;
	text-transform: uppercase;
}

This is where Firebug comes in handy because once you have the class or ID name of the element you can easily see what stylevars are used by looking at the CSS.

[jdj]

I've changed header_tabbar_background and saved it: The colour of the nav bar doesn't change. I've cleared the system cache, refreshed the page, looked at it in both IE and Firefox - doesn't make any difference. Header_tab_background_hover changes the colour in both IE and Firefox, changing header_tabbar_background doesn't make any difference.

[Wayne Luke]

What happens if you remove the background image? The changes work when I test them out.

[Hummie]

I just went through this problem myself today. It seemed to be controlled by the background image for that style var. Delete the stuff in the background image field as well as changing the background color image.

[jdj]

Thanks, and to Wayne, that works.

For the benefit of anyone else trying to solve the problem this is sprite_gradients_vb.png which has a colour and overwrites anything else you put in as the background colour for header_tab_background and header_tabbar_background if you leave it in situ.