WordPress.org

Ready to get started?Download WordPress

Forums

WP Supersized
How to adjust padding so image doesn't go under header (9 posts)

  1. Jon Brown
    Member
    Posted 2 years ago #

    Can one adjust the padding/margin (top and bottom) so that the image does not stretch underneath the header or footer? I assumed just adjusting #supersized but that doesn't seem to work. If I need to hack the JS I'll do that, but hoping I can do it with just CSS or a filter.

    http://wordpress.org/extend/plugins/wp-supersized/

  2. judyhicks
    Member
    Posted 1 year ago #

    my workaround was to add white space (or another color to match your site background if a solid color) to the top and bottom of the slide (image), roughly equivalent to the height of your header and footer. works fine for me.

  3. bluebeard
    Member
    Posted 1 year ago #

    does anyone else have a solution? what judyhicks suggested doesn't quite work..

  4. Jon Brown
    Member
    Posted 1 year ago #

    Correct, adding white space to the image doesn't work, since the image will starch and scale depending on viewport size.

    Modifying the core JS does work but it's obviously a pain and would get undo by a plugin update.

  5. leopardman
    Member
    Posted 1 year ago #

    I have the same issue. Guess one needs to work with margin-top in percentage, to keep it responsive. However, I too can't yet find the right css to apply here to both wrapper and each image.

  6. Jon Brown
    Member
    Posted 1 year ago #

    CSS alone won't work. Anything you do in CSS will happen after the image has already been resized and hence will stretch/squish the image hence why you've GOT to do it in JS.

    There is a good discussion of it in the comments of the JS library this plugin uses: http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/

    search for the word "offset" and modify according your needs. Maybe someday someone will update the JS library to take a top/right/bottom/left offset or padding value... currently it doesn't.

    For example for my site I subtracted 75 here:
    // Gather browser size
    var browserwidth = base.$el.width(),
    browserheight = (base.$el.height()-75),
    offset;

    and elsewhere added 75 to center:
    // Vertically Center
    if (base.options.vertical_center){
    $(this).css('top', ((browserheight - $(this).height())/2)+75);
    }

    You could then save this modfied script in your theme, deregister the script that the plugin uses and register your own in it's place (I haven't gotten to that part yet, but that's the best way I can think of to handle it all).

  7. bluebeard
    Member
    Posted 1 year ago #

    @Jon Brown

    I just wanted to say THANK YOU. I have torn out enough hair trying to solve this problem!!!!

  8. albertaugustin
    Member
    Posted 1 year ago #

    hi, it is working with only css, i made this just in an actual project (not online for now). But it is only working to resize the whole images, so if you make 10% for the header the "li"s have to be 90% or less!
    this is the code i used so far (written in style.css)

    #supersized{
    height: 70% !important;
    width: 50% !important;
    display: inline-block !important;
    }
    #supersized li{
    top: 87px !important;
    width: 100%;
    }
    #supersized li a{
    height: 70% !important;
    margin: 0 auto !important;
    text-align: center !important;
    }

  9. albertaugustin
    Member
    Posted 1 year ago #

    okay something is not working well: the iPad version. so add:
    #supersized{
    overflow: visible !important;
    }

    to the supersized id and it's also playing well on iPad/iPhone

    i know, it's all a dirty hack but working fine for me like this and the client!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic