Home featured: how to change from 4 to 3 columns?

[target_locked]

Hi there,
The Presta's default theme use 4 columns to list the product.(home featured page)
Now I want to change to 3 columns so that each column become wider.
How to do that?
Thanks.

[Ardian Yuli Setyanto]

you can edit these line

{assign var='nbItemsPerLine' value=4}

in file

../modules/homefeatured/homefeatured.tpl

[target_locked]

you can edit these line
{assign var='nbItemsPerLine' value=4}
in file
../modules/homefeatured/homefeatured.tpl

When I changed value=4 to value=3
The are only 3 columns.
However, the col 1 & 2 remain unchanged, only the 3th column become wider (a merged of col 3 & 4), it look like the col 4 is there but there is nothing inside.

How to make all 3 cols equal? and the content are center aligned?

Thanks.

[Ardian Yuli Setyanto]

please include the screenshot

[target_locked]

attached screen-shot:

[Ardian Yuli Setyanto]

you have to edit the width of center_column

[Dave Egerton]

also, why not just go to modules>>configure and change display to three, rather than editing templates to do this?

That is an option on the Module. But yes, if you have less than 4 you need to do need to re-style, if you don't use it already, install firebug for Firefox, it will help you a lot

[target_locked]

also, why not just go to modules>>configure and change display to three, rather than editing templates to do this?

Is it in the back-office?
Could you tell me what the module name is?
Thanks.

[Ardian Yuli Setyanto]

Homefeatured module, But this module configure menu is to change the total number of product displayed in home, not the number of product per line.

[GOT_2009]

Anyone know who to change the number of lines for the name of the product ? I think it's set for 2 but i couldn't find where to change it.

Thanks

[Ardian Yuli Setyanto]

hai guy, i have reply your PM. you can edit

{assign var='nbItemsPerLine' value=4}

in file

/media/disk/abdulaziz/public_html/prestashop/modules/homefeatured/homefeatured.tpl

good luck

[vietnam]

And if i want to change from one product per column to 3 products per column on the products page, how can i make this ?

[need4speed]

I know what you mean.

Just copy the code from the file product-list.tpl to homefeatured.tpl that solved my problem.

Or maybe you can use this piece of code:

<!-- MODULE Home Featured Products -->
{if isset($products)}
   <!-- Products list -->


{l s='Featured products' mod='homefeatured'}



getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}


               {if $product.on_sale}
{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product.reduction_from))}
{l s='Price lowered!'}
               {/if}
               {if !$priceDisplay || $priceDisplay == 2}{convertPrice price=$product.price}{if $priceDisplay == 2} {l s='+Tx'}{/if}{/if}
               {if $priceDisplay}{convertPrice price=$product.price_tax_exc}{if $priceDisplay == 2} {l s='-Tx'}{/if}{/if}









   <!-- /Products list -->
{/if}
<!-- /MODULE Home Featured Products -->

[burkass]

and for resize your column block, you can edit it in global.css

[dixie]

I changed my featured products columns from 4 to 3 evenly spaced columns in my global.css file. I don't know code, so I try to keep my editing very simple.

Around Line 975: I changed the middle padding to 22px. If your images are bigger, you may need to change it to 20px or less.

padding: 0 22px 1px;

I use Firebug add-on for Firefox to show me what code to edit. Hope this helps.

[siddhc]

Aim : To change 4 products per line to 3 products per line in featured products.
MyConfig : Using WAMP and default prestashop theme

Well following from above replies and spending hours, I realized that the solution is in 2 steps :

1. Open C:\wamp\www\themes\prestashop\css\global.css. Search for

#center_column .products_block ul li

and change the width parameter from

width: 133px;

to

width: 178px;

.


Why 178 ? Because 133 x 4 / 3 = 178.
Now save global.css and refresh the home page. Job is done but images are still "left" aligned. To fix this, go to step 2.


2. Open C:\wamp\www\modules\homefeatured\homefeatured.tpl. As Ardian has mentioned above, change

{assign var='nbItemsPerLine' value=4}

to

{assign var='nbItemsPerLine' value=3}

and also change

width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}

to

width="{$homeSize.width}" style="margin-left: 24.5px;" alt="{$product.name|escape:html:'UTF-8'}

Why 24.5 ? Because (178 - 129) / 2 = 24.5, where 129 = width of image and 178 = width of column from Step 1.


Hope the above explanation renders the topic [sOLVED] ;-) Do let me have your comments.

[Rabbitdigital Design]

Hi, I also wanted to changed the home page featured products from 4 to 3 columns.

I changed the homefeatured.tpl as suggested and it didn't affect anything, I even cleared all the code out of the file, uploaded it and nothing changed at all!
I'm new to Prestshop and I'm finding it quite a strange piece of software, very good but also very weird.

[KambinatoR]

Thank you so much! Where did you get that formulas?

[need4speed]

Which version are you using ? Its a old topic so I guess your now using 1.4.x ?

[Anlee]

Aim : To change 4 products per line to 3 products per line in featured products.

MyConfig : Using WAMP and default prestashop theme

 

Well following from above replies and spending hours, I realized that the solution is in 2 steps :

 

1. Open C:\wamp\www\themes\prestashop\css\global.css. Search for

#center_column .products_block ul li

and change the width parameter from

width: 133px;

to

width: 178px;

.

 

 

Why 178 ? Because 133 x 4 / 3 = 178.

Now save global.css and refresh the home page. Job is done but images are still "left" aligned. To fix this, go to step 2.

 

 

2. Open C:\wamp\www\modules\homefeatured\homefeatured.tpl. As Ardian has mentioned above, change

{assign var='nbItemsPerLine' value=4}

to

{assign var='nbItemsPerLine' value=3}

and also change

width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}

to

width="{$homeSize.width}" style="margin-left: 24.5px;" alt="{$product.name|escape:html:'UTF-8'}

 

 

Why 24.5 ? Because (178 - 129) / 2 = 24.5, where 129 = width of image and 178 = width of column from Step 1.

 

 

Hope the above explanation renders the topic [sOLVED] ;-) Do let me have your comments.

 

 

Hi!!! I would like to ask, how about adding an item per line.. The default item per line is four, right? I want to make it 5. Can you please help me.

[koca]

Hello friends, how can I show my product list as attached?
I am using version 1.7 and above. Master friends, can you help?

[Yelish]

Hello, how are you? In order to assist you, I need to know the link to your store, your exact PrestaShop version, and I will let you know if it's possible. Best regards, and have a great day.

[koca]

Hello, thank you very much for your answer, I am currently working on localhost. I am using the Classic theme and my version is 8.0.1.

[Yelish]

Hello, I would need to see what you currently have. If it's not very close to what you want, you may need a module. Otherwise, I can advise you if you're not satisfied with the store's presentation, etc.

[koca]

Thank you again for your answer, I want to solve it without using a module, I will research a little more, I wish you a happy day.

[Yelish]

Thank you, welcome to the community.