dream genie
 
CMS and Website Builder
contact us
 
+44 (0)1392 202078
 
 
You are here: Home > Blog > Re-style the shop to use horizontal rows   Go Back

Re-style the shop to use horizontal rows

Posted: Friday, 10th December, 2010 at 7:43 AM | By: Administrator
Dec
10
 

Overview

This article details one way in which two of the screens from the Dreamgenie online shop could be re-styled.

The Product Category and Product Items list screens by default are presented using DIVS of fixed height and width floated left against one another.

If we want to re-style them so that each Category or Product takes a full width row, one on top of the other heres one possible way of achieving this.


1 .divQuantityContainer .accomlistgrid { 
2 width:99%!important; 
3 height:auto !important; 
4 /* background here if required */ 
5 margin:5px auto auto 0px !important; 
6 background:none repeat scroll 0 0 #EBF4FA; 
7
8  
9 .divQuantityContainer .grdProductListInner{height:auto !important;} 
10  
11 .divQuantityContainer .grdImageContainer { 
12 float:left !important; 
13 margin-right:8px; 
14
15  
16 .pl_breakA{clear:none  !important;} 
17 .pl_breakB{clear:none !important;} 
18 .pl_breakC{clear:none !important;} 
19  
20 .divQuantityContainer .divQuantity 
21
22 clear:left !important; 
23 float:left !important; 
24 margin-top:0 !important; 
25 width:100px !important; 
26
27  
28 .divQuantityContainer .divtocart 
29
30 clear:none !important; 
31 float:left; 
32 margin-top:0 !important; 
33 text-align:center; 
34 width:100px !important; 
35
36  
37 .divQuantityContainer .grdTextContainer{width:auto !important;} 
38  
39 .divQuantityContainer .grdProductListInner .accomlistgrid_titlediv { 
40 text-align:left; 
41 padding-left:6px; 



Ok, lets take a closer look at the CSS



 


Visit the blog archive »

You are welcome to post a comment


To Verify You are Human!
Please enter the code above:

Previous Comments

None