X-Cart forums

[mfcopier]

Anyone know how to remove speed bar tabs and just replace them with links you know like

Home | Etc | Etc |

Pleasssss !!

[pauldodman]

You need to do some template editing. The ones in question are

head.tpl

and /customer/top_menu.tpl

You can really do some fancy stuff by playing around with these two templates. You really need an html editor to do this best, as you can then put the template into a "layout" mode.

If you do this with the top_menu.tpl, you will see a table and in the top right is the code for the current speed bar. If you replace this with your links then that should do the job. If you are confident you can of course edit this within X-cart, but it is not as easy to see.

Perhaps back it up first, but you can always restore the file if it goes wrong.

If you need some more help with doing this, let me know.

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

[balinor]

The 'head line' is also a nice place for text links...in place of the language selector for example (if you aren't using it).

[mfcopier]

So you need to put them all manually but what if you add a new link in the spped bar??

Here is the HTML but how on earth do you adjust it

<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="9" background="{$ImagesDir}/tab_l.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD height="5" valign="bottom" class="Tab">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="9" background="{$ImagesDir}/tab_r.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
<TR>
<TD width="9" background="{$ImagesDir}/tab_l.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="85" height="30" class="Tab" align="center">{$tab_title}</TD>
<TD width="9" background="{$ImagesDir}/tab_r.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
<TR>
<TD width="9" height="9" background="{$ImagesDir}/tab_c1.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD height="9" background="{$ImagesDir}/tab_b.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="9" height="9" background="{$ImagesDir}/tab_c2.gif">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
</TABLE>

Garry

[pauldodman]

So what you actually mean is that you still want the actual speedbar, and all the functionality, such as updating it by admin? I thought that you wanted to replace it completely. No problem though. (for anyone else using this info - the template now being edited is customer/tab.tpl)

It is quite an easy one to edit. The most simple thing to do is to remove the "background" s

You then have:

<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD height="5" valign="bottom" class="Tab">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
<TR>
<TD width="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="85" height="30" class="Tab" align="center">{$tab_title}</TD>
<TD width="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
<TR>
<TD width="9" height="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD height="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="9" height="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
</TABLE>

This preserves the spacing, as well as the links, simply removing the images, leaving simple text links.

If you remove the 1st and 3rd rows, you lose the spacing above and below the text links.

<TABLE border="0" cellpadding="0" cellspacing="0">

<TR>
<TD width="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="85" height="30" class="Tab" align="center">{$tab_title}</TD>
<TD width="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>

</TABLE>

You can of course alter the widths and heights to alter spacing to suit. It is after all a simple table and if you know how to work with them, you can create any effect you want with either the speedbar or the whole header.

If this doesn't create the desired effect, let me know.

Paul Dodman
e-business consultant
Lumino Internet
luminointernet.com

[mfcopier]

Paul you have been very helpfull

Just one more thing it might sound thick but where do you change the background and is it possible to replace the background with an image you know like a button

Garry

[pauldodman]

Sure,

you can do anything you want with the style and layout.

Although the image is set as a background, it is still a graphic.
So if you want to change it, design a new one and upload it to the images directory. This is skin/images. (have you got ftp access?)

(You will notice that the images directory is coded as {$ImagesDir}
Never change this, as you will get security errors/warnings when customers move into the secure area of your site.)

One way to do this may be to download all the images in question so that you can see their sizes and rework them. I would think you need to do a bit more than this though and rebuild the table to fit your new graphics. The original tab is made up of a number of graphics, these being tab_l.gif, tab_r.gif etc.

You can of course create a new button, but if you include the label on the button image, you will lose the functionality that we discussed earlier. You will then in effect hard code the speedbar, no bad thing if it isnБ─≥t going to change.

I am suspecting you will need more help with the table layout, so let me know if this sets you off in the right direction. I cannot understand though why on earth you would want to change the original buttons Б─⌠ they are most delightful!!!!!!!!

Paul Dodman
e-business consultant
Lumino Internet
luminointernet.com

[mfcopier]

Sorry Paul

Which is the gif that gives it that grey beautifull background l have background gifs to change the texture but which one is it to be named also if you have a look at my site how do you get the link to sit in the middle??

Sorry to be a pain

Garry

[pauldodman]

It is difficult to say without full access, but it doesn't appear to be a graphic or coded into your template. That means it is possibly in your css file. That would be the next place to look. There may be a style called TAB.

Let me know if that helps, or baffles you even more!

Paul Dodman
e-business consultant
Lumino Internet
[url]luminointernet.co.uk[/url]

[mfcopier]

Paul thanks for your help

You are correct the TAB colour is in the css file just replaced that with a gif

Adjusted the tab.tpl and now at least it looks a bit better

Replaced this html in the customer/tab.tpl if anybody might be interested

I need more practice at this

<TABLE border="0" cellpadding="0" cellspacing="0">
<TD height="1">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TR>
<TD width="75" height="30" class="Tab" align="center">{$tab_title}</TD>
</TR>
<TR>
<TD width="1" height="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD height="1">[img]{$ImagesDir}/spacer.gif[/img]</TD>
<TD width="1" height="9">[img]{$ImagesDir}/spacer.gif[/img]</TD>
</TR>
</TABLE>