Sign In
1
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
