Styling Product Images

Developers Frontend
1

I don't suppose anyone can direct me to where the product images are styled up? I'd hoped that this would be something that was opened up in the Theme Editor as all I want to do is fiddle about with is the product image background colour and border. I'm not even sure if it's styled differently depending on where the image appears or if it all comes off the one style.



Any pointers greatly appreciated.



Thanks

2

Ah, got it. Nothing to see here now :)

3

Add the file Less, you have chosen (example facebook.less),

after line:

/*CUSTOMCSS*/

the following lines:


/*** view category: products_multicolumns ***/
td.preview-image {
border: 2px solid #ccc;
}
td.preview-image:hover {
border: 2px solid @menu;
}
/*** view category: products_without_options ***/
.product-container.list .product-item-image {
border: 2px solid #ccc;
}
.product-container.list .product-item-image:hover {
border: 2px solid @menu;
}
/*** view one product ***/
.border-image-wrap {
border: 5px solid #ccc;
}
.border-image-wrap:hover {
border: 5px solid @menu;
}




Then the image products will have a gray border, but when you hover blue (as menu color).

4

Thank you :)

5

You can simply add these styles to the “Theme editor” — “custom css”.







And keep these styles by clicking “Save”/

6

Hi All,



I am AJ from Holland and new to cs-cart. This is my webshop: www.wadokaionline.com.

At Hot Deals, the products have a white surrounding and also at the products list when viewing a category. I can't seem to change this. Neither could I find the above ways to edit it. I am running version 4.0.1.



Hope someone can help me out on this matter.

7

I solved my problem by simply uploading images that have the same background color as my webshop. Make sure your images are squares so that the cs cart does not add the white border.

8

[quote name='Katrin Kopytina' timestamp='1390872280' post='176149']

Add the file Less, you have chosen (example facebook.less),

after line:

/*CUSTOMCSS*/

the following lines:


/*** view category: products_multicolumns ***/
td.preview-image {
border: 2px solid #ccc;
}
td.preview-image:hover {
border: 2px solid @menu;
}
/*** view category: products_without_options ***/
.product-container.list .product-item-image {
border: 2px solid #ccc;
}
.product-container.list .product-item-image:hover {
border: 2px solid @menu;
}
/*** view one product ***/
.border-image-wrap {
border: 5px solid #ccc;
}
.border-image-wrap:hover {
border: 5px solid @menu;
}




Then the image products will have a gray border, but when you hover blue (as menu color).

[/quote]





This did not work with the new responsive theme. Please help