Texture size

[mlokz]

Hi. I am using prestashop 1.6 to help my friend sell apples from his farm. There are three categories of one kind of apple - fine, flawless and awesome. I made attributes to each apple and I uploaded a texture, which is a mini picture of apple of such category. Thing is, textures are too small? How I make them bigger?

 

my site: http://www.ecostatek.cz/bio-jablka/8-bio-jablko-idared-1kg.html#/vizualni_uroven_-normalni

 

Category selection is just above blue shopping cart boy, you cant miss it. I need those pictures way larger, but I dont know how to do it. Thanks for any help of tips.

[mickeyboy1]

Try in themes/your-theme/css/product.css and find

#attributes .attribute_list #color_to_pick_list li a.color_pick img {
    display: block;
    height: 22px;
    width: 22px;
}

change the width and height to suit.

 

but be aware if you make it too large and you have alot of colors/textures it might overlap the box, so try it on a product with the most colors/textures

[mlokz]

Try in themes/your-theme/css/product.css and find

#attributes .attribute_list #color_to_pick_list li a.color_pick img {
    display: block;
    height: 22px;
    width: 22px;
}

change the width and height to suit.

 

but be aware if you make it too large and you have alot of colors/textures it might overlap the box, so try it on a product with the most colors/textures

 

 

Now it looks like this, they overlap each other..

 

 

 

Edited December 2, 2014 by mlokz (see edit history)

[mickeyboy1]

Yes sorry you also need to increase

#attributes .attribute_list #color_to_pick_list li {
      float: left;
      margin: 0 3px 3px 0;
      padding: 1px;
      border: 1px solid #d6d4d4;
      width: 26px;
      height: 26px;
      clear: none; }

In my product.css the #color_to_pick_list li, is 4px higher than #color_to_pick_list li a.color_pick img {

so if you keep yours 4px higher it should be ok

[mlokz]

Yes sorry you also need to increase

#attributes .attribute_list #color_to_pick_list li {
      float: left;
      margin: 0 3px 3px 0;
      padding: 1px;
      border: 1px solid #d6d4d4;
      width: 26px;
      height: 26px;
      clear: none; }

In my product.css the #color_to_pick_list li, is 4px higher than #color_to_pick_list li a.color_pick img {

so if you keep yours 4px higher it should be ok

 

Cool, there are two more variables I need to change, but I figured it out.

 

BUT

 

when I display products in a category in a list, they also have those attributes under them. I need them big as well, where will I find apropriate CSS file?

 

[mickeyboy1]

Ah these will be in themes/your-theme/css/product_list.css

 

Find these two bits of code and change height and width to suit...

ul.product_list .color-list-container ul li {
    border: 1px solid #d6d4d4;
    display: inline-block;
    height: 26px;
    width: 26px;
}

AND

ul.product_list .color-list-container ul li a img {
    display: block;
    height: 22px;
    width: 22px;
}

Remember to keep the 4 px difference

Edited December 3, 2014 by mickeyboy1 (see edit history)

[Ugo Fontana]

Ah these will be in themes/your-theme/css/product_list.css

 

Find these two bits of code and change height and width to suit...

ul.product_list .color-list-container ul li {
    border: 1px solid #d6d4d4;
    display: inline-block;
    height: 26px;
    width: 26px;
}

AND

ul.product_list .color-list-container ul li a img {
    display: block;
    height: 22px;
    width: 22px;
}

Remember to keep the 4 px difference

i have a similar need but not same:

i want a different size between colour / pattern  and  other images

I want to create an attribute that is shown with big images (somethingh like 100x100px) i can also upload direct image sized 100x100

but i want it not affect colours and pattern colours dimension ( i can upload pattern PX dimension fitting the colour default one if necessary)

 

i could someway bypass the pattern resizing? so i can upload image of size i prefer... but without having troubles cause the small squares behind image make them all grouped with bad visualization...

 

i hope it's clear what i mean LOL

i'm not a perfect english