If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
One of the first things I noticed about WP 2.6 was the inclusion of captions for photos. I hated them. Well, I didn’t hate them. I hated having to deal with the CSS to get them to work. I also didn’t like the javascript window which opened (very slowly I might add) in order to enter a caption for a photo.
Once I figured out how to use them, and became more patient waiting for the window to open, I’ve discovered I like putting a Caption under photos.
- It gives me another place to make a point in the post.
- It gives me a way to add humor to a post by including a thought under the image instead of in the image
- It adds some nice formatting and styling to posts.
Now I use captions all the time. I still don’t see them being used much on other blogs.
I wanted to tweak the CSS to make them display larger text and I’ve been thinking about changing the border and font colors as well.
At first I thought they were a nuisance now I find them an opportunity to communicate and bring another level of interest to a blog post.
You too can tweak the captions CSS and put your own brand on it, but I would suggest you stay away from pink borders with white text.
Customizing Your Captions
Go to Design, Theme editor and edit your style sheet. This is assuming you have already included the Captions CSS Code in your theme.
.wp-caption {
border: 1px solid #000000; (Color of the border)
text-align: center;
background-color: #333333; (Color of the background around the image)
padding-top: 4px;
margin: 10px;
-moz-border-radius: 4px; (Making the Corners Round 3 is the default)
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}Further down you will see:
.wp-caption p.wp-caption-text {
font-size: 12px; (I changed this from 11px to 12 to make the text larger)
line-height: 18px; (Increased the line height to accommodate the larger text)
padding: 0 4px 5px;
margin: 0;
color: #ffffff; (Added this color statement to change the color of the text to white instead of default black)
}
If you haven’t started using Captions yet. Take them for spin, you might find out you like them.
But please, don’t use pink borders with white text. Promise me you won’t do this : )
