Little hack on Related Products

[Anik]

Hello,

In vm 2 related products displays vertically, it is good.
but one problem there is that there is only one product at one line. is there anyway to show them beside and then after in a newline without breaking the layout?

Thanks.

[maxispin]

If you are talking about category layout, yes you can have several items on the same row. Changes are made from backend category settings.

[Anik]

No no, i mean this..


http://www.gangoos.com/Anik/Anik-Halder-s-Photos/Photos#photoid=1845

this should look like this..


http://www.gangoos.com/Anik/Anik-Halder-s-Photos/Photos#photoid=1848

Multiple product in one line according to match the layout..
I think now you understand..

(In The first picture i changed the layout manually because by default it looks devastating )


Mod edit:  bump message removed.  Look at http://forum.virtuemart.net/index.php?board=66.0

[ahaaaa]

This appears to be CSS ommision, look for the line:-

.product-field-type-B,.product-field-type-S,.product-field-type-I,

and add:-

.product-field-type-R

it works for me.

[Anik]

Hello,

Thanks for your reply, but can you tellme where should i add this?
In css or in html?

Thanks.

[Anik]

In /components/com_virtuemart/assets/css/vmsite-ltr.css i got some line

Code Select Expand

/* Manufacturer View Default */
.manufacturer-view-default .row .manufacturer .spacer {padding: 6px;}
.product-field-display a img{display: block;}
.product-related-products, .product-related-categories{border-top:solid #ccc 1px;padding-bottom: 10px;}
.product-fields .product-field-type-P{clear: both; border-bottom: 1px solid #EEEEEE; margin-top: 18px;}
.product-field-type-P .product-fields-title{ font-size: 120%;}
.product-field-type-B,.product-field-type-S,.product-field-type-I{padding-left:3%;float:left;width:30%}
.product-fields-title{ font-weight: bold;}

Should i add there?

but after adding it there it doesn't changed anything.

[ahaaaa]

Hi,

changing the CSS to add ".product-field-type-R" works for me. apologies for any confusion.

Replace

.product-field-type-B,.product-field-type-S,.product-field-type-I{padding-left:3%;float:left;width:30%}

with

.product-field-type-B,.product-field-type-S,.product-field-type-I, .product-field-type-R {padding-left:3%;float:left;width:30%}

[Anik]

Hello,

Sorry for not updating in the forum but yes, i did the same and it worked for me. I changed  the css little bit to give it a nice look.
In some odd cases the theme is breaking but in most of the situation it's working fine.

Thank you again.

[frd4ever]

Hi,

Where is the solution for 2.0.6?

Thanks!

[frd4ever]

Please help me...

Thanks!

[frd4ever]

not a good look...



how to show them at one line & have show "next" botton ?

Thanks

[LuukDriessen]

I have changed the css file succesfully. The products are now showing horizontally.

But I want to align the productnames in the middle.

I tried some things but I can't get the text aligned in the middle.

[r_ekkie]

Is it also possible to but this in the template css file instead of the VM css every update I have to doe this hack again.

[ahaaaa]

Is it also possible to but this in the template css file instead of the VM css every update I have to doe this hack again.

Yes it is, find the "custom.css" file in your Joomla template folder and add your CSS changes there.

Or read here http://docs.virtuemart.net/tutorials/33-templating-layouts/106-override-vmsite-ltr-css.html