X-Cart forums

[pauldodman]

Yes, that does look better. We got there in the end!

It now fits in better with the style of the site. I guess that you have used the same graphic as for the main bar. Having done that in such a way, it would be interesting to see what it would actually look like in the headline bar, as per Balinor's earlier suggestion.

Paul Dodman
e-business consultant
Lumino Internet
luminointernet.co.uk

[mffowler]

The Speed Bar is great in theory but looks terrible the way X-Cart presents it. Just today, I moved the Speed Bar to a "Head Line" location, removed the images and they are normal text.

When hovered, they look similar to tabs- but much cooler than X-Cart's stock. Thus, I think keeping the Speed Bar intact is the way to go, just change the CSS and move the include to wherever you want them... Mike

[shipmerchant]

Hello MMFlower,

Can you share how you changed your speed bar, and maybe let us see what it looks like?

Thanks in advance!

[mffowler]

I put the speed bar in the head.tpl in a header location:

<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:

<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:

}
.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