treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] wp_cycle slideshow plugin

  • Hi everyone,

    I recently activated the wp_cycle jQuery plugin by Nathan Rice in order to do a very simple automated slideshow in WordPress.

    Got the slideshow up and running just fine, but I can't seem to style it--I want it centered in my main content area but it won't budge from a left alignment. Looking at it from Firebug, it seems the position of the slideshow container is set to relative and the slides are positioned absolutely.

    The documentation for the plug-in says it can be styled using the div you assign to it. So I tried
    <div id=\"rotator\">
    [wp_cycle]
    </div>

    and styled it with
    margin: 15px auto 15px auto;


    It didn't budge.

    I am not a programmer so I very hesitant to get in and fiddle with the code or the plug-in. Does the absolute positioning throw everything off?
    Help! Many thanks in advance!
    ~Barb
  • Never seen this plugin before so I checked out its homepage http://www.nathanrice.net/plugins/wp-cycle/ and the example he links to http://www.modthemes.com/.
    From what I can see you need to wrap #rotator inside another div and style that.
  • Thanks for your advice, apostrophe.

    I have tried that route also and still no results. I'll give it another try just to make sure I didn't do it wrong the first time. My question about absolute positioning still stands, however. Doesn't ab. pos. take each slide out of the normal html flow and make it stay where it's put, or does the positioning of the container (relative) of the slides(absolutely positioned) allow the slideshow to be centered?

    ~Barb
  • The slides are only positioned absolutely relative to their containing div so it makes no difference to how you position the slideshow on the page.
    I suspect that the problem lies elsewhere, can you post a link?

    EDIT:
    You do realise that you have to set a width for margin: 15px auto; to work?
  • Thanks again, apostrophe.

    Unfortunately, I'm developing the site locally, so no link to give at this point. However, as background, I am customizing the my-dkret3 child theme for an 890px-wide, no-sidebar site. I've been scouring firebug code and still can't come up with a good reason why the show isn't centering. If you need me to send you code, give me specifics on what you want and I'll email you privately (if you don't mind) all the pertinent info.

    I really appreciate your help. I have a lot to learn. Also, btw, I did originally do the
    margin: 15px auto;
    .
    ~Barb
  • "barbcpeter" said:

    Also, btw, I did originally do the
    margin: 15px auto;

    That will only work if you specify a width for whatever it is you are trying to center.
  • Thanks for your help, apostrophe!

    I finally solved the riddle and the answer lay in the plugin's php file! It was formatting the slideshow and that formatting was overriding anything I put in the style sheet! So I simply changed the plugin code to
    margin: 15px auto;
    and Voila! a centered slideshow!