[SOLVED] How to change design of new products block on homepage?

[prestaslo]

Hi, 

 

I just changed products view like on guide on this link: http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

 

Now I would like to change also new products block design on homepage to this...

 

Can anyone please tell me how to do this? 

 

Best regards 

[vekia]

have you tried to use code mentioned in tutorial also for new products block?

 

 

you have to copy whole <li> </li> code

+ <script> to overlay effect

and change css styles (each instace from #product_list change to #featured-products_block_center)

 

effect

[prestaslo]

Thanks for answer! 

 

I changed and copy css file, but there is still not the same effect...

 

Do I must also copy tpl file? 

 

Best regards 

[prestaslo]

Can you please attach file to copy here?  

[vekia]

sure wait a second im going to prepare it full code here.

[prestaslo]

sure wait a second im going to prepare it full code here.

 

Thanks! 

[vekia]

ok i've got it.

 

homenewproducts.tpl file: http://pastebin.com/s3NcH9Yx

homenewproducts.css file: http://pastebin.com/Y2Wj2h6u

 

 

effect:

 

 

you can use the same code in homefeatured module

[prestaslo]

It works perfect! 

 

Thanks! 

[vekia]

you're welcome im glad that i could help you a little in this case

topic marked as [solved]

 

with regards,

Milos

[prestaslo]

How can I set space between boxes?

 

 

[vekia]

add margin-right:10px; to:

#featured-products_block_center li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:150px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

[prestaslo]

 

add margin-right:10px; to:

#featured-products_block_center li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:150px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

 

Thanks for answer. 

 

I add this to homenewproducts.css as you said, but nothings change...

[vekia]

hello

 

can you share url to your website once again? i don't remember it

[prestaslo]

Yes, sure...

 

www.pingubuy.com 

[vekia]

hello add this code to the

#featured-products_block_center li {
text-align: center;
margin-bottom: 14px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 10px;
width: 150px;
display: inline-block;
vertical-align: top;
margin: 2px;
position: relative;
}

http://pingubuy.com/modules/homefeatured2/css/homefeatured15.css

[prestaslo]

hello add this code to the

#featured-products_block_center li {
text-align: center;
margin-bottom: 14px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 10px;
width: 150px;
display: inline-block;
vertical-align: top;
margin: 2px;
position: relative;
}

http://pingubuy.com/modules/homefeatured2/css/homefeatured15.css

 

Thanks!