X-Cart forums - XC5 Homepage layout

Hi guys!

Sorry, it took me so long to publish the code.

This change turned to be really easy one and in order to show 4 products on product lists, you need to specify the following CSS code in the System settings > Look and feel > Custom CSS section in you admin area:

Code:

ul.products-grid.grid-list li.product-cell.box-product {

width: 25%;

}



ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{

clear: none;

}

If you need to show 5 products then you need to replace this piece of code:

Code:

ul.products-grid.grid-list li.product-cell.box-product {

width: 25%;

}

with the next one:

Code:

ul.products-grid.grid-list li.product-cell.box-product {

width: 20%;

}

Obviously, you are just changing the percentage that must belong to the product's box width.

Other lines:

Code:

ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{

clear: none;

}

are needed for disabling hard-coded rules that each 4th, 7th and so on product must start with new line.

If there is any questions, please let me know.

Tony.