Creating a WordPress Slider – Part 3

by on October 29, 2009 in blog

cleaning it up

We left you last time with a functional but ugly slider. This post is about making it look nice, at least what I think looks nice. You will have to style it to your sites taste with custom CSS.

I added the following CSS to position the arrows to the side of the slider and give the content a better presentation.

.scroll-button {
 position: absolute;
 top: 180px;
 cursor:pointer;
 z-index: 100;
}

.leftb {
 left: 0px;

}

.rightb {
 right: 0px;
}

#utility-before-content, #utility-after-content, #utility-after-page, #utility-after-single {
 border: none;
}

#utility-before-content .thumbnail {
 height: 150px;
 width: 150px;
}

#utility-before-content .entry-meta {
 display: none;
}

That’s really all there is to finishing it up. You can watch me add the CSS below.

These are the sites that were instrumental in creating this slider and might be of interest to anyone who liked this series.

You can download the theme and working version below.

Download Hybrid Child Slider Theme

11 Responses to “Creating a WordPress Slider – Part 3”

  1. Ron November 2, 2009 at 6:27 pm # Reply

    Great tutorial ~ thanks!
    I was up almost all night trying to figure out how to do this in a child theme I am building.
    You just made my day!

    Gotta love Hybrid!!!

    • rusti November 2, 2009 at 7:23 pm # Reply

      Excellent, that’s why I put it up.

  2. Bruno Brant November 29, 2009 at 7:18 pm # Reply

    Yes, Great Tutorial! Thanks for sharing your knowledge. Your videos (and codes) were very helpful.

    I’m beginning to enjoy this “screencast thing”… =D

    • rusti November 29, 2009 at 7:34 pm # Reply

      I really learn best by watching rather than reading, so I hope it helps others.

  3. Tammy February 19, 2010 at 7:39 am # Reply

    Your tutorial saved me so much time and headache! I’m really grateful to you for taking the time to write this up and share it. You rock!

    • rusti February 19, 2010 at 7:42 am # Reply

      No problem! I was hoping it would be useful for someone. When you get it working, drop a link.

    • Tammy February 19, 2010 at 7:45 am # Reply

      It’s working now on my home page at http://lenski.com — a strange artifact showing on the right-hand side of the slider (looks to be part of a scrollbar but I can’t find what’s causing it … grrr!). Thanks!

  4. media March 12, 2010 at 9:23 pm # Reply

    I think I have done all tutorial … but why there’s no scrolling in the location? J Quary is not running :(

    • rusti March 14, 2010 at 7:14 pm # Reply

      “How long is a piece of string?”

      You must provide me with much more information if you wold like help. A link to the page would be a great start.

  5. Skip Savage May 30, 2010 at 5:43 pm # Reply

    Rather than slide posts, is it possible to slide images? If so, what needs to be changed?

    Thanks.

    • rusti May 31, 2010 at 11:23 am # Reply

      There’s a million plugins for that, look at jCarousel for starters.

Leave a Reply