WordPress MacGyver Returns: Monkeying with WordPress Captions

1 Flares 1 Flares ×
A monkey riding a dog.

“Hi there. I’m a monkey riding a dog, used as an amusing example of a caption. Why? It doesn’t matter. Hi ho, image caption! Awaaaaaaay!”

WordPress captions are really useful, but let’s face the hard truth – the default appearance can be ugly in some layouts. If you’re tired of looking at uninspiring grey boxes, this post is for you. WordPress MacGyver is back, and this time, it’s captional.

Before tweaking your captions, the first thing you’ll want to do is save a copy of your CSS (I can’t say this enough – always back up your CSS!). Next,  navigate to Appearance > Editor > Stylesheet. Find the wp-caption classes and you’re ready to roll.

With most WordPress themes, you’ll notice a number of classes associated with wp-caption. Here’s a breakdown of what they do and how you can modify them to fit your theme. We’ll start with the most basic and move up.

Caption Image

This class allows you to adjust how your images should look inside captions. It’s unlikely that you’ll need to adjust the caption image class, but just in case you do, here’s an example:

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;}

Caption Text

This CSS class allows you to edit the text that appears in your captions. As we saw in our posts about tweaking your WordPress theme’s text (part 1 and part 2), this can be done fairly easily. Here’s an example of what this class looks like:

.wp-caption p.wp-caption-text {
font-size: 12px;
line-height: 1.5em;
margin: 0;
padding: 10px;}

Caption Alignment Classes

With WordPress, you have the option of aligning your caption to the left, to the right, or having no alignment at all. The caption alignment classes in your CSS define the margins of these different alignments. There are three of them: wp-caption.alignnone, wp-caption.alignleft, and wp-caption.alignright.

This is what one of these classes looks like:

.wp-caption.alignright {
margin: 5px 0 20px 20px;}

The most important thing to remember about margin properties in CSS is that they move clockwise: top, right, bottom, and left. So, in the CSS above, you can see that the caption will have a margin of 5 pixels on top, zero pixels on the right, and 20 pixels on the bottom and left. Depending on your site’s unique layout and feel, you may want to create narrower margins, or allow generous amounts of space.

Caption Appearance

Finally, here’s the big daddy of caption CSS classes. The wp-caption class defines how the caption itself – the box around the image – will appear on your website. Here’s an example of a wp-caption:

.wp-caption {
background: #f9f9f9;
border: 1px solid #f0f0f0;
max-width: 96%;
padding: 13px 10px 10px 10px;
text-align: center;}

The background colour can be changed by replacing it with a different hex code – although be sure to use a colour that will allow the text to be read easily. The padding value defines how much space is placed between the caption contents and the border – increase or decrease it to tighten or loosen the appearance of your captions. The text-align value allows you to determine whether text within a caption is centered or set to the right or left.

The appearance of your caption’s border can also be adjusted. For example, if you wanted a thicker, dashed black border, the border value would become 2px dashed #000000. When working with your WordPress caption CSS, try to mix and match different styles until you find something that merges well with your WordPress theme. 

Photo credit: Joel Telling, Wikimedia Commons

Want more of this awesome content?

 

Sign up to receive our Monthly Newsletter

 
Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

0 comments
1 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 LinkedIn 1 StumbleUpon 0 Buffer 0 1 Flares ×