This post is the fourth of an ongoing series entitled “50 Days to a Better WordPress Blog”. During this time, Mitch will be providing small snippits of code, plugins, and things you can do to make your blog more attractive, attain new readers, and keep old ones coming back time and time again. You can see the entire series here.
If you’re like me you love to look at all of the “little details” in a theme. Sometimes, it’s the littlest detail that makes the biggest difference, and when it comes to inserting images, that little detail lies in the “caption” elements of the site.
When you insert a picture, you have the option in the image uploader of adding a “caption”. Most of the time, it drops a little blurb of text under the image and that’s that. But I’m going to give you two really nice styles you can add to give your captions (and images) a little pop.
The Standard Caption
First thing’s first – the class we’ll be working with in the CSS is “.wp-caption”. This controls the caption box as a whole.
A standard caption typically looks like this:
.wp-caption{
background-color: #ccc;
padding: 20px;
text-align:center;
font-size: 11px;
}
Nothing too complicated here, but some small styling goes a long way. We’ve given it a background color, padding, and aligned the text (as well as making it smaller so it stands out).
Polaroid Captions
But we can have fun with this – Let’s turn our images into polaroid photos:
.wp-caption{
background-color: #FFF;
padding: 20px 20px 30px 20px;
text-align: center;
font-size: 11px;
}
.wp-caption img{
margin-bottom: 10px;
}
You may have to adjust the CSS a bit, but that essentially drops in the bottom spacing needed to make it look more rustic and vintage. If you want to REALLY get funky, you can throw in some CSS3 and give it a drop-shadow:
-moz-box-shadow: 0px 0px 6px #666;
-webkit-box-shadow: 0px 0px 6px #666;
box-shadow: 0px 0px 6px #666;
