Jump to:

2088 Posts in 1008 Topics by 455 members

E-Commerce Modules

SilverStripe Forums » E-Commerce Modules » Restyling the ProductGroup

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

Page: 1
Go to End
Author Topic: 1100 Views
  • trevwilcox
    Avatar
    Community Member
    7 Posts

    Restyling the ProductGroup Link to this post

    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

  • trevwilcox
    Avatar
    Community Member
    7 Posts

    Re: Restyling the ProductGroup Link to this post

    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

  • Kalileo
    Avatar
    Community Member
    127 Posts

    Re: Restyling the ProductGroup Link to this post

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

  • Kalileo
    Avatar
    Community Member
    127 Posts

    Re: Restyling the ProductGroup Link to this post

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

  • trevwilcox
    Avatar
    Community Member
    7 Posts

    Re: Restyling the ProductGroup Link to this post

    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

  • Kalileo
    Avatar
    Community Member
    127 Posts

    Re: Restyling the ProductGroup Link to this post

    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

    1100 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.