Adding a Horizontal Line to separate featured products on the home page

[gbola]

Hello,

 

When using featured products on the home page, you have four products displayed per row. 

 

I would like to use an horizontal line to separate each row.

 

Pls how can i achieve this.

 

I have attached a screenshot for clarity.

[Er.Ritesh]

hello gbola,  can you share you website url.

[vekia]

hello

 

you've got there several modules? or just one?

 

basically, add <hr> after heading (i don't know what heading type you use there, probably <h2>)

- it mean: modify module template files (.tpl) search for <h> tag and below add <hr> then you can stylize this line with css styles.

[gbola]

Hello,

 

@ Er.Ritesh The website url is www.valuplus.com.ng.

 

We are still developing the site. Am using The featured products module that came with prestashop by default.

 

@vekia, I didnt really get that explanation. I have just the featured products module.

Edited December 6, 2013 by gbola (see edit history)

[Er.Ritesh]

Hi, gbola

 First  change css on this location:

http://www.valuplus.com.ng/modules/homefeatured/homefeatured.css

#featured-products_block_center li {

    height: 240px;

    margin-right: 10px;

    padding: 10px 0;

    width: 126px;

}

 

replace this  css

 

#featured-products_block_center li {

    margin-right: 10px;

    padding: 10px 0;

    width: 126px;

}

 Then  using jquery insert :

$( "<li><hr/></li>" ).insertAfter( ".last_item_of_line" );

Edited December 6, 2013 by Er.Ritesh (see edit history)

[vekia]

you're looking for something like:

 

?

[gbola]

@Vekia exactly what i want. you got it right. am using version 1.5.6.1

[vekia]

you can achieve it with simple css modification:

 

use this code:

#featured-products_block_center li {
margin-right: 10px;
padding: 10px 0;
width: 126px;
height: 240px;
border-bottom: 1px solid #000;
margin: 0px;
padding: 3px;
padding-bottom: 20px;
padding-top: 10px;
}

in homefeatured.css 

 

use code above instead of:
 

#featured-products_block_center li {
margin-right: 10px;
padding: 10px 0;
width: 126px;
height: 240px;

[gbola]

@Vekia Thanks a lot. I tried the code and it worked like magic.

 

Thank you so much.

[gbola]

@Vekia Thanks a lot. I tried the code and it worked like magic.

 

Thank you so much.