One thing I have received the most attention about regarding the design of this blog are those yellow boxes in my sidebar that display random posts on the blog. People like it, and I got a comment on my last Thesis Thursday post asking how to create that box.

I decided that this week I would create a simple tutorial to show you how I did that effect here because I think it is a pretty cool trick.

This tutorial is easily adaptable for use on non-Thesis blogs, but for the sake of the series — the code will be written with Thesis in mind.

1. Preparations

Just to get a little prepared here, these are the things you will need for this tutorial.

• Access to the custom.css file
• Depending on what box you want (or if you even want more than one of them), you will need to use plugins from Rob Marsh. Your choices are:
  • Recent Comments
  • Popular Posts
  • Random Posts
  • Recent Posts
  • …for any one of those plugins, you need the Post-Plugin Library for them to work.
• Add a Widget in your Widgets panel

Once you choose what plugin you want, download it, install it and add it within your Widgets panel. Simple enough preparing, right? As long as you know what you want, the hard stuff is out of the way.

2. The CSS

Depending on the plugin you use, the CSS will be different. But the only difference is the #ID that is used, and that is easily changeable. So, the CSS code I use here is pretty simple, but I will explain it:

#random-posts li {
	background: #FFFBCC;
	border: 1px solid #E6DB55;
	line-height: 1.4em;
	-moz-border-radius: 5px;
	padding: 0.9em;
	-webkit-border-radius: 5px;
}

So what we have going on up there is pretty simple. We have a background which will allow you to switch up the color of the box, the border will surround the whole think, the line height controls the spacing between each line of the link, and the padding is the spacing from the box to the text. The -moz-border-radius & -webkit-border-radius will make the box rounded without images. They will only be round in Safari and Firefox, but it’s a neat trick to those who can actually see it.

I have colored in #random-posts because that is the thing that will change depending on which plugin you choose.

The ID’s you will need to use for the other plugins are below:

• #recent-posts
• #popular-posts
• #recent-comments

3. Customizing the output

You should have the yellow box around the link by default. It looks kind of boring, but because of how flexible this plugin is, making it look better is not a problem at all.

There are a lot of different things you can add to the box to make it look cool. The plugin makes adding things so simple too, and you really don’t need any coding knowledge at all to do it.

So to start, go to Settings → Recent Comments/Recent Posts/Random/Popular Posts → Output → Output Template. This is where we can add anything to the box. I will go over the two things I added to my boxes, which i think look sexy as hell.

66x66 Image

This will only work if you use Thesis teasers and have the 66x66 images for each post

You can paste this code into the Output Template box:

<li><a href="{url}"><img src="{custom:thesis_thumb}" width="66" height="66" alt="" /></a>{link}</li>

NOTE: If you let Thesis auto generate thumbnails, replace thesis_thumb with thesis_post_image in the code above.

The code calls the thesis_thumb custom field from your posts and puts it into the box. You will also need to add this CSS to make the image look right:

#random-posts img { float: left; padding-right: 8px; }

Add the date, and other stuff

If you look in my box, there is a date of when the post was published. The date can be replaces with a variety of things like comment count, views, tags, and a lot more. The code below will show you how to float things to the right.

First, replace the code in your Output Template with this:

<li><a href="{url}"><img src="{custom:thesis_thumb}" width="48" height="48" alt="" /></a>{link} <div class="right">{date}</div></li>

Add this to your CSS:

#random-posts div.right { color: #baaf2e; float: right; font-size: 11px; text-transform: uppercase; }

I added a little style to change the font color, size and case. This will bring whatever you wrap within <div class="right">...</div> to the right. But there will be a bug.

If you look towards the bottom of my box here, you will see a slight overlap

You will also need to add overflow: hidden; to the very first piece of code you added in Step 2. When the image is in the box floating, it will overlap the box, making it looks really weird. So, by adding that line to your CSS, it will make it look right, and the text will be inside of the box again.

Simple Enough, Wasn’t It?

That was pretty simple wasn’t it? The plugins used in this tutorial are extremely powerful, and allow you to customize your output extensively.

I hope you enjoyed this tutorial, as it was the first tutorial in the series. I hope you stick around for more posts here, and next week’s Thesis Thursday post! Is there anything you guys want covered for next Thursday?

PS: This is a really cool Thesis resource. Matt Langford wrote up a kick ass list of 100 Resources For Thesis you guys should definitely check out!

MAY 21ST, 2009