X-Cart forums

[Hugo]

Originally Posted by Jon

To limit overhead, I wouldn't do the css and javascript include on every page, instead use this code:

{if $main eq "product"}
<link rel="stylesheet" href="{$SkinDir}/tabber.css" TYPE="text/css" MEDIA="screen">
<script type="text/javascript" src="{$SkinDir}/tabber-minimized.js"></script>
{/if}

I'm not sure what I have to change in the original script. What exactly does your mod of Moondogs code do?

[Jon]

The tabber.css and tabber-minimized.js loads code. Any coded loaded to your pages makes the page take longer to load. To reduce page load times, it's best to load code only when it's needed. In this case, the mod only applies to the product pages, so the code change I implemented only loads the code on product pages.

[MoonDog]

Thanks for the tip Jon.

To reduce page load, I've modified my home.tpl code now too.

Hugo, glad to see you got it working.

- MoonDog -

[MoonDog]

O.K., one last thing.

If your full description requires a large amount of text, then you can also add a scrollbar to limit the height of the tab. You can set the height of one or any number of tabs. Here's how to do this.

First, open your /customer/main/product.tpl file and locate the code for the tab that you want to add a scrollbar to and add an id name.

For instance, I need to limit the height of the 'Full Description' tab and place a scrollbar there. So I need to find the following code below and add id="description" to it. I can give it any id name I want, but to make it simple I called the id "description". So the code will look like this:

 
<div class="tabbertab" id="description">
<h2>Full Description</h2>
{include file="customer/main/full_description.tpl" }
</div>

I've highlighted in red the code that I added.

Now open the skin1/tabber.css file and add the following code to the end of the file:

 
.tabbertab#description {
 height:300px;
 overflow:auto;
}

You can set the height to any number you want. And if the amount of text exceeds that height, then it automatically places a scrollbar on the tab.

And that's all there's to it.

By the way, you can also put icons on your tabs.
Unfortunately, I haven't figured out yet how to put a different icon on each tab. But if you want the same icon placed on each tab, here's how you can do that:

Open your skin1/tabber.css and find this code:

 
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

and replace it with this:

ul.tabbernav li a
{
 padding: 3px 1.3em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE url(images/star_4.gif) no-repeat fixed left;
 text-decoration: none;
}

And find:

ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

Replace with this:

ul.tabbernav li a:hover
{
color: #000;
background: #AAE url(images/star_2.gif) no-repeat fixed left;
border-color: #227;
}

And finally, find this:

ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
border-bottom: 1px solid white;
}

And replace with this:

 
ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white url(images/star_4.gif) no-repeat fixed left;
 border-bottom: 1px solid white;
}

Well, that should be it. Have fun.

- MoonDog -

[mffowler]

MoonDog,

One way to get different icons on the tabs is to add additonal classes for the ones with different icons. Then use smarty if statements in the class call of the DIV class.

Example: <DIV class="{if $active_modules.Upselling_Products ne ""}TabberUpselling{else}TabberNormal{/if}">

I am sure there are other ways, but that's just one way to be smarty....

- Mike

[RobinBraves]

I can't seem to get this to show up correctly (http://sentimentalist.net/store). I have followed the install instructions to the tee *i think*. Is it because of the skin I am using?

[vivienne]

Hi there

Wonder if anyone can help - for me this works in firefox but not in ie (the page hangs on V6.0.29)

trial site
http://d776516.i86.quadrahosting.com.au/product.php?productid=18350&cat=276&page=1

thanks so much - seems a great mod.

Vivienne

[vivienne]

Hi there

Wonder if anyone can help - for me this works in firefox but not in ie (the page hangs on V6.0.29)

trial site
http://d776516.i86.quadrahosting.com.au/product.php?productid=18350&cat=276&page=1

thanks so much - seems a great mod.

Vivienne

[MoonDog]

Hi vivienne,

I think that you might have made a mistake in correctly installing this mod. I noticed that on your web page that the content is not surrounded by the tabber frame. If you look at the left thumbnail of post #6, you can see that there is a frame from the tabs surrounding the content. On your website there is no tab frame around your content, it just barely hangs right below the tabs.
By the way, that screenshot was made from V6.0.29 of Internet Explorer and it works OK in that version.
Try re-installing this mod and let me know if you have any problems.

- MoonDog -

[vivienne]

Hi Moondog

I tried to just copy in the files you uploaded and then also to try reinstalling myself. Now I am sure that I am doing something stupid but can't for the life of me figure out what. I wonder if you could tell me which file you would think would be the problem for it to hang on the detailed product page? Then maybe I can double check that one by getting the original x-cart one and remaking that mod. I expect its product.tpl?

Also I just wanted to say I have actioned quite a lot of your posts on here and in a day my site has really moved on. I previously set up using an old version but this 4.1.8 plus the css mods have made it a nicer experience. I especially like the rounded corner css thing - appreciate it.

Vivienne