News:

Looking for documentation? Take a look on our wiki

Main Menu

Customise product list layout like this?

Started by shakir, November 10, 2011, 14:01:01 PM

Previous topic - Next topic

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.


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