JoomlaFAQs.org

Component : VirtueMart 1.1.2 / 1.1.3

In the category browse page, you may find that the product image thumbnail is 'touching' the product description. That sure looks ugly!

So how to add that little breathing space between the product image thumbnail and the short product description? Here are the steps...

1. Navigate to your category browse file. For instance, if you are using the default theme from VirtueMart, browse to yoursite/components/com_virtuemart/themes/default/templates/browse folder.
2. In this folder, you will see a few browse files i.e. browse_1.php, browse_2.php.
3. Say you are using the browse_2.php file. Open it for editing.
4. Look for this line

< ?php echo ps_product::image_tag( $product_thumb_image, 

'class="browseProductImage" border="0" title="'.$product_name.'" 

alt="'.$product_name .'"' ) ? >

5. Make the changes as per below to add a 10px right margin of the thumbnail
   

< ?php echo ps_product::image_tag( $product_thumb_image, 

'class="browseProductImage" border="0" style="margin-right:10px;"

title="'.$product_name.'" alt="'.$product_name .'"' ) ? >

6. Save the file.
7. Refresh browser to see the changes.