Changing the color of one of the Navigation Tabs

[Jamie]

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

 

[Paul B]

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:

 

[Jamie]

Thanks my friend! Worked like a charm!

Jamie

 

[Peggy]

Perhaps you could post this on your How Do I? thread Brogan?

 

[Paul B]

Thanks Peggy, I have done

 

[HannahP]

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.