Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

E-Commerce Modules /

Discuss about the various e-commerce modules available:
Ecommerce, SS Shop, SilverCart and SwipeStripe
Alternatively, have a look the shared mailinglist.

Moderators: martimiz, Nicolaas, Sean, frankmullenger, biapar, Willr, Ingo, Jedateach, swaiba, simon_w

Restyling the ProductGroup


Reply


6 Posts   1135 Views

Avatar
trevwilcox

Community Member, 7 Posts

15 April 2009 at 7:08pm

Edited: 15/04/2009 7:12pm

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

Avatar
trevwilcox

Community Member, 7 Posts

27 April 2009 at 6:50pm

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

Avatar
Kalileo

Community Member, 127 Posts

27 April 2009 at 7:28pm

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".

Avatar
Kalileo

Community Member, 127 Posts

27 April 2009 at 7:31pm

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

Avatar
trevwilcox

Community Member, 7 Posts

28 April 2009 at 5:18pm

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

Avatar
Kalileo

Community Member, 127 Posts

29 April 2009 at 1:23pm

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