Different CSS for each feature on the Data Sheet

[webrise]

Hi all!

I work with Presta many years now and recently I joined this forum that I think it's great!

 

Recently, I needed to edit the features in the "Data Sheet" tab in the product page, in order to give to each feature its own style.

I searched in the forum and, even though I found useful info, I didn't found exactly what I needed.

(Prease excuse me if there actualy is a relative topic and I just missed it!!!)

 

So now that I managed to "reach my goal" and have exactly what I needed, I thought that would be nice to share it.

 

This code should be placed inside the product.tpl, where you want your features to be displayed (for me it's under the "Data Sheet" tab) for 1.5.6 Version.

 

Obviously, in order to not confuse you, I removed my personal CSS edits, #id, etc.

In order you to give to each feature its own style  just replace the "demo1", "demo2", etc. id with yours and edit accordingly the css sheet.

{foreach from=$features item=feature}
<p id="demo1">
{if $feature.id_feature == 1}
<span id="demo2">{$feature.name|escape:'htmlall':'UTF-8'} :</span><span id="demo3">{$feature.value|escape:'htmlall':'UTF-8'}</span>     
{/if}
</p>
<p id="demo1">
{if $feature.id_feature == 2}
<span id="demo2">{$feature.name|escape:'htmlall':'UTF-8'} :</span><span id="demo3">{$feature.value|escape:'htmlall':'UTF-8'}</span>     
{/if}
</p>
<p id="demo1">
{if $feature.id_feature == 3}
<span id="demo2">{$feature.name|escape:'htmlall':'UTF-8'} :</span><span id="demo3">{$feature.value|escape:'htmlall':'UTF-8'}</span>     
{/if}
</p>

{/foreach}

Here is how it looks with my edits:

http://prntscr.com/2i3qg8

 

I hope to find it useful!

 

PS: If by mistake I posted this in the wrong forum category, please move it to the right one.

Edited January 10, 2014 by webrise (see edit history)

[vekia]

it appears only under "product details" tab or just under whole "tab" section ?

[webrise]

it appears only under "product details" tab or just under whole "tab" section ?

 

In my case it appears only under "product details" tab, but I have to clarify that my "product details" tab is the actual "Data Sheed" tab renamed and divided to two separate inline divs.

The first div includes the features (meaning the code mentioned above edited/styled accordingly) and the second div includes custom html. But both divs are under ONLY the actual "data sheet" tab.

I hope that I explained it properly because the truth is that the entire design is a little complicated (obviously..!!!! ).

In few hours I will be done with the design and I will share the link of the page in order to be even more clear.

[webrise]

it appears only under "product details" tab or just under whole "tab" section ?

and here is the live link as I promised

http://dev.webrise.pw/with_feelings/index.php?id_product=2&controller=product#

[yay]

I was just looking for something like this. Thank you very much for sharing!