Previous month:
June 2013
Next month:
August 2013

Posts from July 2013

Typepad Master Class: Styling Image Captions a la Loft

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

Default Style

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

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:

  1. Copy the CSS we provided above, including one or both of the extra edits we gave if you'd like to use them;
  2. Go to Design > Custom CSS and paste the copied code;
  3. 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);
  4. If something doesn't look right, close the Preview and make your edits;
  5. 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!

Featured Blog: House Wren Studio

NAME: Charlotte Lyons
BLOG: House Wren Studio
WHY YOU'LL LOVE IT: Charlotte Lyons designs and makes things in a variety of styles and media. Still inspired by the humble simplicity of traditional art and craft and the inventive use of repurposed materials, Charlotte’s work is infused with the vintage charm of handmade keepsakes. Her blog is a collection of stories, photos, and projects that reflect a carefully curated aesthetic.


FOLLOW: Typepad | Twitter

The Business of Blogging: Blogging for Business!


Welcome to our series of posts on the business of blogging! Each Thursday for 6 weeks, we'll debut a new post designed to help you build, market, and successfully create a small business with your Typepad blog. Late to the party? Check out our other posts about the Business of Blogging.

Last week in our Business of Blogging series, we talked about how to integrate your shop into Typepad. Hand in hand with this, there are many ways that you can promote yourself and your items right on your blog with blogging.

For instance, maybe you sell handmade crafts on your blog.  This could be anything and everything from greeting cards to scarfs to birdhouses.  Whatever you make, you have to obviously MAKE it to sell it.  Having a post or a series of posts on making your project is a great way to draw attention to your items.  Here are some ideas:

  • Start from the beginning.  Have an initial post about what's required to make your project including all of your materials, equipment, and planning material. It helps to illustrate how much work goes into making your items. Take pictures of the materials before and after they become your item.
  • Tell your item's story. What made you want to create this item?  Was there something particular that inspired you, be it an event or a person?  How did you learn to make it?  Did you take a class or are you self-taught?  Has someone encouraged you that you're thankful for?
  • Show your work. Lots of work goes into making your items.  Take pictures of some of the steps that you go through.  The more work you do, the more you can feel justified in charging for your item!
  • Display the final results. Your items are awesome!  Show them off!  If it's a clothing item, get gussied up and wear it!  If it's a toy for your pet, take a video of you playing with your puppy or kitty!  The ideas are endless to show how amazing your items are and how they can enrich someone's life by purchasing them.

These ideas can be applied to all kinds of items that aren't handmade in the same way, like art work and photography.  Show how much work goes into finding just the right subject that you want to take a picture of or paint.

If you're creating something even more elaborate - maybe building furniture or sewing a wedding dress - make several posts about the process.  After all, your work is intricate.  It's unlikely that just one post could cover all of the effort that goes into it.

Another way to engage your readers is to ask them what they think.  Is there a group of people that this would make a great gift for, like moms or college graduates?  Are there other colors, fabrics, or styles that would nudge them over the edge into making a purchase?  Perhaps there's something you can do just slightly different that would open up a whole new avenue of sales!

Bottom line, the more you blog about the process and the item, the more opportunities that you have to catch a reader's eye and get them interested in what you create.  As we all know, more opportunities means more possible sales.  Instead of thinking "ABC: Always Be Selling," think "ABB: Always Be Blogging!" instead.

Featured Blog: Daisy Janie

NAME: Jan DiCintio
BLOG: Daisy Janie
WHY YOU'LL LOVE IT: With an ardent passion for pattern, texture, line & form, Jan DiCintio has been creating surface designs for more than 10 years. As a self-taught artist, her curiosity for trying new materials as well as her desire to master techniques allowed her to design, construct, paint and/or stitch any idea she could conceive. The Daisy Janie blog is full of photos and anecdotes from the field, DIY projects, and plenty of inspiration - come find yours!


FOLLOW: Typepad | Twitter