[Gemma]

Originally Posted by GaryT

I have different instances of tabslight but none of just that phrase alone. For example ....

dl.tabslight

tabslight_border.borderWidth

tabslight_border.units

tabslight_size

tabslight_size.width

Change them all anyway?

Do it this way, add this to your additional.css

/* LIGHT-TABS */

dl.arcade_tabslight {
    border-bottom:solid {vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units} {vb:stylevar mid_border.borderColor};
    padding-{vb:stylevar left}:{vb:math {vb:stylevar padding} * 2};
    margin-bottom:1em;
    height:{vb:math {vb:stylevar tabslight_size.height} + {vb:stylevar tabslight_border.borderWidth}};
    margin-top:{vb:math {vb:stylevar padding}*1.5};
}

dl.arcade_tabslight dt {
    display:none;
}

dl.arcade_tabslight dd {
    float:{vb:stylevar left};
}

dl.arcade_tabslight dd a {
    font-size:{vb:stylevar small_fontSize};
    font-weight:bold;
    color:{vb:stylevar body_color};
    text-decoration:none;
    text-align:center;

    padding:0 {vb:stylevar padding};
    min-width:{vb:stylevar tabslight_size.width}{vb:stylevar tabslight_size.units};
    height:{vb:stylevar tabslight_size.height}{vb:stylevar tabslight_size.units};
    line-height:{vb:stylevar tabslight_size.height}{vb:stylevar tabslight_size.units};
    display:block;

    border:{vb:stylevar tabslight_border};
    background-color:{vb:stylevar blocksubhead_background.backgroundColor};

    margin-{vb:stylevar left}:-{vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units};
    margin-bottom:-{vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units};

    -moz-border-radius-top{vb:stylevar left}:5px;
    -moz-border-radius-top{vb:stylevar right}:11px;
    -webkit-border-top-{vb:stylevar left}-radius:3px;
    -webkit-border-top-{vb:stylevar right}-radius:11px;
    border-top-{vb:stylevar left}-radius:3px;
    border-top-{vb:stylevar right}-radius:11px;
}

html>/**/body dl.tabslight dd.selected a,
html>/**/body dl.tabslight dd.selected a:hover {
    position:relative;
    border-bottom: {vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units} {vb:stylevar tabslight_border.borderStyle} transparent;
    background:{vb:stylevar tabslight_selected_background};
}
* dl.tabslight dd.selected a, * dl.tabslight dd.selected a:hover {
    border-bottom: {vb:stylevar tabslight_border.borderWidth}{vb:stylevar tabslight_border.units} {vb:stylevar tabslight_border.borderStyle} transparent;
    background:{vb:stylevar tabslight_selected_background};
}

dl.arcade_tabslight dd a:hover {
    color:{vb:stylevar linkhover_color};
    background:{vb:stylevar tabslight_selected_background};
}

Then within that code find this line

background-color:{vb:stylevar blocksubhead_background.backgroundColor};

Change the {vb:stylevar blocksubhead_background.backgroundColor}; to whatever color you want ie black;, #000; or #000000; etc then save the template.

Make sure you change <dl class="tabslight"> to <dl class="arcade_tabslight"> in v3ARCADE_MAIN

That should work.