VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: lira on March 19, 2014, 13:30:14 PM

Title: Related Products - Separate image from title
Post by: lira on March 19, 2014, 13:30:14 PM
Hi,

I was wondering if it is a way of separate image from title in related products.
I have images with different height, that way, depending on height, titles are in different vertical positions and not aligned...  I would like to add some css in order to align all image titles.

I'm using VM 2.0.20b and joomla 2.5.8


Thanks for your help  ;)
Title: Re: Related Products - Separate image from title
Post by: jenkinhill on March 19, 2014, 13:49:28 PM
http://forum.virtuemart.net/index.php?topic=118683.0
Title: Re: Related Products - Separate image from title
Post by: lira on March 19, 2014, 15:51:15 PM
Hi jenkinhill,

Aprecciate your link... Would also apreciate some help regarding to my question..

Thanks
Title: Re: Related Products - Separate image from title
Post by: jenkinhill on March 19, 2014, 22:50:27 PM
I don't have the old 2.0.20 versions around any more to see the code. There have been multiple changes since then, not only with security.

Are you refering to the related products on the product page view, or as shown in the add to cart popup?
Title: Re: Related Products - Separate image from title
Post by: lira on March 20, 2014, 12:50:04 PM
Hi Jenk,

I'm referring to the related products on the product page view, the list located at bottom page.

Do you need a link?

Thanks
Title: Re: Related Products - Separate image from title
Post by: jenkinhill on March 20, 2014, 16:31:50 PM
You will have to adjust the css to suit your template version, but something like this should do the trick. This is based on the default templates in the current 2.5.4 VM version.


.product-field-type-R {
width:120px;    /* adjust height & width to suit largest possible thumb image size */
height:200px;
float:left;
position: relative;
}
span.product-field-display {
position: absolute; bottom: 0; right: 0
}

.customer-reviews h4 {
clear:both;
padding-top:40px;
}


You may not need to add padding to .customer reviews, but you will need a clear under the related products div.
Title: Re: Related Products - Separate image from title
Post by: lira on March 21, 2014, 11:51:02 AM
Hi Jenk,

Thanks a lot for your suggestion.

I wasn't able to use it because it affects the size of entire related products "box"... However your code helped me finding the code that I need to change in order to achieve what I want, and the trick was quite simple  :o, only need to add "min-height:100px" to this line:

.product-field-display a img{display: block; margin-left: auto; margin-right: auto; margin-top:10px; min-height:100px;}

Again, thanks for your suggestion and help!

Regards  :D