WordPress.org

1. fjavier
   Member
   Posted 1 year 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 1 year 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 1 year 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 1 year ago #
   

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

5. GhostToast
   Member
   Posted 11 months 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 11 months ago #
   

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

7. Marklcm
   Member
   Posted 10 months ago #
   

   Thanks GhostToast
   works a treat for me

8. sagdude2002
   Member
   Posted 10 months 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 10 months ago #
   

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

10. sagdude2002
    Member
    Posted 10 months ago #
    

    Thanks JLeuze!

11. Josh Leuze
    Member
    Plugin Author
    Posted 10 months ago #
    

    No problem!

12. inveritas
    Member
    Posted 4 months ago #
    

    Hi,

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

    Thanks in advance!

13. inveritas
    Member
    Posted 4 months 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 4 months ago #
    

    Thanks for sharing!

Topic Closed

This topic has been closed to new replies.