1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by Jamie, Dec 5, 2010.

  1. Jamie

    Jamie 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?

    Thanks,
    Jamie
     
  2. Brogan

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

    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
     
  3. Jamie

    Jamie Well-Known Member

    Thanks my friend! Worked like a charm!

    Jamie
     
  4. Peggy

    Peggy Well-Known Member

    Perhaps you could post this on your How Do I? thread Brogan?
     
    Brogan and Ranger375 like this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Thanks Peggy, I have done :)
     
    Peggy likes this.
  6. mjp

    mjp Well-Known Member

    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.
     
    Mujahid Taban, Kaiser, PoLiZe and 2 others like this.

Share This Page