Customise product list layout like this?

[shakir]

Hi all.

Could someone please steer me in the right direction to edit the products list within a category so it looks more like the attached image.

Ideally I need to make the products listings display 4 across. (I have a template that is 1000px wide but even when I tell VM2 to display 4 products wide, its only displaying 3.
I guess because the text etc is taking up too much room. *VERY much like this : http://www.asos.com/Women/Dresses/Cat/pgecategory.aspx?cid=8799

Also, does anyone know if the dynamic thumbnail resize option is supposed to be working in the latest RC or is it still not working?
Doesn't change thumbnail sizes on mine so was wondering if something is wrong or its just not implemented yet.

Thanks


[attachment cleanup by admin]

[PRO]

you have to change EACH category to say 4. IF the categories were created WHEN the configuration still said 3.

DELETE, all images in the resize folder. THEN, when a page is requested, the new sizes will be created.

[shakir]

Good tip, worked!

As for re-positioning the layout of the products list like in above image.
Should this be done via the css or php file?

Thanks.

[shakir]

I spoke too soon... products per row worked great but the resize didnt work.
I deleted all images from folder.
Resized them in config.
Refreshed the page and yes it did recreate them in the folder but the display size in front end didnt change at all.

[PRO]

http://forum.virtuemart.net/index.php?topic=90935.0
http://forum.virtuemart.net/index.php?topic=92756.0

php 1st. Then, css

[shakir]

It seems like something scales down the thumbnail sizes each time you add one more to default number displayed per row.
When I make it 3 across, the images are bigger, 2 bigger still. at 4 across they are very small. Even though I have resized them globally to be larger.

[PRO]

because the css applied is making it scale.

YOU have to change the template to fit your needs,

[shakir]

Success!
http://deliciousdesign.com.au/test/index.php?option=com_virtuemart&view=category&virtuemart_category_id=1&Itemid=20
*Just my test site.
Looks close to how I want it.
Although I'm not 100% sure if my method for doing this is good or not.

I edited the css.
line 125:         .floatright,span.floatright{float:right;}     to       .floatright,span.floatright{}
and line 127 I COMPLETELY REMOVED this:   .width30{width:30%;}
I hope this doesn't come back to bite me!

Now is there a way to save this as some type of css over-ride so when I update next RC it wont undo?

Thanks

[PRO]

copy the css file. Place it in your template folder. Then disable virtuemart css. THEN, add it to your template