[Plugin: Meteor Slides] Centering buttons

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;
}

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

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

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;
}

@ghosttoast Thanks for sharing, I’ll try that out!

Thanks GhostToast
works a treat for me

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!

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

Thanks JLeuze!

No problem!

Hi,

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

Thanks in advance!

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.

Thanks for sharing!