X-Cart forums - Removing Speedbar tabs for Just plain links

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Removing Speedbar tabs for Just plain links (https://forum.x-cart.com/showthread.php?t=12521)

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

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

MMFlower, Care to share how you modified the speed bar?

Hello MMFlower,

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

Thanks in advance!
:D

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