Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

XC5 Homepage layout

 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #31  
Old 10-14-2014, 05:41 AM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: 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.
__________________
Found a bug in X-Cart? Post it to our bug tracker!
Know how to make X-Cart better? Suggest an idea!
Reply With Quote

The following user thanks tony_sologubov for this useful post:
RichieRich (10-14-2014)
  #32  
Old 10-14-2014, 06:34 AM
  RichieRich's Avatar 
RichieRich RichieRich is offline
 

X-Adept
  
Join Date: Sep 2004
Location: London, England
Posts: 750
 

Default Re: XC5 Homepage layout

This css is best if you specify for a larger screen size only. Smaller screen sizes will cause a problem in the display if you have the side column or in other screen sizes.

To fix the display issues, you can specify only if the screen size is the largest wrapping the css with 4 columns with ;

Code:
@media only screen and (min-width: 1200px) { }
__________________
Richard


Ultimate 5.4 testing
Reply With Quote

The following 2 users thank RichieRich for this useful post:
tony_sologubov (10-14-2014), totaltec (10-14-2014)
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 12:00 AM.

   

 
X-Cart forums © 2001-2020