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

With another Thursday comes another Thesis Thursday. This would be the second of the many posts in this everlasting series, and in this Thursday’s post, I am going to showcase 10 blogs powered by Thesis that don’t look like they use Thesis.

The sites showcased here you may have not seen before, and I can tell you that I did not just pluck out these sites from the Thesis Showcase at DIYthemes. I just figured that it would be pointless to show you sites you have already seen, so I took the extra time to find some very unique themes from the Thesis community.

Why Do This?

The reason why I am showing you these blogs is because the one complaint I hear a lot about Thesis is that “all the blogs that run it look the same.” I want to prove to those people that you can use Thesis and not leave much to recognize it later by showing off these awesome blogs.

WPBandit.com

Not only do they release some cool Thesis themes at their site, but they are running on a very cool theme themselves!

The design is not only very appealing to the eye, but the additions to the header are what makes this theme so great to look at. Navigation is very easy, and the way the content is displayed on the blog is very elegant and totally readable.

Visit Site

MakeThingsFair.com

Not only is the cause for the site amazing, so are the customizations made to the theme!

At first glance, the only thing that gave this site away are the forms in the sidebar, but pretty much from there it is all solid customizations.

This theme is rockin’ the 3 column look, and really makes the content stand out from the rest of the site by adding an easy to look at yellow background to each title. Truly, a great use of the Thesis theme.

Visit Site

Kuronoir.net

I can’t tell you how to pronounce that, but I can tell you that this is one pimpin’ Thesis customization!

Here is a great example of how well you can make Thesis look by inverting it’s original colors and going dark. There are so many cool things about this design. To name a few, the borders around the whole wrapper, the use of images as headings in the sidebar, an awesome header and footer, and plenty more.

Visit Site

Ahjira.com

Someone I have talked with quite a bit on Twitter, and also a bearer of a nicely customized Thesis.

What I love most about this is the effect in the header (for all of those crazy colors), and how she connects the subscribe box between the header and sidebar. Besides that stuff, she has some cool gradients all throughout the blog to add a 3D effect to her containers, as well as a great navigation menu and sidebar, along with a great, big footer.

Visit Site

PhillipBarron.net

Definitely the most interesting theme in this mini-showcase, however Phil Barron has really done a number on his theme.

All throughout the design, he has some really interesting textures going on. A cool grungy on as the background, a rough texture for the content box, and a field as his footer. The other thing is great about this is the trick he did to keep the navigation bar at the top of the page at all times. Great work Phil.

Visit Site

Blogussion.com

Shameless self promotion or is this actually a well done theme that you may not have seen?

I designed this site, and I did my best to take out the standard Thesis look in just about every aspect of the design. A simple header with plenty of links and simple navigation, a tricked out sidebar, and an overhaul of the standard comments look.

Visit Site

CreepyLA.com

A blog full of creepy content, but there is nothing creepy about their awesome customizations.

The logo is really cool, as are the textures used throughout the site. I personally think that the font they use on the site is really fun, matches the site’s theme well, and more importantly — uncommonly used.

Visit Site

BlueAnalytics.com

I love the simplicity here, and the way the content is organized is totally unique. It is light on images (as a matter of fact, I only see 8 images, 7 of those being tiny icons) and uses the sexy Trebuchet MS to support that “clean” vibe the site gives off.
No Longer on Thesis

CuteOverload.com

Cute animals and a really cool design. What’s a better combination?

Even though this site has that standard Thesis navigation, I still find this to be a very unique design. The colors, the images, and the amazing header are all what contributes to this awesome Thesis theme.

Okay, maybe those little furry animals made me add this design to the showcase. I mean seriously, look at those dogs. One of them is literally eating the other one.

Visit Site

Shatterboxx

Yeah, really, it’s Thesis. Seriously.

The simplest one in this showcase, this design has no sidebar, or anything else you would expect from a site using Thesis. The header is beautiful, and you have to admire the whole one column look.

Visit Site

Need Tips For Customizing Your Thesis theme?

With all of those awesome sites listed above, I don’t blame you for feeling like your Thesis theme just isn’t meeting it’s true potential in looks.

There are tons of sites out there for Thesis to help you customize it. Not a lot of people understand the hook system, so these are the kind of sites you may be interested in for customizing Thesis.

• Thesis Hacker
• Thesis Theme HQ
• Sugarrae
• Kristarella
• Blogussion
• MattFlies
• Berchman
• HowToMakeMyBlog
• GrayWolf
• Franklin Bishop
• DoubleMule
• FergusWeb
• Rick Beckman
• Empty Cabin Media

Enjoy! That took like 2 days to do, such madness.