• 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


Well-known member
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?



XenForo moderator
Staff member
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:

<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:


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


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.

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.