WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Centering buttons (14 posts)

  1. fjavier
    Member
    Posted 2 years ago #

    I know it may have been responded before but I'm unable to find and answer and I know the buttons are absolute positioned but is there any way to alter the template or move them outside the slide view-port in order to bring them to the exact center with relation to the slideshow?
    Thanks

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

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Are you referring the paged navigation below the slideshow? These are left aligned by default to work with any slideshow quantity and dimensions.

    But you can change the position to center them for your own slideshow where you know the quantity and width. You just need to take a screenshot of your site and measure how wide the paged buttons are, subtract that from your slideshow width and divide by two. Then you can change the left position of the paged buttons. Like if the buttons are 20px wide and the slideshow is 400px wide, set "left" to "190px" like this:

    .meteor-buttons {
        bottom: 5px;
        left: 190px;
        margin: 0;
        position: absolute;
        z-index: 50;
    }
  3. fjavier
    Member
    Posted 2 years ago #

    Thanks, but I had to convert to ems because in pixels resulted with a fraction, it worked great thanks for your advise.

  4. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No problem, percentages are useful sometimes too, if the width isn't consistent.

  5. Gustave F. Gerhardt
    Member
    Posted 2 years ago #

    JLeuze, thanks so much for this plugin. I use it all the time. I was trying to center the nav buttons myself and I think this will allow you to do it without knowing ahead of time the number of buttons:

    .meteor-slides .meteor-buttons {
        bottom: 30px;
        height: 9px;
        margin: 0;
        padding: 6px 0 0;
        position: absolute;
        width: 100%;
        z-index: 999;
        text-align:center;
    }
    .meteor-buttons a {
        background: url('images/buttons.png') no-repeat bottom left;
        display: inline-block;
        width: 9px;
        height: 9px;
        margin: 0 2px;
        outline: none;
        text-indent: -9999px;
    }
  6. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    @GhostToast Thanks for sharing, I'll try that out!

  7. Marklcm
    Member
    Posted 2 years ago #

    Thanks GhostToast
    works a treat for me

  8. sagdude2002
    Member
    Posted 2 years ago #

    Hi GhostToast...and Marklcm - where exactly do you insert that code? FYI, I put the slider on my website by inserting the widget into the body of a page as opposed to using code. Thanks!

  9. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    You would add that code using a custom stylesheet in your theme.

  10. sagdude2002
    Member
    Posted 2 years ago #

    Thanks JLeuze!

  11. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No problem!

  12. inveritas
    Member
    Posted 1 year ago #

    Hi,

    What if I have multiple slideshows each with a different number of images?

    Thanks in advance!

  13. inveritas
    Member
    Posted 1 year ago #

    Ah nevermind, I found out how. If anyone was wondering, this is for a 960px site:

    #meteor-buttonsSLIDESHOWNAME {
    width:260px !important;
    left: 455px !important;
    }

    The 260px width is to prevent #meteor-buttons' original 100% width from extending off the page and creating a horizontal scrollbar.

  14. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for sharing!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic