Creating a WordPress Slider – Part 3
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.
- jQuery4Designers
- WordPress Modder
- Digging Into WordPress
- CSS-Tricks
- Min’s Blog (for icons)
- Theme Hybrid
You can download the theme and working version below.
Categories: blog
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!!!
Excellent, that’s why I put it up.
Yes, Great Tutorial! Thanks for sharing your knowledge. Your videos (and codes) were very helpful.
I’m beginning to enjoy this “screencast thing”… =D
I really learn best by watching rather than reading, so I hope it helps others.
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!
No problem! I was hoping it would be useful for someone. When you get it working, drop a link.
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!
I think I have done all tutorial … but why there’s no scrolling in the location? J Quary is not running
“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.
Rather than slide posts, is it possible to slide images? If so, what needs to be changed?
Thanks.
There’s a million plugins for that, look at jCarousel for starters.