I put the speed bar in the head.tpl in a header location:
Code:
<TR>
<TD colspan="3" align="left" valign="bottom" width="795">
<TABLE width="795" cellpadding="0" cellspacing="0" border="0"><TR>
{section name=sb loop=$speed_bar} {if $speed_bar[sb].active eq "Y"}
<TD>{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>
<TR>
<TD bgcolor="#4D4D4D" colspan="11">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
</TABLE>
</TD>
</TR>
In the customer/tab.tpl, it is just the basic code, but references the CSS style:
Code:
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="tab" align="center">{$tab_title}</TD>
</TR>
</TABLE>
And just so you can get an idea about what I am doing with the CSS, here are the styles I use that create a rollover hover:
Code:
}
.tab a, .tab a:link, .tab a:visited {
BORDER-TOP: 1px solid #FFFFFF; BORDER-LEFT: 1px solid #FFFFFF; BORDER-RIGHT: 1px solid #FFFFFF; WIDTH: 120px; DISPLAY: block; COLOR: #333333; TEXT-DECORATION: none; FONT-FAMILY: Verdana; FONT-SIZE: 10px; LINE-HEIGHT: 16px; BACKGROUND-COLOR: #FFFFFF; PADDING-LEFT: 0px;
}
.tab a:active, .tab a:hover {
BORDER-TOP: 1px solid #4D4D4D; BORDER-LEFT: 1px solid #4D4D4D; BORDER-RIGHT: 1px solid #4D4D4D; COLOR: #333333; TEXT-DECORATION: none; FONT-SIZE: 10px; BACKGROUND-COLOR: #999999;
}
If you would like to see it in action (I did change the hover example in the above code), you can PM me. I tend not to offer too many examples from my sites in the forum as there are many X-Cart hack attempts on our server using known X-Cart info.
- Mike