Grow your CSS skills. Land your dream job.

[Solved] wp_cycle slideshow plugin

  • # November 17, 2009 at 12:32 pm

    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

    Code:
    [wp_cycle]

    and styled it with

    Code:
    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

    # November 17, 2009 at 1:07 pm

    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.

    # November 17, 2009 at 7:55 pm

    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

    # November 18, 2009 at 5:21 am

    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?

    # November 18, 2009 at 4:58 pm

    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

    Code:
    margin: 15px auto;

    .
    ~Barb

    # November 19, 2009 at 3:01 am
    "barbcpeter" wrote:
    Also, btw, I did originally do the

    Code:
    margin: 15px auto;

    That will only work if you specify a width for whatever it is you are trying to center.

    # November 22, 2009 at 10:32 am

    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

    Code:
    margin: 15px auto;

    and Voila! a centered slideshow!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".