Typepad Master Class: Styling Image Captions a la Loft
July 10, 2013
Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.
With the release of the Loft theme, we thought it would be a great idea to share how to add the same image caption styles to your current design. Though this tip does require access to the Custom CSS screen, there's very little effort to be made for the huge impact it will have on your blog and images.
Our Example
When including images, particularly if you run a photo-centric blog, styling the caption can encourage the reader's eyes to not only see the image, but learn more about it. Consider it a way to grab the attention of the reader who tends to glance rather than read every word. Try to catch their attention with the image, then keep them focused longer with an informative bit of text that looks great without detracting from the image itself. If you can hook them with your images and captions, they may just scroll up and read the entire post.
Let's Get Started
You may want to consider setting up a test blog in order to add, edit, and test the changes you're about to make. Create a post in the blog and add an image via the Insert Image tool. Once the image appears, double-click it to launch the image editor. At the bottom there will be a field to add a caption for the image. Insert the text you want to caption the image with, then click to update the image. When you've returned to the compose editor, you'll see the caption below your image. Publish the post.
Note: the caption style that appears in the editor will not be what is seen in the published post once the custom CSS is applied.
For our example image above, the caption is dwarfed by the image and easily overlooked when text is immediately below. We want to make it look more like the captions do in the Loft theme, but with some changes to the font size and family. To do that, we're going to add the code below to Design > Custom CSS.
The Code
/* Set up image so that caption position and styles are correct -- Do Not Change! */ .entry-content .photo-wrap, .entry-content .photo-wrap a { position: relative; }
.entry-content .photo-wrap {
position: relative;
font-size: 1em;
box-sizing: border-box;
padding: 5px 0px 10px;
} /* Style the caption text -- May Edit Lines with Comments */
.entry-content .photo-caption {
position: absolute;
background: rgba(0,0,0,0.3); /* rgba color value and opacity -- black, 30% */
color: #fff; /* text color */
bottom: 10px; /* position of caption on image */
margin: 0;
width: 100%;
padding: 2% 0%;
overflow: hidden;
text-align: center; /* align text to center */
font-family: Palatino, Georgia, serif; /* serif family of fonts */
font-size: 130%; /* size set 30% larger than 100% of post body size /
font-weight: 400; /* 400 weight = normal, 600 = bold */
}
The Result
Very
similar to the caption styles used in Loft, the only changes being the
font family and size, an already sweet photograph now shares something
extra with its viewers yet retains its great look.
Extra Edits
Don't like the italicizing the default caption style still displays with the above edits? That's a quick fix! Add the following attribute to the .entry-content .photo-caption CSS group:
font-style: normal;
Want the caption to disappear when an image is hovered over so that the whole image can be viewed? No problem! Add the following line at the end of the page:
.photo-wrap:hover > .photo-caption { display: none; }
Add, Preview, Save
Let's go over what you need to do to set this up:
- Copy the CSS we provided above, including one or both of the extra edits we gave if you'd like to use them;
- Go to Design > Custom CSS and paste the copied code;
- Click Preview (the Preview screen shows the most recent post, so make sure there's an image with a caption in the body to see the change);
- If something doesn't look right, close the Preview and make your edits;
- Once satisfied, click Save and load your blog.
That's it! Five steps, a couple of minutes (if you use the code as-is), and you've made a design decision that both you and your readers are going to enjoy.
Did you use this tip? Make a lot of customizations to your image captions? Share what you've accomplished with us and the rest of your Typepad community. We're looking forward to seeing what you've done!