Resizing Image Slider in Prestashop

Discussion in 'CSS' started by muffet, Mar 8, 2013.

  1. #1
    How do I resize Image Slider in Prestashop 1.5.3.1? I've recently had banners designed were some of the elements and/or text is unreadable inside the banner because of the dimensions of the Image Slider on the Homepage. I want to change the size of the Image slider so site visitors can fully see all the contents of each banner inside the Image slider. What appropriate px size should the Image Slider be resize too? Below is the code for bx- wrapper and Image Slider:

    <div style="width:736px; position:relative;" class="bx-wrapper"><div style="position:relative; overflow:hidden; width:736px;" class="bx-window"><ul id="homeslider" style="width: 999999px; position: relative; left: -736px;"><li style="width: 736px; float: left; list-style: none outside none;"><a title="Electronics, Home, Fashion promotions." href="http://www.prestashop.com"><img width="720" height="263" title="Electronics, Home, Fashion promotions." alt="sample-5" src="/modules//homeslider/images/e5855d22d453849f5cc4dc9148602aa6.jpg"></a></li>
                <li style="width: 736px; float: left; list-style: none outside none;" class="pager"><a title="Jewelry &amp; Watches Special Promotions" href="http://www.prestashop.com"><img width="720" height="263" title="Jewelry &amp; Watches Special Promotions" alt="sample-1" src="/modules//homeslider/images/d14ef7744dea3eacf64dcb432a340f11.jpg"></a></li>
                    <li style="width: 736px; float: left; list-style: none outside none;" class="pager"><a title="Summer Makeup Special Promotion" href="http://www.prestashop.com"><img width="720" height="263" title="Summer Makeup Special Promotion" alt="sample-2" src="/modules//homeslider/images/9bb8c7a09892e34cbb3e92bb269068f3.jpg"></a></li>
                    <li style="width: 736px; float: left; list-style: none outside none;" class="pager"><a title="Sports &amp; Outdoor Promotions &amp; Specials." href="http://www.prestashop.com"><img width="720" height="263" title="Sports &amp; Outdoor Promotions &amp; Specials." alt="sample-3" src="/modules//homeslider/images/a0454e93f19703d45aa0f35193ae2001.jpg"></a></li>
                    <li style="width: 736px; float: left; list-style: none outside none;" class="pager"><a title="Kid's Apparel Promotions and other Specials." href="http://www.prestashop.com"><img width="720" height="263" title="Kid's Apparel Promotions and other Specials." alt="sample-4" src="/modules//homeslider/images/101ce2888ba7806d7755ca2229445695.jpg"></a></li>
                    <li style="width: 736px; float: left; list-style: none outside none;" class="pager"><a title="Electronics, Home, Fashion promotions." href="http://www.prestashop.com"><img width="720" height="263" title="Electronics, Home, Fashion promotions." alt="sample-5" src="/modules//homeslider/images/e5855d22d453849f5cc4dc9148602aa6.jpg"></a></li>
        <li style="width: 736px; float: left; list-style: none outside none;"><a title="Jewelry &amp; Watches Special Promotions" href="http://www.prestashop.com"><img width="720" height="263" title="Jewelry &amp; Watches Special Promotions" alt="sample-1" src="/modules//homeslider/images/d14ef7744dea3eacf64dcb432a340f11.jpg"></a></li></ul></div><div class="bx-pager"><a class="pager-link pager-1 pager-active" href=""></a><a class="pager-link pager-2" href=""></a><a class="pager-link pager-3" href=""></a><a class="pager-link pager-4" href=""></a><a class="pager-link pager-5" href=""></a></div><a class="bx-prev" href="">prev</a><a class="bx-next" href="">next</a></div>
    Code (markup):
     
    muffet, Mar 8, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Mein gott that's some painfully bad markup -- I guess there's a reason I've never even HEARD of 'prestashop' until this past week. Thanks for the information letting me warn people away from that. That makes turdpress look good...

    inlined style, pointless wrapping DIV for nothing, redundant attributes that should be said just ONCE in the CSS instead of every blasted line, TITLE attribute on elements that really should never HAVE title and are redundant to the element wrapping it, pointless/meaningless ALT text, scripting only elements inlined in the markup... talk about your laundry lists of how NOT to build a website.

    If that's typical of the markup that system saddles you with, do yourself a huge favor and throw the ENTIRE mess in the trash, there is NOTHING you can learn from it and it should NOT be considered viable for making websites. Quite literally there is NO reason for the markup on something like a image slider to be more than HALF what you have there, and probably done in a sane and rational manner more like a quarter the code... yes, it's THAT bad.

    NOT that I'd put one of those stupid space wasting image slider/rotator garbage on a website in the first place given how they piss all over accessibility by typically locking you into a fixed width and/or don't work right with responsive layouts -- much less the complete waste of bandwidth for NOTHING of value to visitors.
     
    deathshadow, Mar 8, 2013 IP
  3. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #3
    You can decrease the width in style and image.
     
    creativewebmaster, Mar 9, 2013 IP
  4. muffet

    muffet Active Member

    Messages:
    720
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    68
    #4
    I am not the original theme developer of Prestashop theme I have running on my site. I'll be sure to pass your advise along to the theme developer, not like the original theme developer would really care. :)
     
    muffet, Mar 9, 2013 IP
  5. muffet

    muffet Active Member

    Messages:
    720
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    68
    #5
    Decreasing the width in style and image, wouldn't this make the Image Slider smaller or the actual images of the different banners smaller? :confused: I want visitors to see the full advertising content of each banner in Image Slider instead of the banners' advertising content getting cut off. The banner images are the same size: 720 x 263. Or can you recommend a different Image Slider module that compatible with Prestashop v1.5.3.1?
     
    muffet, Mar 9, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    If the images are the same size, how/why are they getting cut off?!? That doesn't even make any sense.

    But then, neither does wasting a 720x263 area of a site on some massive/pointless image rotator that is apparently someone else's advertising?!?
     
    deathshadow, Mar 9, 2013 IP
  7. muffet

    muffet Active Member

    Messages:
    720
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    68
    #7
    I am not running some other company's advertising ads on my site like eBay does. The whole point of the image rotator is to advertise the Store's promotions as other online retailers do on their eCommerce sites if you've ever brought anything online in the past decade from Amazon.com or whichever other offline retailer you frequently shop at. All the banners were made the same size dimensions which is the image size that's specified in the Prestashop back office for Image Slider module.

    For Prestashop developers who are familiar with Prestashops' quirks; how do I resize the Image Slider or could you recommend an alternative Image Slider module that's compatible with Prestashop v1.5.3.1 so the advertising content of each my banners fits properly within the Image Slider and is readable without being cut off at the bottom or blocked by the transitions circles or dials shown in the Image Slider? You can reference my site valuebins.com to see the problem am trying to describe. Thanks appreciate the assistance.
     
    muffet, Mar 10, 2013 IP
  8. fbimage

    fbimage Banned

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #8
    you need some tutorial to learn how to resize image slider c#. any help will be greatly appreciated. i'd like to see some module be compatible with other things.
     
    Last edited: Jun 14, 2013
    fbimage, Jun 13, 2013 IP