[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 -