Typepad Master Class: Customize the Look of Auto-Generated Excerpts

May 14, 2014

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.

We've released a lot of new features to Typepad in 2014, and one of our favorites is the ability to automatically display post experts on index pages with a thumbnail image.

With Custom CSS, you can customize the look of the excerpts. If you don't already have the Custom CSS feature, you can upgrade to Unlimited at Account > Billing Info > Upgrade anytime.

If you want to learn the basics of CSS, check out the latest series of posts on Getting to Know CSS: part 1, part 2, and part 3.

The auto-generated excerpts can be enabled at Settings > Posts. Learn more. All CSS code included in the tips below can be added below any other code you have added at Design > Custom CSS.

Let's get started!

Add Border to Thumbnail Image

A border can be added to the thumbnail image with a quick line of CSS:

body.index .entry-body a img {
     border: 2px solid #000000;
}

If you want to add a frame around the image, insert some padding:

body.index .entry-body a img {
     border: 2px solid #000000;
     padding: 2px;
}

The screenshot below shows you how the above CSS impacts the thumbnail image.

Thumbnail Image with Border

The elements you can change for the border are the width (2px), style (solid, dashed, dotted), and color (#000000). For additional options, see the w3schools article on borders and color code generator.

Style the "Read more" Link

Just like with other text in your blog's design, you can change the style of the "Read more" link. Below is an example of changes you can make to the style:

.excerpt-more-link {
     font-family: Georgia, serif;
     font-size: 14px;
     font-weight: bold;
     padding-left: 5px; /* space btwn excerpt and link */
     text-transform: capitalize;
}

Additionally, you can change how the link appears when you hover over it. The below code changes the color and adds an underline when you move your mouse over the link:

.excerpt-more-link a:hover {
     color: #6E6E6E;
     text-decoration: underline;
}

Force the "Read more" Link to a New Line

If you do not want the "Read more" link to float with the excerpt text, you can easily force the link to start on a new line with the CSS:

.excerpt-more-link {
     display: inline-block;
}

Change "Read more" Text a bit

Although the "Read more" link is hard coded into the template, you can add some text before "Read more" to make it your own. Some ideas: Click here to read more, You know you want to read more, Please read more.

Here's the CSS to make these changes:

.excerpt-more-link a:before {
     content: "Click here to " ! important;
}

You'll want to make sure to add a space before the last " to separate the last word from the "Read more" text. Additionally, you may want to transform the text to be all caps, all lower case, or first letter of each word capitalized.

.excerpt-more-link a:before {
     content: "You know you want to " ! important;
     text-transform: capitalize; /* or uppercase or lowercase */
}

By implementing many of the above elements, the resulting update to the excerpts is:

Customized Excerpts

Here's the CSS used to achieve the above result:

.excerpt-more-link {
     font-family: Georgia, serif;
     font-weight: bold;
     text-transform: capitalize;
     display: inline-block;
}

.excerpt-more-link a:before {
     content: "Click here to " ! important;
}

.excerpt-more-link a {
     color: #000000;
}

.excerpt-more-link a:hover {
     color: #6E6E6E;
     text-decoration: underline;
}

body.index .entry-body a img {
     border: 2px solid #000000;
     padding: 2px;
}

Are you using the Auto-Generated Excerpts feature? If so, what changes are looking to make to the look of the excerpts? Let us know in the comments!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.