How to make a navbar tab appear a different colour from the others when selected

[BBNZowner]

Can anyone help me with the CSS for this? I can't find anything obvious in the current code that controls this and I would like to learn how to change it.
Also I tried doing a forum search but wasn't sure what terms to use so couldn't find anything.

Thanks

[billstelling]

A lot easier to do than write up.. It can be done though but unless you can talk someone into doing it for you I doubt someone is going to take the time to write it up.
Basically you need to identify the unique selectors for the tabs and code in a color for a: active for that a.tab .

a.tab

is the selector for all tabs and the unique selector for home above on this forum is

a.tab:nth-child(6)

you can then add the css for them using those parameters.

and this forums css code for tabs

td.tab a:link, td.tab a:visited, td.tab a:active, a.tab, td.tab2 a:link, td.tab2 a:visited, td.tab2 a:active, a.tab2, a.tab2:link, a.tab2:active, a.tab2:visited {
    background: url("images/cstyle/button2.gif") no-repeat scroll right top transparent;
    font: 10pt tahoma,sans-serif;
    width: 76px;
    height: 20px;
    text-align: center;
    padding: 2px 0px 0px;
    margin: 0px 1px;
    text-decoration: none;
    float: right;
    position: relative;
    top: 3px;
}

you can use it as a template to start with as it has the basic info you need to start with about what is controlling the look to begin with.

[BBNZowner]

Ah I see, in that case I might have to ask the original style creator as to how to edit it in this circumstance, as I can't find much in the code for the style I want to customize

[billstelling]

The stylevars is an excellent tool once you get to know it but it is not all encompassing. Things like tabs do not have individual setting for them and are handled as a group within the vars.

The rest has to be done with edits and or css coding. I doubt the original style creator will touch it either as it is not an included thing with most, if not all sold themes. Money talks though and It's not something over the top so you might get some takers that way or with some other offer.

As it is, most of us who get talked into the little things end up doing way more and I even have had some act like I was getting paid to help them out.. So it's a bit touchy with some of us that can do extreme modding.

This is what I am working on now and I think you will see what I mean about you can do just about anything to vb or any other site no matter how it was created. My test site.

[BBNZowner]

I understand. Don't really want to hassle anyone for some coding if I can eventually figure it out *hopefully*. I'm attempting to customize the Metro style by themeforest however the code used isn't as straightforward as stock templates so I'm having a bit of trouble. I might contact them just in case as I assume it really should be doing what I want it to be anyway.

(I've edited the icons, colour, and hover colour via CSS for the navbar tabs however the custom tabs don't seem to want to be highlighted when activated/selected).

[billstelling]

I have it done for the header links in the html for them in the header. This is page specific but it will give you and Idea what to look for in the nav code to add the css for it.

<ul class="nav right">

    <li class="">
        <a href="/"> … </a>
    </li>
    <li class="">
        <a href="http://www.trafficunit.com/howitworks.htm"> … </a>
    </li>
    <li class="">
        <a href="http://www.trafficunit.com/about.htm"> … </a>
    </li>
    <li class="selected">
        <a href="http://www.trafficunit.com/support/forum.php"> … </a>
    </li>
    <li class="">
        <a href="http://www.trafficunit.com/faqs.htm"> … </a>
    </li>
    <li class="">
        <a href="http://www.trafficunit.com/contact.htm"> … </a>
    </li>

</ul>

I am more of css stylist than an html coder although I do know it fairly well. I might mess with it tomorrow and see what I can figure out. Been meaning to anyhow due to the replaced header and footer so the site matches the main web site. That site is the test beb for the rework on distribber going on right now. I plan on putting all my work on it later on whenI get some free time.

--------------- Added [DATE]1387271877[/DATE] at [TIME]1387271877[/TIME] ---------------

this is it for vb.org..

a.tab2:active, a.tab2:visited {
    background: url("images/cstyle/button2.gif") no-repeat scroll right bottom transparent;
}

so it would be something like this..

a.tab:nth-child(6) a.tab2:active,a.tab:nth-child(6) a.tab2:visited {
    background: url("images/cstyle/button2.gif") no-repeat scroll right bottom transparent;
}

only using color instead of a graphic.

a.tab:nth-child(6) a.tab2:active,a.tab:nth-child(6) a.tab2:visited {
    background-color: #ffffff;
}

[BBNZowner]

Thanks for the code, I will have another go at it in the next few days, much appreciated

[BBNZowner]

It seems like the reason it's not working is the navtabs are linking to CMS pages/sections, any idea what to use to get them selected?

I have tried the plugin (with variables filled in of course)

if (intval($_GET['r']) == xx) $root = 'tab_this_yyy';

hook location: set_navigation_tab_vbview

And it works to select them however does not maintain the custom background colors and puts a colored block over the navbar underneath (see comparison attachment - red outline)

I should mention that appending the tabid to the url in the navigation manager has the same result of the coloured block on active cms tabs

[billstelling]

They are their own .php so they have to be set there as well. Pretty much the same you did for forum.php.. Once it's set for select you can css the rest using the unique selectors for each pretty much. If it gets to frustrating, let me know and I'll go take a look. Hard to just post up some stuff as each forum takes on it's own characteristics.