Typepad Master Class: Styling the Related Posts widget

May 01, 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 integration of the Zemanta widgets, allowing you to add related posts and links to your blog, it's the perfect time to share how to make customizations to fit your blog's design. You'll need to have access to Custom CSS to complete this class, so make sure you're a Pro Unlimited user or higher.

The Default Look

When you use the Zemanta widget to add related posts to your blog, the widget will appear at the bottom of the post you publish. The default style of the widget will display like the image below:

Default style

Simple enough to fit in with any design! But what if you don't want the default look? We have two customization options below: (1) very basic changes, perfect for making the widget fit your color scheme; and (2) advanced changes, for those of you who like to shake things up a whole lot. It's pretty cool.

Basic Changes

The basic customization involves changing the style of the widget title and border color--two very simple and quick alterations that can make the widget fit your design's color scheme better.

Related-articles-basicstyles
Our example above involves small adjustments that have a decent impact. The title now appears in all caps, has had a bump in font size, and now shows off in a medium turquoise with some extra padding in the hips. The border color has been changed to match the new title color as well, tying it all together. 

The CSS:

/* change border color of zemanta block */
.zemanta-related { border: 1px solid #02849C; }

/* change header title */
.zemanta-related-title {
color: #02849C; /* font color */
text-transform: uppercase; /* all caps */
font-size: 12pt; /* increase size */
padding: 3px 10px 0px; /* make some room */
}

You can edit the hexadecimal color codes (prefixed with #), border style (1px solid), and text transformation (uppercase), to make it fit your own blog's color scheme. If it's not enough of a punch for you, then check this out...

Advanced Customization

The advanced customization shown below makes use of the basic changes just discussed, then lies to its dad and sneaks out of the house so it can attend the DTV dance-off.

Related-articles-fullstyled2a
Related-articles-fullstyled2b*note - the thumbnail size has been increased slightly;
were it to be increased any higher, the images would appear pixelated.

Pretty great, right? Now let's talk about it behind its back.... The first image shown depicts the new default look with advanced styling applied. The second image shows off the slick hover state when you place your cursor over one of the articles. Didn't know that it could look so good? Neither did it!

A lot of changes occurred to make the above happen, and it's easier to review the notes we added to each line in the CSS than try to list them out in paragraph form. Suffice to say, pretty much everything in the widget was touched. Please take the time to review the property notes so you know which line affects which part; it'll help you when you want to make your own edits.

Since the advanced customizations use the basic CSS changes we already addressed, you can get started by pasting in the earlier basic code. Once that's in place, copy the code below and append it to your existing CSS at Design > Custom CSS.

The CSS:

/* remove box shadow around each article */
.zemanta-related a { box-shadow: none !important; }

/* reposition each article with margins */
.zemanta-article-ul { margin: 10px 0 10px 15px !important; }

/* style base for each article */
.zemanta-article-ul-li {
width: 320px !important; /* width of article */
background: #eee !important; /* background color to stand out */
padding: 20px 10px !important; /* give it some room */
}

/* adjustments for article link */
.zemanta-article-ul-li a {
float: left !important; /* float */
width: 150px !important; /* set new width */
padding: 0 0 0 10px !important; /* adjust spacing */
font-size: 10pt; /* increase font size of post title */
margin-left: -20px; /* reposition to left 20px */
}

/* adjustments for thumbnail */
.zemanta-article-ul-li img {
width: 100px !important; /* increase size of img */
box-shadow: 1px 1px 5px #333; /* add fancy shadow */
margin-left: 20px !important; /* fix position of img */
}

/* set hover state to make it pretty */
.zemanta-article-ul-li:hover {
box-shadow: 1px 1px 2px #000; /* add shadow */
background-color: #C0E4EA !important; /* change background color */
}

That's all there is to it! Are you stoked to try these changes in your own blog? Did your nerd power level up and you're eager to make your own customizations? If so, make sure to share what you accomplish with us and your fellow bloggers over in the community forum!

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.