• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Changing the color of one of the Navigation Tabs

Jamie

Well-known member
#1
I have a Reset Password tab that shows only for Guest to make it simpler for my members to find it, since we merged two sites when we converted over xF.

What I would like to do it have that Tab a different color (red) or some other color that would make it stand out a little.

Can a single tab's color be changed?

Thanks,
Jamie
 

Brogan

XenForo moderator
Staff member
#2
If you create a new css class for that tab then it's possible.

Or, you can do it the easy way and do inline styling, for example:

HTML:
<li class="navTab PopupClosed" style="background-color: #CC0000"><a href="{xen:link account/upgrades}" class="navLink">{xen:phrase account_upgrades}</a></li>
That code is to add a tab on the upper navigation bar for a link the the Account Upgrades section.
The colour is set using: style="background-color: #CC0000"

The result is this:
tab.PNG
 

mjp

Well-known member
#6
Something similar, but a bit more subtle:

tab.jpg

The inline bit is ridiculously long, but for now using each different border radius is the only way that I know of to get it to work everywhere (and it still doesn't work in IE, but what does?). You could leave the border radius out and have a rectangle, but mimicking the selected tab makes it look a little better to me.

HTML:
style="background-color: #6D6D6D; border: 1px solid #C1C1C1; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px;"

Just find a color somewhere between the active and inactive tab background, then match the border to the active tab background.