Product grid layout

[red8ii8]

Is there a way to display the products in a grid rather than as a list? Like this (one of the sites showcased as a live Presta shop):

http://www.smallable.com/35-stickers-et-decoration-murale

The list display makes sense for i-pods but not t-shirts

[swifty]

This would be dead handy if anyone has any ideas!!

[Static]

You should be able to control all that in the global.css

[swifty]

Coded is not something I'm good at, can anyone shed some light on this?

[red8ii8]

What he's saying is that there is no way to do this via admin, only css customizations. You don't need to know php or anything, but you will need to be able to work with a stylesheet.

In my case I would rather not use display:none to get rid of things so I'll still need to go in and comment some things out elsewhere. Having an admin option would be nice, or a more gutted blankish starter theme available.

I can post the correct code later...

[strandoo]

I'm brand spanking new to Prestashop, but it looks like you can do a lot by editing the global.css file in your current Theme folder. If you don't know anything about css, you should look into it. In the case of making a list into a grid, you need to look in the source of a page for the div that is the list item. Usually, if you alter the css so that item is narrow and 'floats' to the left, all of the list items will wrap up in to a grid. As an experiment, try this:

Open global.css for your theme. Search for 'ul#product_list li {' (not the quotes). This rule ends with 'margin-bottom...' but if you add an additional 5 lines (from 'float: left' to 'clear: none;') then save the css file, go back to your browser and refresh the page and you should see a grid layout (sort of; it might be ugly!)

ul#product_list li {
background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
border: solid 1px #d0d3d8;
padding: 6px;
height:130px;
clear:both;
margin-bottom:0.3em;
float: left;
width: 45%;
height: auto;
margin-right: 10px;
clear: none;
}

Please note that this is just to demonstrate. To be tidy, you would remove the earlier height and clear attributes and you'd probably have a lot more work to do because a change like this would have a knock-on effect. But hopefully you'll get the right idea.

[Ardian Yuli Setyanto]

hay everyone, i have try to develop new themes which like smallable.com . but i need response to this design before i take more step. please review my screen shot in
http://statics.ilmoe.com/themes/prestashop/smallable_beta.png

thanks in advance.