pnm,
The text in the speedbar is for links, the color of which is defined separately. Near the top of the skin1.css file you'll see a series of 4 definitions beginning with "A:" (e.g., A:link). There are 4 definitions: link, visited, hover, and active. The link color is the color of the text in general. Once the link has been visited, the text will change to the visited scheme. When the user mouses over the link, the hover scheme will come into play. I think the active definition will only be used when a link opens a new window and that window is still open. Typically, link definitions are two-part: color and text-decoration (e.g., underline/no underline).
Now, here's the tricky part: these links are for the web page body in general. If you change those definitions, it will affect all your links except those defined by other classes. I ran into the same problem, so I defined a new ID style called "speedbar." I used an ID style instead of a class because the td element (cell) containing the speedbar text is already governed by the .Tab class and you can only have one class per element. Also, when defining links, it doesn't work to define them within classes because they are elements. I don't believe you can define elements within classes, but you can within ID styles.
So here are your options: you can simply change the link definitions and have your whole page affected, or you can create a new ID style just for your speedbar links. If you choose the second, you can add something like this to your skin1.css file:
Quote:
#speedbar A:link {
COLOR: #000000;
TEXT-DECORATION: none;
}
#speedbar A:visited {
COLOR: #000000;
TEXT-DECORATION: none;
}
#speedbar A:hover {
COLOR: #FF0000;
TEXT-DECORATION: underline;
}
#speedbar A:active {
COLOR: #000000;
TEXT-DECORATION: none;
}
|
You can change the colors/decorations as you please. Then you'll have to edit your tab.tpl template in the <x-cart dir>/skin1/customer directory. Edit it as follows (see the part in bold):
Quote:
<table cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td class="TabLeftSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabTop">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabRightSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td class="TabLeftSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
{*** Add speedbar id to cell ***}
<td id="speedbar" class="Tab"{$reading_direction_tag}>{$tab_title}</td>
<td class="TabRightSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td class="TabLeftCorner">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabCenter">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabRightCorner">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
</table>
|
You just have to enter it for that one td cell. Now you'll have separate link colors defined for your speedbar, and they will override those defined for the general body.
The border lines for the search bar are controlled by the class .HeadThinLine in skin1.css. Just change the background color there to whatever you want.
I hope that helps. You'll a CSS expert in no time!
Jill