Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Template - FashionMart (SKU# FLEX-00008)

TOPIC: Customize additional images

Customize additional images 11 years 4 months ago #1646

I would like to place the additional images to the left of the main image, could you help me?
thanks
The administrator has disabled public write access.

Customize additional images 11 years 4 months ago #1660

Hi,

Usually we don't do that, this forum is only open for solving the problem that occurs after installing our VM Template, We don't provide free support for "customization". But since what you have done in the previous topic ;) I think you deserve this, beside what you are looking for is relatively easy.

First you should find the proper PHP file to make the edits.
The product details page has this PHP file:

ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/productdetails/default.php
(default.php or flexv2.php depends on which one you chose through VM Configuration)

Then look at the screenshot. (i did this modification through Firebug, You can do the same thing to get the same look.)

Attachment PastedImage121712705PM.gif not found



To add the "width70" and "floatright" rule, the DIV element is this:
<div class="FlexProductDetailV2left">

and it is located in 186th line in the "default.php" and in 214th line in "flexv2.php".
The Other DIV element that you need to make edits as you see in the screenshot is this:
<div class="flexible-zoom-additionalImages" style="text-align:left;margin-top:25px; margin-bottom:15px;">
which is located at few lines below.

Then, you can make some further CSS touches to make them look little better though. (such as giving some "margin-bottom" space between each "additional picture thumbnail". Like this:
.zoom-tiny-image-additional {
margin-bottom:5px;
}

The thumbnail will be separated by 5pixel vertically, so they will look much better. As i said, the rest is up to you and the way you want them to be appeared. Use "Firebug" plugin for any kind of CSS customization, as you can see in the screenshot, I achieved what you are looking for without touching any PHP file. So now I know what i should change to get the same look.

I am sure you are aware about Firebug, but you can take a look at here to see where to download it and how to use it:
www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/342-using-firebug-for-customization-or-troubleshooting

Cheers.
Forum Support.
Last Edit: 11 years 4 months ago by Support.
The administrator has disabled public write access.
Time to create page: 0.122 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo