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 ><
System->Settings->Edit->Image->Product Image Thumb Size->140x140
/catalog/view/theme/default/stylesheet/stylesheet.css
to
I highly recommend getting Firebug. It will help with simple changes like this.
/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;
}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;
}-Ryan
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
Thank you for your help and intro to firebug. Awsome!!!
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;
}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;
}-Ryan
Who is online
Users browsing this forum: No registered users and 6 guests
