Hi all,

I'm trying to restyle the ProductGroup page so that it basically just shows thumbnails of the items.

In the stylesheet, I got it to the point where I made the blue boxes and the underneath text disappear. What I get though is this:

I want to get ride of these big white margins on either side so that it only shows the thumbnail of the image.

I then adjusted the width and height attributes in the li.productItem as follows:

.product_summary li.productItem {
	float:left;
	width:70px;
	height:100px;
	overflow:hidden;
	margin:10px 10px 0 0;
	font-size:1.1em;
	padding:1em;
	background:none;
	border: 0px solid #c9e5f7;
}

and got this:

It seems I've affected the placeholder for the thumbnail and not the actual position of the thumbnail. I also tried adjusting the overflow, and that just made a mess. For the life of me, I can't find anything else that might control the position of the image within the placeholder.

Can anyone point me in the right direction?

Thanks in advance.

Trevor

I still haven't had any luck with this. Logically, I can only figure that I need to be looking at whatever is controlling the size and position of the thumbnails. But I can't seem to find what is doing this.

Please help! Thanks!

Trevor

Trevor, I would fire up Firefox and there the tool Firebug, and then check which element is the white one, and then let firebug show you where it get's the background set to white. Then change the background of that element to "transparent" or even "transparent !important".

If you don't see Firebug there under tools in Firefox, you need to install it as Firefox extension.

Thanks Kalileo. I tried that and that worked, but the images are still "cut". There seems to be a mechanism somewhere that is resampling the original images, indicated by the below code, converting them to thumbnails for display on this screen. Whatever's controlling the thumbnails doesn't seem to be CSS controlled unfortunately.

<img src="/SilverStripe-v2.3.1/assets/Uploads/_resampled/Thumbnail-LM1001.jpg" alt="LM1001 image"/>

I've also seen references to $Image.Thumbnail in the .ss files.

<a href="$Link" title="<% sprintf(_t("READMORE","Click here to read more on &quot;%s&quot;"),$Title) %>"><img src="$Image.Thumbnail.URL" alt="<% sprintf(_t("IMAGE","%s image"),$Title) %>" /></a>

Still perplexed...
Trev

Trevor, I haven't looked yet at the method how and when these thumbnails are created, or even how SS handles resizing of pictures, so I'm guessing here, this is what I would check:

- These thumbnails might be created when you upload the product pictures, thus their size is defined in the code handling the uploads, change that code and re-upload.

- or, there is a standard size defined somewhere for thumbnails, change that definition (and possibly delete all currently existing thumbnails, so that they are recreated) and it will apply.

In both cases I would expect that to be in the code, not in the css.

HTH