changing image size in cube cart 5

[summerscloset]

I have tried all advice Ive found and still cant get my product image thumbnails larger. There seems to be so much wasted space. My website is www.summerscloset.com. Any advice would be great. The simpler the better, since I am only so skilled at making any major changes. Thanks!

 

This is what I have on 492, 501

height is 205, margins 10, 5, 5

 

width on 501 is 124 margin right 3

other lines are like you suggested.

[bsmither]

Welcome summercloset! Glad to see you made it to the forums.

 

There will be two changes to make: the skin's config.xml and the skin's common.css.

 

At the bottom of config.xml, you will see <image> tags. The one that has reference="thumbnail" is set to have maximum=138 pixel width or height, whichever is the longest side. Change that to 118. Do the same for "small".

 

In common.css, near line 264, find the rule for div.latest_product. Change the width to 124px; height to 205px; and margin to 5px 2px 35px 2px;

 

You can also adjust div.category_product near line 492 (for height) and div.category_product a.image near line 501 (for width).

 

Then visit your admin screen Maintenance, Rebuild tab, and clear the cache.

[summerscloset]

Ok, I tried that, (I hadnt changed the comon.css file before), but I think my numbers are off, and before I make them worse, can you tell me which numbers(size) I entered wrong that are causing the over lapping? Thanks so much!

-danee

[bsmither]

You need to make the height of:

div.latest_product p.image {

to 188px; near line 271.

[summerscloset]

Hate to bother you again, but I tried changing line 271, and a bunch of others I though might be it, but I cannot find which one needs to be changed to adjust the box around the picture to fit, now that the picture is larger in the latest products. .

Also, in the categories I made the images larger, but now the lines are not lining up. Which line is associated with these? Or is this the margins? Thanks so much

[bsmither]

The file /skins/mican/styles/common.css, at line 271, there is this:

div.latest_product p.image {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 138px;
    padding: 8px;
    text-align: center;
}

Change the height as instructed earlier.

 

Please be aware that web browsers will "cache" (keep a local copy) of images, javascript and css files. As such, you need to learn how to have the browser you are using to "force" a complete page re-load, including reloading all images, javascript and css files.

 

Each browser is different on how that is accomplished. On Firefox, holding down the shift key while clicking the circle-arrow at the far right edge of the web address entry field will force a reload for Firefox.

 

Also, CubeCart keeps a copy of pages for itself as well. In the admin Store Settings, Advanced tab, in the Performance group, disable caching while you are playing around with the skin code.