[JWait]

There are 2 problems working with the Speed Bar. (Please note: These examples are using 4.1.11 but should be similar to previous versions)

1. The links to the pages are defined in the admin section of x-cart, and are dynamic. They use the variable "tab_title="<a href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</a>" inside a loop. This is in the skin1/customer/top_menu.tpl.

2. The top_menu.tpl uses {include file="customer/tab.tpl" tab_title="<a href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</a>"} to call the title and display the link. Here is the tricky part... tab.tpl uses a series of images to "make" the "box" that the Speed Bar links are displayed in.

If you are not interesting in keeping the "box" then simply modify tab.tpl from...

<table cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td class="TabLeftSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
<td class="TabTop"><img src="{$ImagesDir}/spacer.gif" width="85" height="5" alt="" /></td>
<td class="TabRightSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
</tr>
<tr>
<td class="TabLeftSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
<td class="Tab"{$reading_direction_tag}>{$tab_title}</td>
<td class="TabRightSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
</tr>
<tr>
<td class="TabLeftCorner"><img src="{$ImagesDir}/spacer.gif" class="TabCorner" alt="" /></td>
<td class="TabCenter"><img src="{$ImagesDir}/spacer.gif" class="TabCorner" alt="" /></td>
<td class="TabRightCorner"><img src="{$ImagesDir}/spacer.gif" class="TabCorner" alt="" /></td>
</tr>
</table>

to this..

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10"></td>
<td class="Tab">{$tab_title}</td>
</tr>
</table>

Since the class="Tab" declaration is included the Speed Bar will have whatever the defaullts are for the "Tab" class. You can define the text in the Speed Bar by changing the "Tab" class in your stylesheet (skin1.css). I used...

.Tab     { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none; background-color: transparent; text-align: center; vertical-align: bottom; height: 15px }
.Tab A:link  { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none }
.Tab A:visited  { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none }
.Tab A:hover  { color: #ff3300; font-weight: bold; font-size: 13px; text-decoration: underline }
.Tab A:active   { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none 
}

But you will probably want to change it.

As always, make backups of any files you change so that you can revert them if you are not happy with the results.

In keeping with the original title of this thread, I usually move the Speed Bar to where the "Search" is. After banging my head against the wall trying to include the Speed Bar in the search.tpl I discovered it was easier to just include the search.tpl in the top_menu.tpl (and removing the "include seach.tpl" from where is was originally. I just replaced the "Company Phone" (actually I moved it to the bottom of the page, but that is a different subject) with the "Search". Here is my skin1/customer/top_menu.tpl...

{* Modified to include customer/search.tpl in title bar *}
{if $printable ne ''}
{include file="customer/top_menu_printable.tpl"}
{else}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>
{if $speed_bar}

<table border="0" cellpadding="0" cellspacing="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="10"><img src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0" alt="/" /></td>
{/if}
{/section}
</tr>
</table>
{/if}
</td>
<td align="right">
{if $usertype eq "C"}
{include file="customer/search.tpl"}
{/if} 
</td></tr>
</table>
{/if}

This puts the Speed Bar links on the left and the Search on the right. It limits the length and number of links because otherwise it will "spill over" onto another line (or worse, extend the width of the page) but it allows about 6 links if the titles are not too long.