WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Formatting Slideshow to appear full width (11 posts)

  1. ChristiMc
    Member
    Posted 1 year ago #

    I've successfully installed and uploaded an image to the slideshow. EZ PZ. I'm struggling now with formatting it to look like this: http://www.wafbla.org/slideshow-wafbla.png

    I need to get the background of the slideshow to be dark (can do that with the dark style sheet) and also spread across the page as the page is stretched.

    I've tried setting the style sheet to "dark" and unchecking the fit to size box and making the slideshow image 1500 pixels so that it is wider than the actual image but then the arrow positions get wonky and the actual slideshow image doesn't stay centered to the page.

    Any tips on how I might accomplish this? I'm stumped.

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. ChristiMc
    Member
    Posted 1 year ago #

    Oops. Meant to include the page where the slideshow is now: http:/www.wafbla.org

  3. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    I think the best way to accomplish this, is to wrap the slideshow in an element you give a blue background and set it to stretch across the width of the website. Then you only have to center the slideshow using 'margin: 0 auto;'.

    To place the buttons outside of the slideshow, simply customize its stylesheet so that the '.slideshow_container .previous' and '.slideshow_container .next' are positioned outside of the slideshow:

    .slideshow_container_0 .previous {
    	left: -50px; /* Or whatever number of pixels looks good. */
    }
    
    .slideshow_container_0 .next {
    	right: -50px; /* Or whatever number of pixels looks good. */
    	background-position: -19px 0;
    }
  4. ChristiMc
    Member
    Posted 1 year ago #

    Wow thanks for the lightening fast response. I've implemented you background suggestion and that works perfectly. I'm having trouble getting the styles to work for the arrows however.

    1 - I've edited the "light" style sheet with the code above. It creates a new style sheet in the list of style sheets to select from. I think I have to select that new style in the Default Slideshow Settings tab so that it picks up the new style right? I've done that but doesn't seem to have any effect.

    2 - I've tried using .slideshow_container_0 .previous and .slideshow_container .previous and neither seem to affect the arrow position. What have I missed?

  5. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    The 'Default Slideshow Settings' tab only affects newly created slideshows, you should set the custom style from the slideshow's page. You can go there just like you would go to a post or a page. Click 'Slideshows' in the WordPress admin, you'll then see a list of slideshows. Click the slideshow you want to set the custom style for. Then in the 'Slideshow Style' box, select the custom style and save. Your slideshow should then be styled with the custom stylesheet.

  6. ChristiMc
    Member
    Posted 1 year ago #

    Well duh. Why didn't I catch that one has to apply the style sheet to the actual slide and that "Default" actually means, default. Geesh.

    So, still no luck. I've applied the new style sheet to the slide and given the -50 left and right styles for both prev and next as you've supplied above but those darn arrows just don't budge.

    What to do, what to do?

  7. ChristiMc
    Member
    Posted 1 year ago #

    Um, nevermind. I had been putting the code in the custom.css file. I see that it has to go into the function.css file instead. Once I did that, all is well!

    Thank you for a really easy to use plugin and for the exceptional support. All the best of luck to you!

  8. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    No problem, it has happened to many more users. It's something I should've stated more clearly on the default settings page.

    A little mistake I just saw I made, the reason that the buttons don't get styled is that I left in the little '_0' suffix that the slideshow is supposed to add. The CSS should actually have looked like this:

    .slideshow_container .previous {
    	left: -50px !important; /* Or whatever number of pixels looks good. */
    }
    
    .slideshow_container .next {
    	right: -50px !important; /* Or whatever number of pixels looks good. */
    	background-position: -19px 0;
    }

    Also note that I forgot the '!important' declaration to overrule the 'functional.css' stylesheet previously. Sundays, right?

  9. ChristiMc
    Member
    Posted 1 year ago #

    So if I use the !important and remove the _0 in the custom css file, then I don't need to have the style in the function.css.

    Do I understand this correctly?

  10. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Yes, otherwise the buttons will fall off the slideshow in every slideshow on your page. On the 'Custom Styles' tab of the 'General Settings' page different styles for every slideshow can be created.

  11. ChristiMc
    Member
    Posted 1 year ago #

    Ok, done. I've moved the code to the custom style and taken it out of the functions.css file and all works well! ;-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.