Removing Speedbar tabs for Just plain links
 

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

Home | Etc | Etc |

Pleasssss !!

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

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

text links
 

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

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

SPEED BAR
 

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

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

Speed Bar
 

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

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]

Speed Bar
 

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>

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:


In the customer/tab.tpl, it is just the basic code, but references the CSS style:


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:

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