Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

How To: Add Icons to Product Tabs Rate Topic   - - - - -

 
  • besjon
  • Junior Member
  • Members
  • Join Date: 08-Jun 08
  • 17 posts

Posted 24 March 2009 - 04:34 PM #1

This modification will allow you to add icons to both the built-in tabs such as "Description" and those generated by Listmania as well as tabs from the Product Tabs mod.

Sample:
Posted Image

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
v1.3.5-sp3

 
  • CSCartSkins
  • Senior Member
  • Members
  • Join Date: 07-Jan 09
  • 195 posts

Posted 24 March 2009 - 08:59 PM #2

Nice work besjon!

That will really help spice up that "blah" area down there.

Glad to see things coming along. ;)

 
  • Struck
  • Teetering on Genious
  • Members
  • Join Date: 07-Mar 09
  • 2502 posts

Posted 25 March 2009 - 07:27 PM #3

Very nice extra touch!
Cooking with Gas on Version 4.1.2 (But proceeding with caution....)

 
  • miracles
  • Senior Member
  • Members
  • Join Date: 19-Sep 07
  • 1533 posts

Posted 25 July 2009 - 07:07 AM #4

How this will works on new version ?
CS-CART 3.0.6 GRENADE

Please vote for CDN Add-on

For SEO Article Submission, Forum Profile Links, Web 2.0 links, contact me through PM.