How to change the color behind the thumbnails

Hi there.

On my page we have a design which has a beige(ish) background color.

All looking nice, but noticed that in categories and the product pages there is a white background, behind the pictures this.

Tried to find the string of which sets the white color but I’m ****.

Wonder if anyone knows how to do this.

Have a look in the categories to see what I’m on about.


The chair on the front is 200px x 200px. What about changing the white border around the main part of the chair to a beige color that matches your background.

I realize this is a huge pain in the neck and especially would be if you decide to change the background color later on, but it is the best I can think of.


Cheers Brandon.

I thought about that, the thing is. The thumbnail is set at 200x200 which gets generated from the big pictures I upload into the catalogue.

The big pictures are all different sizes, and they will be because you want to keep the height width ratio constant.

Back in the old version cs cart was just set the longest side of my picture to the 200pixel thumbnail, and apply my background color around it.

I thought of slapping a beige background behind every picture, and resizing it to be a square,maybe even apply a nice drop shadow in photoshop.

But because all of the pictures are of a different size I couldn’t get the automator to do it for me.

I have about 400-500 pictures to do. I am positively not gonna do that one by one.

:stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue:

If worst comes to worst and noone can help me, I might just have to apply a white background to the middle bit. But that would ruin the design…

Thanks for your tought.


You can load a thumbnail separate. I am currently changing my design a little bit and am having to go through and replace all my thumbnails with different images. For my products I am using images that are 150 x 150, but some of my products are tall and skinny and some are short and fat so I am just taking the products and putting them into a 150 x 150 background. Than I save that as a thumbnail and just replacing my existing thumbnail.


Uhm…hey Brandon, now how do we spell aquarium ? :wink:

Try adding a background to your .previewer-container style of the same colour as the background of your site. This will give you the beige colour in the larger pop-up image.

Download Firebug, which will show you which parts of your styles.css you need to change to alter the look of your cart. I think you have a class of “cm-thumbnails” which you could also try adding the background to. Sorry but I haven’t had the time to play around much but, if you download Firebug, you will get the general idea.

[quote name=‘Struck’]Uhm…hey Brandon, now how do we spell aquarium ? ;)[/QUOTE]

Well not like I spelled it. C.r.a.p. Well thank you for pointing that out smarty pants.

No seriously, thank you,


styles.css line 1402 product-image

background-color: transparent;

[QUOTE]No seriously, thank you,


Hey, no problem at all! :wink: