speed bar text colour

mrbiggles · #1 04-10-2005, 06:25 PM

Hello
I have been trying to change the text colour of my speed bar for a while now and have given up. It has been modified a bit. I can get the vertical bars to change colour, but unfortunately the text will not change from black.

TOP_MENU.TPL

Code:

{if $printable ne ''}
{include file="customer/top_menu_printable.tpl"}
{else}
<TABLE border="0" cellpadding="0" cellspacing="0">
{if $speed_bar}
<TR>
<TD valign="top" align="right">
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
{section name=sb loop=$speed_bar}
{if $speed_bar[sb].active eq "Y"}
<TD valign="top">{include file="customer/tab.tpl" tab_title="<A href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</A>"}</TD>
<TD width="1">[img]{$ImagesDir}/spacer.gif[/img]</TD>
{/if}
{/section}
</TR>
</TABLE>
</TD>
</TR>
{/if}
<TR>
</TABLE>
{/if}

TAB.TPL

Code:

<table border="0" cellpadding="0" cellspacing="5"> 
<tr> 
<td class=".TabFont" align=center><FONT class=".TabFont">{$tab_title}</FONT>|</td> 
</tr> 
</table>

Relevant CSS

Code:

.TabBar { 
COLOR: #ffffff; 
.TabFont { 
COLOR: #ffffff; 
FONT-SIZE: 12px; 
}

Bella Forma · #2 04-10-2005, 07:34 PM

Quote:

Originally Posted by mrbiggles

Code:

.TabBar { 
COLOR: #ffffff; 
.TabFont { 
COLOR: #ffffff;
FONT-SIZE: 12px; 
}

You tried the SECOND color bit in the css above?

ie. .TabFont {
.COLOR: #ffffff;

mrbiggles · #3 04-10-2005, 07:38 PM

Hello Bella Forma

Yeah it does not matter which one I pick, it still does not change the font colour, the font size for the speedbar changes via these CSS entries no problems, it seems as though its not even going to CSS for the text colour.

Bella Forma · #4 04-10-2005, 07:55 PM

Hiya Adam

Ok two small things it could be.

First one... take the . (dots) out of the class definition in TAB.tpl

ie remove these:
<td class=" . TabFont" align=center><FONT class=" . TabFont">{$tab_title}</FONT>|</td>

I don't think (not 100% sure) that's the right syntax for it, my money's on the dots

Second your CSS code looks nested/missing a bracket (is that deliberate or just a typo?). No idea if nested is possible but try using this instead.

Code:

.TabBar { 
COLOR: #ffffff;
}
.TabFont { 
COLOR: #ffffff; 
FONT-SIZE: 12px; 
}

mrbiggles · #5 04-10-2005, 08:34 PM

Hi Bella Forma
I tried what you advised and the text is still staying black. this is how the files look now, incase I did it wrong, or you can see something else.

With the top menu tpl file, there is a reference to a tab title here

Code:

tab_title="<A href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</A>"}</TD>

Just wanted to make sure this has nothing to do with the text in the tabs.
Thanks for your help

CSS

Code:

 TEXT-TRANSFORM: uppercase;
}
.TabBar { 
COLOR: #ffffff; 
} 
.TabFont { 
COLOR: #ffffff; 
FONT-SIZE: 12px; 
} 

.CatMenuItemOff

Tabs.tpl

Code:

<table border="0" cellpadding="0" cellspacing="5"> 
<tr> 
<td class="TabBar" align=center>{$tab_title}|</td> 
</tr> 
</table>

Top menu tpl

Code:

{if $printable ne ''}
{include file="customer/top_menu_printable.tpl"}
{else}
<TABLE border="0" cellpadding="0" cellspacing="0">
{if $speed_bar}
<TR>
<TD valign="top" align="right">
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
{section name=sb loop=$speed_bar}
{if $speed_bar[sb].active eq "Y"}
<TD valign="top">{include file="customer/tab.tpl" tab_title="<A href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</A>"}</TD>
<TD width="1">[img]{$ImagesDir}/spacer.gif[/img]</TD>
{/if}
{/section}
</TR>
</TABLE>
</TD>
</TR>
{/if}
<TR>
</TABLE>
{/if}

Bella Forma · #6 04-10-2005, 09:46 PM

I don't think there is anything wrong with your code.. well not that I can see.

I had a quick go on my site and got the same problem as you, the CSS doesn't want to change the text colour.

There must be some 'magic' setting somewhere.... I think you need a guru!!!

mrbiggles · #7 04-10-2005, 11:28 PM

Thanks for trying anyway.

I'm just about to start doing a course on css, so I may be able to solve it myself soon.
Regards Adam

stever · #8 04-11-2005, 11:42 PM

mrbiggles, when you are learning CSS, the important thing to remember is the "cascading" in "cascading style sheets".

That means that there is a cascade of importance in the style rules and it may well be that you have written a rule elsewhere that overrides your class.

To take an example, let's say that you had a #header ID controlling the speedbar container and that you had made a rule {color: #000;}.

In this case, making the td a class of .tabfont {color: #fff;} wouldn't change it, because you have already been specific and said: "I want all color within #header to be black."

What would change it is if you made a rule: #header td.tabfont {color: #fff;}, which now says: "I want all the table cells within the header container which have the class of tabfont to be white."

Anyway, may be something to check - enjoy the CSS classes!

To make a great oversimplification, the cascade normally runs from the general to the specific...

august · #9 04-22-2005, 11:33 AM

I don't know if you already fixed, but in my computer is showing in blue. In order to fixed, you have to change the color in class="maincontent" in the css file. I hope that help.

ps: sometimes when everything fails, I add a language statement, and change the colors using html inside the statement.

bluski · #10 06-20-2005, 07:26 PM

In case anyone was still having this problem and needs an answer. ...

You must change the link properties in .Tab

.tab a, .tab a:link, .tab a:visited {