How to manage the space among product additional images

[papermakeit]

Hi all,

I saw that many of you/us had the need to manage the space among the additional images of a product.

As default, those images are one near the other without any space, and this is an issue for many of us.

To solve this, or at least how I solved  , follow this steps:

1) in your flypage.tpl.php (components/com_virtuemart/themes/yourtheme/templates/product_details/flypage.tpl.php)

find this:

Code: [Select]

<?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?>
and replace with:

Code: [Select]

<div class="vm_more_images"><?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?></div>
2) in your file theme.css
(components/com_virtuemart/themes/yourtheme/theme.css)

add this where you like:

Code: [Select]

.vm_more_images img {
padding: 1px;
background-color: white;
margin: 29px;
}

That's all!

The needed code is "margin: 29px", and you can vary the amount of the space.
The other two lines simply put a white border around the image and you can vary the thickness and the color. In this way you don't have to use the "border" code with its link problems.

Claudio

[chrisb123]

Thanks so much, Ive been banging my head against a brick wall with this for about 2 hours!

[Rahul B]

Thank You Thank You Thank You! I have been looking for this since a week!

[nemo]

Thank alot

[mamasboy]

Great job!