VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: Anik on March 05, 2012, 08:36:50 AM

Title: Little hack on Related Products
Post by: Anik on March 05, 2012, 08:36:50 AM
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.
Title: Re: Little hack on Related Products
Post by: maxispin on March 05, 2012, 10:31:46 AM
If you are talking about category layout, yes you can have several items on the same row. Changes are made from backend category settings.
Title: Re: Little hack on Related Products
Post by: Anik on March 05, 2012, 11:08:01 AM
No no, i mean this..

(http://www.gangoos.com/images/originalphotos/63/3/c8801dea3e47dabb3a5ddd20.png)
http://www.gangoos.com/Anik/Anik-Halder-s-Photos/Photos#photoid=1845 (http://www.gangoos.com/Anik/Anik-Halder-s-Photos/Photos#photoid=1845)

this should look like this..

(http://www.gangoos.com/images/originalphotos/63/3/e483b07a8c3c24ca588f180c.png)
http://www.gangoos.com/Anik/Anik-Halder-s-Photos/Photos#photoid=1848 (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
Title: Re: Little hack on Related Products
Post by: ahaaaa on March 13, 2012, 20:36:45 PM
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.
Title: Re: Little hack on Related Products
Post by: Anik on March 14, 2012, 06:01:24 AM
Hello,

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

Thanks.
Title: Re: Little hack on Related Products
Post by: Anik on March 14, 2012, 06:46:43 AM
In /components/com_virtuemart/assets/css/vmsite-ltr.css i got some line

/* 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.
Title: Re: Little hack on Related Products
Post by: ahaaaa on March 14, 2012, 11:36:23 AM
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%}

Title: Re: Little hack on Related Products
Post by: Anik on March 15, 2012, 05:18:19 AM
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.
Title: Re: Little hack on Related Products
Post by: frd4ever on November 15, 2012, 04:14:41 AM
Hi,

Where is the solution for 2.0.6?

Thanks!
Title: Re: Little hack on Related Products
Post by: frd4ever on November 19, 2012, 05:54:49 AM
Please help me...

Thanks!
Title: Re: Little hack on Related Products
Post by: frd4ever on November 19, 2012, 06:13:26 AM
not a good look...

(http://phudinh.com.vn/hinh-anh/related-product.png)

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

Thanks
Title: Re: Little hack on Related Products
Post by: LuukDriessen on March 12, 2013, 15:52:15 PM
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.

Title: Re: Little hack on Related Products
Post by: r_ekkie on May 28, 2013, 10:22:06 AM
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.
Title: Re: Little hack on Related Products
Post by: ahaaaa on June 21, 2013, 15:42:23 PM
Quote from: r_ekkie on May 28, 2013, 10:22:06 AM
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 (http://docs.virtuemart.net/tutorials/33-templating-layouts/106-override-vmsite-ltr-css.html)