Sample:

Open the skins/<YOUR_SKIN>/customer/buttons/tab.tpl file
Immediately before:
{$tab_text}</div>
Insert the following code:
<div class="tab_icon" id="{assign var=icon_name value=$tab_text}{php}echo 'tab_icon_' . strtolower(preg_replace('/[^a-zA-Z0-9]+/', '_', $this->get_template_vars('icon_name')));{/php}"></div>
This will allow you to address a new placeholder DIV in each tab via Cascading Style Sheets based on the name of the tab. The CSS addressable ID is created by prepending "tab_icon_", replacing all non-alpha numeric characters with the underscore, and converting all alphabetic characters to lowercase. For example, a tab called "Colors & Designs" will be given the id of "tab_icon_colors_designs".
You can specify an icon for this tab by adding the following at the bottom of skins/<YOUR_SKIN>/customer/styles.css (assuming you have a 18 pixel wide by 16 pixel tall icon called tab_Colors_and_Designs.gif in your skins/<YOUR_SKIN>/customer/images folder)
.tab_icon { background: transparent no-repeat; border: none; float: left; height: 16px; width: 0; padding: 0; margin: 0; } #tab_icon_colors_designs { margin-right: 7px; width: 18px; background-image: url(images/tab_Colors_and_Designs.gif); }
If you want the icon to look different if the tab is selected, then you need two different icons - one for the active state and one for the inactive state. Then, instead of the above modifications, you would add the following to skins/<YOUR_SKIN>/customer/styles.css:
.tab_icon { background: transparent no-repeat; border: none; float: left; height: 16px; width: 0; padding: 0; margin: 0; } .section-inactive-tab-bg #tab_icon_colors_designs { margin-right: 7px; width: 18px; background-image: url(images/tab_Colors_and_Designs_inactive.gif); } .section-active-tab-bg #tab_icon_colors_designs { margin-right: 7px; width: 18px; background-image: url(images/tab_Colors_and_Designs_active.gif); }
This modification should work on most versions and installations but was developed and tested specifically on:
* CS-Cart v1.3.5 SP4
* Product Tabs 1.0 SP4
* New Vision Blue theme
* Firefox 3.0.7 and Internet Explorer 7.0.6001 on Windows Vista
-)----- BJA