WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Center the slideshow (10 posts)

  1. Ben
    Member
    Posted 3 years ago #

    Hi JLeuze, thanks for the awesome plugin! Really simple to use and useful.

    I just need to know how I can center the slideshow in my my main content div (at the moment it's aligned to the left)

    Currently I'm using the shortcode and would like to keep using it if possible.

    I tried adding

    .meteor-slides {
    	margin: 0;
    	overflow: hidden;
    	padding: 0;
    	position: relative;
    	z-index: 1;

    but doesn't seem to work.

    I was also wondering if it is possible to move the navigation arrows so they sit just outside to the left and right of the slideshow?

    I have set up a test slideshow on my site here:
    http://benredpath.co.uk/test/test/

    Any help greatly appreciated.

    Thanks!

    Ben

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Ben, you should be able to center the slideshow by setting the left and right margins to auto like this:

    .meteor-slides {
    margin:0 auto;

    But that centers it within the main-col div, do you need the main col to be full width so that the slideshow is centered on the site, like this?

    #main-col {
    float:left;
    width:960px;
    }

    The previous and next navigation absolutely positioned, so you could use negative positioning to push them out of the slideshow like this:

    .meteor-nav .prev a {
    left:-35px;
    }
    
    .meteor-nav .next a {
    right:-35px;
    }

    Make sure the overflow on the slideshow is visible so that you can still see the navigation:

    .meteor-slides {
    overflow:visible;
    }

    Ah, don't forget to use a custom stylesheet so that you don't lose these changes when updating the plugin.

  3. Ben
    Member
    Posted 3 years ago #

    Hi JLeuze,

    Thanks for your detailed and prompt response!

    I have added margin: 0 auto; to the meteor-slides div class like so:

    .meteor-slides {
    	margin: 0 auto;
    	overflow: visible;
    	padding: 0;
    	position: relative;
    	z-index: 1;
    }

    but still doesn't posotion the slideshow in the centre of the man-col div...any idea why this doesn't seem to work?

    Positioning the nav has worked perfectly tho! :)

    Thanks

    Ben

  4. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    No problem Ben, it looks like it is centering within main-col. Try selecting meter-slides with Firebug and toggling the margins on and off.

    If you tweak main-col to be wider you can see the slideshow center as it grows.

  5. Ben
    Member
    Posted 3 years ago #

    Ah it was just i didn't have the main-col div specified as wide as I wanted it! Thanks again for your help, I don't know anywhere else that offers such great support for free! Made a small donation, happy christmas!

  6. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Glad to help Ben, thanks for your contribution!

  7. GeorgiaG
    Member
    Posted 3 years ago #

    Hello. I am trying to center as well. I tried to follow the changes recommended above but it did not seem to make any difference. I do see it load centered and then fall to the left on page refresh. I also expanded my column to 980 like so

    .meteor-slides {
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 1;
    }

    #main-col {
    float:left;
    width:980px;
    }

    Here is the url. Is there any way I can address this? I am not a css whiz but can follow instructions most of the time. Thank you. Also I posted the url below.

    http://sowinteraction.com/playpen_private/

    This plug-in is great. So easy to use and implement. I have tried out about 9 of them and this is the only one I found that was idiot proof and worded as promised. I lover that you have created a unique slide section. No fake features! and much easier to teach to a client. Thank you!

  8. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    @GeorgiaG Hi, glad to hear that Meteor Slides is working out for you. The slideshow looks centered, did you get your problem solved?

  9. GeorgiaG
    Member
    Posted 3 years ago #

    I did... for the time being. When I moved the site to a new location it would open centered and then jump right about half an inch. There are other problems there though so I am hoping that as those are resolved this issue will take care of itself. Thank you for the reply. I appreciate that you follow through.

    Best, Georgia

  10. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    You're welcome Georgia, let me know if it is still giving you problems.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic