How to center Wp-Cycle Slideshow

jQuery is quite simply awesome! It is so flexible, so easy to use and it Works nicely with WordPress; no wonder then that it is the most widely used JavaScript library. I’ve blogged about a few jQuery powered WordPress Plugins in the past (most notably WordPress Post Tabs).

I was happy to discover the WP-Cycle WordPress Plugin recently when I needed to add a simple image slideshow to a Page. I tried a few Plugins including Promotion Slider (which I highly recommend) however I really needed just a very simple slideshow; all I needed was to add a few images to a slideshow that I wanted to place on a page by using a shortcode.

Fortunately WP-Cycle met my simple needs very conveniently. The only problem I encountered however is that there isn’t a configuration setting for centering the slideshow on the Page; on my Page it was left aligned by default.

Using CSS to center WP-Cycle Slideshow

So just how do we center the WP-Cycle Slideshow? Just follow these few steps:

  1. In your WordPress dashboard go Media -> WP-Cycle
  2. Make a note of the ‘Rotator DIV ID’; by default it is ‘rotator’ and don’t change this unless you have a valid reason.
  3. In your WordPress dashboard go to Appearance -> Editor
  4. Save the following to the end of your active Theme style.css and the click ‘Update File’: #rotator {
    margin: auto;
    }

Note: if your ‘Rotator DIV ID’ was something other than ‘rotator’ then replace ‘rotator’ with your ‘Rotator DIV ID’.

Your slideshow will now be horizontally aligned (if it’s not then your Theme may require the CSS to be embedded in the header or inline).

Australian WordPress Specialist

Australian WordPress Specialists.

OrganicWeb provides leading WordPress solutions. Specialities include developing high converting Websites built with SEO from the ground up. Contact us to get more customers from your Website.

Leave a Reply