Author Topic: How to manage the space among product additional images  (Read 2858 times)

papermakeit

  • Beginner
  • *
  • Posts: 30
How to manage the space among product additional images
« on: May 18, 2008, 12:10:26 pm »
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  ;D, 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

  • Beginner
  • *
  • Posts: 20
Re: How to manage the space among product additional images
« Reply #1 on: June 18, 2008, 20:30:44 pm »
Thanks so much, Ive been banging my head against a brick wall with this for about 2 hours! ;)

Rahul B

  • Beginner
  • *
  • Posts: 14
Re: How to manage the space among product additional images
« Reply #2 on: June 25, 2008, 16:58:45 pm »
Thank You Thank You Thank You! I have been looking for this since a week!

nemo

  • Beginner
  • *
  • Posts: 16
Re: How to manage the space among product additional images
« Reply #3 on: October 05, 2008, 22:37:50 pm »
Thank alot

mamasboy

  • Quality&Testing Team
  • Beginner
  • *
  • Posts: 20
Re: How to manage the space among product additional images
« Reply #4 on: October 09, 2008, 10:49:25 am »
Great job!