[solved][1.5]Moving additional images placement Opencart

Please LogIn to Reply!

Post By: guest | 01-17-2013 07:57 Reply

Question

I want additional images from product info to be placed on the right side of main thumb photo instead of being on bottom like the image below...
Help Please ><

Answers

please..?

System->Settings->Edit->Image->Product Image Thumb Size->140x140

/catalog/view/theme/default/stylesheet/stylesheet.css

Code: Select all
.product-info .image-additional {
   width: 260px;
   margin-left: -10px;
   clear: both;
   overflow: hidden;
}
.product-info .image-additional img {
   border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
   float: left;
   display: block;
   margin-left: 10px;
   margin-bottom: 10px;
}

to
Code: Select all
/*.product-info .image-additional {
   width: 260px;
   margin-left: -10px;
   clear: both;
   overflow: hidden;
}*/
.product-info .image-additional img {
   border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
   float: right;
   display: block;
   margin-left: 10px;
   margin-bottom: 10px;
}


I highly recommend getting Firebug. It will help with simple changes like this.

Thank you!!! but your css code above could move additional images to the right but not in vertical way.

But i could got hint from your help, changed it as

Code: Select all
.product-info .image-additional {
   width: 150px;
   margin-top: -10px;
   overflow: hidden;
}
.product-info .image-additional img {
   border: 1px solid #222;
}
.product-info .image-additional a {
   float: right;
   display: block;
   margin-top: 10px;
   margin-bottom: 10px;
}


Thank you for your help and intro to firebug. Awsome!!!

That'll only work in some older versions of IE (unless you have some other CSS). It doesn't work in Firefox and Chrome. I think I just missed adding a width to the left div container:

Code: Select all
.product-info > .left {
   float: left;
   margin-right: 15px;
   width: 260px;
}

oh, right...i only tested in my browser and didn't think of other broswers...
I re-did it in your way with the width change you just posted and it works just great in both IE and firefox
Thank you!!!

Reply Or Comment!
Please LogIn to Reply!