Typepad Master Class: Styling the Related Posts widget

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:

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.

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.

*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

[Kofla Olivieri]

I like this widget, and used in the past. But I use so many images in my blog now that adding it makes my blog looks too "busy"

[KitchenEncounters]

The more I use this feature, the more I like it, but, after almost 3 years of blogging and almost 600 posts, Zemanta doesn't associate "related" with anything more than "current"... and sometimes it doesn't even do that. What I'd like is for me to be able to go into Zemanta's "related articles", type in the name of a past post of my own that is "related" to the current post and insert it. Now that would be a perfect world...

[Annetta Bosakova]

I love this new feature!! How do I get it to show my own thumbnails from my post and not their default thumbnails that I'm currently seeing?

[Bri]

You can select which posts to add it to when composing, so you can always choose to add the widget to less photo-heavy posts to reduce the "busy" look. Maybe that would work for you?

[Bri]

That might be a feature/option you submit to Zemanta for them to consider. Could be interesting/useful!

[Bri]

There's not a way to select your own thumbnails for the posts you've chosen to display; the selection is automatic. That may be a feature you might want to consider submitting a request for to Zemanta.

[KitchenEncounters]

Really? I think this is your job. Seriously...

[Geetam3g]

hello
i like this new image.how do i get it to show my own thumbnails from my post.

[Bri]

Hi Annetta! Just a follow-up, but it turns out that the thumbnails you see at first are just defaults until your blog's images are indexed. Once that happens you'll see your own post-associated images appear instead.

[Bri]

Once your blog's images have been indexed then they will be used in place of the default ones you may be seeing now.

[Annetta Bosakova]

Thank you for letting me know. Do you know how long it will take to indexed? I started using the feature yesterday and I still see the default thumbs. If it takes a while thats okay, Im just wondering in case I need to fix something.

[Cattail Down]

This is a great idea! A nice, neat, way to spruce up the RP widget to make it fit more into your themes color scheme. Very helpful!
Thanks!

Ricky
www.CattailDown.Typepad.com

[Shemul49rmc]

Thank you very much, I am going to try it on my blog !

[Michelle Lyndon-Dykes]

I would love to give this a go but my internal links do not work. All Zementa does is generate external links. I have been emailing them for months and, although they have tried, they now say they cannot help.

Anyone else experiencing this?

Is there an alternative widget to Zementa because for me, it's a waste of time.

Michelle

[Nameranjeet1990]

thanks you very much.
http://www.educationkranti.com/