Change place/move product option images [SOLVED]

Post By:user_4937 | Reply

Hi!

I am showing images for the products options. I.e the color of the product, so there is pictures of the product in green, yellow and so on.
But the problem is that all the options are being stacked in a straight line, from top to bottom, in only one column.
If I have 6 options and they all have a small thumbnail picture, it will be a long line making the page unnecessary long.
Here is a link to my store to show you what I'm talking about:
http://www.mickmek.com/index.php?route=product/product&path=20_70&product_id=322

Is there a way to change this, so I get maybe 2 columns or more?
Perhaps I could edit the "product option-image table" in i css-file, but don't know where to find it...

Regards
Fredrik
user_4937 Sun, 12 Aug 2012

*BUMP*

Doesn't anyone have an idea?

user_4938 Thu, 16 Aug 2012

Hi There, I do!

I had the same problem when setting it up.

You need to just change the list in the image to float left.

find the style in the catalog/view/theme/(templatename)/stylesheet/stylesheet.css called .option-image-new li

change the whole thing to

.option-image-new li {
display: inline-block;
float: left;
text-align: center;
font-size: 10px;
}

It should then be sorted, let me know.

If it does not then I will help you further.

Kind Regards
Kyle

user_4938 Thu, 16 Aug 2012

Hi There

You need to float the images left and add the inline block style.

find

Code: Select all
.option-image-new li


Replace the whole style with this one and they should display horizontally.

Code: Select all
.option-image-new li {
display: inline-block;
float: left;
text-align: center;
font-size: 10px;
}


Let me know if it works :)

user_4937 Sun, 02 Sep 2012

Hi!

Thanks for your answers, I think this can get me somewhere.
Though I can't seem to find the

Code: Select all
.option-image-new li


I have other similar. These are the ones I can find that are related to the option images:
Code: Select all
.product-info .option-image {
   margin-top: 3px;
   margin-bottom: 10px;
}
.product-info .option-image label {
   display: block;
   width: 100%;
   height: 100%;
}
.product-info .option-image img {
   margin-right: 5px;
   border: 1px solid #CCCCCC;
   cursor: pointer;
}


Maybe I should have mentioned I'm using Ver. 1.5.1.3

Regards
Fredrik

user_4937 Mon, 17 Sep 2012

Any other suggestion?

Or perhaps someone could verify that the above mentioned solution should work?
Because I couldn't seem to get it to work. :(

Regards
Fredrik

user_4937 Sun, 07 Oct 2012

I'm "bumping" this one again, since I can't believe I am the only one trying to get this done?!
Or have people solved this in an other way?

I just don't want all "option images" to end up in a single column, since I have products with 9 different option images and thus creates a large unused white space...
I've attached a picture showing this.

The solutions mentioned before in this post doesn't seem to work for me?!

I noticed I've forgot to say that I'm using OC ver. 1.5.1.3!

Regards
Fredrik

user_4937 Sun, 14 Oct 2012

Well, this has been sorted out thanks to Shopson.se at the Swedish forum.
Here's the solution if anyone else needs it.
viewtopic.php?f=129&t=86563&p=350169#p350169

`Reply Or Comment!
Please LogIn to Reply!