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 : )
Post Tags: captions css , image captions , images , photos , wordpress captions
Stumble it!
4 responses so far ↓
1 Shan in Austin (1 comments.) // Sep 14, 2008 at 9:30 am
Thanks for the step-by-step info. I can see a lot of potential benefits with the caption option, it is just a matter of getting comfortable with the various tools available. Still, I don’t see what is so bad about the pink border with the white lettering. (Just kidding, of course!) How about a yellow border with white lettering? ( :
2 Charles Richey (6 comments.) // Sep 14, 2008 at 12:59 pm
Dave, I love the Mary Kay border.
Captions are pretty useful. I usually just photoshop the picture instead.
3 Ki Gray (3 comments.) // Sep 14, 2008 at 2:07 pm
As far as the speed for the javascript, I have been noticing that web applications are getting slower. Its a little odd. Cpu’s keep getting faster so it makes sense for desktop apps to get faster. But with blackberrys and other mobile devices on the rise the average web user’s connection is not getting faster.
4 Dave Smith (556 comments.) // Sep 14, 2008 at 5:22 pm
Ki,
I think it is understandable that internet connections are going to get slower. Streaming movies, tv shows, music, all of these take tremendous amounts of bandwidth, way beyond what the internet was initially designed for.
I’m never excited when I hear things like “You can now watch movies over the internet from Net Flix” All this makes me grind my teeth because I want the bandwidth for useful things like the Lab and Twitter : )
Leave a Comment