Jump to content

Products - setting to Grid View

businesswoman
 Share

Recommended Posts

  • 3 weeks later...
ejectcore Newbie

ejectcore

Posted
Posted

It's all in the CSS & a few tweaks for the theme ;-)

first here is an example of a site developed using 2 columns
http://www.meremobiles.co.uk/5-mobile-phones

Just to explain the example below by using "float: left" in the product_list li class this is the key for displaying a grid view.
currently there is no width set in your css, so for example if your center section was 620px width this would display 3 columns & allow spacing between each, however you may want more than 3 columns, in this case change the value below to multiply by 4 which would then in this case be 150px.

Please note if your product's are displayed in this type of arrangement there won't always be room for description's.
so this would need to be removed from product-list.tpl. 

/* product-list.tpl */
ul#product_list{ list-style-type:none; }
ul#product_list li {
float: left;
padding: 0px;
width:200px;
height:160px;
margin-bottom:1em;
}

Link to comment
Share on other sites
  • 3 weeks later...
jtyana Newbie

jtyana

Posted
Posted

Thank-you amwdesign
I got your solution working

I also want to say thank-you for all the time you donate to this forum
I've noticed you're in here alot helping. Much appreciated.

Merci beaucoup. (I'm also learning French while I learn Prestashop) :coolsmile:

Link to comment
Share on other sites
  • 1 month later...
Melinda Newbie

Melinda

Posted
Posted

Hi,

I got it working with these values. Ignore the borders ... this was only so I could see where they were.

/* product-list.tpl */
ul#product_list{
margin-top:2em;
list-style-type:none;
border: 1px solid #CC0000;
/* display: block; */
overflow: hidden;
}

/* adds or removes the bg image and border around the entire product listing block */
ul#product_list li {
float: left;
padding: 0px;
width:184px;
margin-bottom:1em;
border: 1px solid #33FFCC;
}

It works in safari 3, mozilla, opera, and netscape. I have no way to test it in IE but it will probably work.
  • Like 3
Link to comment
Share on other sites
  • 4 weeks later...
  • 3 months later...
  • 4 weeks later...
port23user Newbie

port23user

Posted
Posted
Hi, i've been looking thru all over my css files, but i cannot figure out where to find what's you guys been posting.
Is it because I'm using the new release?

No, this still works in the latest release. You need to modify the /themes/yourthemename/css/global.css to match (or have variants of) the aforementioned code.

AMWdesign, thanks for the code. I just implemented it and it works great. I just need to change the items-per-page dropdown now since I have 3 products per row. Too bad there isn't an option in PrestaShop to do this automatically. I think it'd be a pretty nice feature.
Link to comment
Share on other sites
  • 2 months later...
  • 2 weeks later...
vietnam Newbie

vietnam

Posted
Posted

At me site looks like this : What can o do ? http://mobila-online.biz/58-diverse-accesorii-bucatarie?n=50&id_category=58

Nevermind, i have fixed the CSS 

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; float:left; width:556px;}
ul#product_list li {
   background: #F1F2F4;
   border: solid 1px #d0d3d8;
 width:266px;
   margin-bottom:0.3em;
   margin-left:5px;
   float:left;
   height:250px;
}
ul#product_list li a {
   text-decoration:none;
   color:#374853;
}
ul#product_list a.product_img_link{
   border: solid 1px #d0d3d8;
   float:left;
   margin-right:0.6em;
}
ul#product_list li h3{ margin:0.4em 0; color:#488c40; }
ul#product_list li h3 a { color:#C33102; }
ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:1px solid #488C40;
   color:white;
   font-size:0.6em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:uppercase;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
   float:left;
   width:90%;
   clear:both;
   height:200px;
}
ul#product_list li div.right_block{
 width:250px;
   text-align:center;
   margin-left:1em;
}


.bubu {

padding-left:60px;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   font-size: 130%;
   margin-bottom: 0.2em;
   background:none;
   font-weight:bold;
}
ul#product_list li span.availability{
   color:#488c40;
   font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; float:left; margin-left:5px;}

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
  • 1 month later...
  • 3 months later...
  • 1 month later...
  • 6 months later...
  • 9 months later...
crash121 Newbie

crash121

Posted
Posted

WOW Thanks very much I have been trying to figure this one out for ages. The code works perfect on pretsashop 1.3 final version.


Presta shop Please integrate this in to the admin options for both versions I agree it looks more professional to look at.

Thanks again to all those who helped with this.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...