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.cssfile - 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.
66×66 Image
This will only work if you use Thesis teasers and have the 66×66 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!
{ 10 trackbacks }
{ 94 comments… read them below or add one }
Nice! That output template thing is cool too. I haven’t seen that before.
It’s worth noting, before anyone else comes to complain about it, that these CSS rounded corners don’t work in IE. Personally I’d rather give the good browsers rounded corners and settle with square corners in IE than use image backgrounds.
I didn’t think they did either, so I only said that they would work in Firefox & Safari. But according to Double Mule down there, they work in IE.
I’m surprised quite frankly!
Thanks for stopping by, really appreciate it.
Sorry, I didn’t see the sentence about Firefox and Safari, and I re-skimmed the post in search of “IE” to make sure I didn’t put my foot in it, but failed.
They will also work in Camino (because it uses the Ghecko rendering system) and Chrome (because it uses webkit). Double Mule is mistaken.
We’ll admit it… we read and bobbed our heads like a team of halter-broken ponies as we read this in Firefox.
We then pasted the address into IE with the full expectation that the rounded corners would be legible but exhibit squared edges.
Check our teeth and call us slouch-backed — they are round! In Internet Explorer. You sir, kick serious tail. We shall eat a sugar cube in your honor. Perhaps several.
Woah, it works? I mean, yeah, duh! Of course it works.
Great post, it seems even easy enough for me, I would like to see a post Footers
Hold that thought for a couple more days…
Nice job! This is something I’ll definitely look into. Also, gives me incentive to start using thumbails.
I use thumbnails both here (duh) and on my other blog, Blogussion. I think it adds a nice touch to the design, and if you have the time to make those little images then I say go for it.
What a great tut, I wish I used thesis a little more now.
One quick note, on the SIMILAR STUFF list under the post you may want to add a list-style-type:none; to the css. Their is a black dot over the thumbnail image.
Thanks Montana!
I added it to the CSS, thanks. I never saw those boxes here, are they still there for you? Thanks for pointing that out man.
Its fixed nicely now. Not sure what you meant by boxes though. Blogussion unfollowed me,
Sorry, I meant the bullet you were talking about.
Woops, I decided to try and use a cool Twitter tool to follow people who have followed us, and it looks like it unfollowed some people too? I’ll fix it for sure, sorry about that!
Humans have a special system which allows them to regurgitate their food. Mules do not. As such, the sugar cubes are unrecoverable.
And but oh how we should like to blame that pesky rooster — he has pulled some fast ones in his time. But we have no excuse but haste. The rounded corners work lovely in Internet Explorer… because “Customizing the output” has an image beside it. Not code.
Looks great in IE. Images often do. Can anyone help lead some of our number out to pasture. It seems we’re overdue. That old gray mule in particular — she’s not what she used to be.
Heh, I was going to point those screenshots out above, because I read this comment via email and had no idea what the heck you were talking about! I get it now.
So I made a test page to see if it worked in Chrome, and all versions of IE:
http://dev.complimedia.com/test.html
And I submitted it to browsershots.org to see how it turned out, you might have to re-request the images depending on if they take them down:
http://browsershots.org/http://dev.complimedia.com/test.html
I can’t see the pictures, so I just used a different IE tool that will allow you to see the sitw from IE5.5-IE8 B2 and the corners weren’t round.
http://ipinfo.info/netrenderer/index.php?browser=ie8&url=http://dev.complimedia.com/test.html
But I still think the box looks good without rounded corners, that was just added for an extra effect.
Yes I agree, the rounded corners are just extra icing on the cake. The reason I did this quick test was in response to earlier comments. Thanks for the netrenderer link, that is something I have been searching for a long time.
Results:
Worked on google chrome, didnt work in IE 5.5−8… damn you IE! damn you to hell.
Man, forget IE. :p I just don’t support anything below IE7 anymore. =/
Ya pretty much, if I have the choice I code for standards compliant browsers and IF LTE IE6 i put a nice warning informing visitors that their browser is out of date, a security risk, and is responsible for messing up my design.
Some clients will insist u have IE 6 support, well if thats the case just take out the CSS!
I agree as well. They’re good without round, just a little something for those with superior browsers.
Dude, you rock! (And thanks for the link!)
Write a few more posts like this and I’ll have no problem writing a “100 MORE Thesis Resources” post!
Well, there is a new one every Thursday! Just give me some time, I think I can hit 100!
Very details tutorial. I always wonder how to do it.
Hello Alex, I’ve copied everything as as explained and it shows up fine but the images are not showing up, I also changed the thumbnails to show in the teasers 66×66, so hmm, any ideas
thesis_thumb, In the thesis post, currently I don’t put a url for the thumbnail, I let thesis resize by itself, do I have to start putting a url here besides the Post Image, if so, then what, I just copy the same url
Just check the posts, a custom field has to be made for the images, I’m 99% sure, even if it auto-resizes. Try using that custom field instead of the one I said in the tutorial.
Got it Alex, thanks anyway, hey they have to necessarily be 48×48 or can we tool around with this !
Any size you want, I just made them smaller so they don’t overwhelm anyone!
Ok, so I added the the same url I add to the Post Image and they look great in the Popular plugin but when the those are in the teaser the Thumbnail Image is the same size as the regular post image, big, not a little teaser 66×66, so I’m a bit confused.
I ended removing the Thumbnail Image url to have teasers go back to the Thesis Option default of 66×66.
So am I suppose to edit the Post Image to 48×48 via an Image application for all my posts ie. paint.net etc. If so this seems kind off annoying, although my gut instinct tells me that perhaps I’m missing something else. Would love your insights, its a great tutorial and I’m almost there, thanks again
Thanks for answering all my questions, I finally have it working.
Hey suggestions why not follow up with the Similar Posts setup from the same gentleman of the recent, popular, random post. So we add them to the post
You can just take the same concepts and apply them to the similar posts plugin, but of course you can experiment with it and switch it up too.
Thanks for the great tip on creating color widget boxes. I had looked before on the web, but couldn’t find anything.
Make sure to tell all of your Thesis using friends now.
Fantastic. Can you tell us how you do the similar stuff and powered by Thesis thing at the end of your posts? I found a tutorial for how Copyblogger does it at the end of his but I can’t find it anymore! If anyone knows what site has it please let me know — otherwise, I’ll wait for Asnio to explain.
This is a wonderful site for such a young soul. You are going to be amazing when you have finished school and have more time and freedom to do what you want.
Thanks for the comment Somone!
I have included the post footer in a post on my other Thesis powered blog here: http://www.blogussion.com/blog/thesis/4-ways-customized-thesis-theme
All you need to do is copy and paste into your source, and all should be fine!
I appreciate the comments toward this blog, really glad you like it.
Hey there, is there code that I can add into my own custom widget? By that I mean, I want to make my own list of “Favorite Posts” and would like to have the background a different color, with a rounded border, etc.
Thanks
Yes, just add the Text Box option in the Widgets panel, then open the source and find the ID of the box, then just edit it to fit into the code posted in this tutorial.
Do you understand what I’m saying?
Thanks for the rapid feedback. I think I know what you’re saying, but I just tried that with http://www.elderguru.com — the “popular posts” text widget in the left sidebar. I entered the following into my custom.css file, but nothing changed:
#text-455311921 li {
background: #FFFBCC;
border: 1px solid #E6DB55;
line-height: 1.4em;
–moz-border-radius: 5px;
padding: 0.9em;
–webkit-border-radius: 5px;
}
Flip that around, try this:
li#text-455311921 {The code you have in your source is different than mine, so a tiny adjustment is needed.
Oops — I should have caught that — thanks. It works now.
Is there any way to limit the width of the box to the width of the text? Meaning, right now it’s pushed right to the edge of the sidebar, it seems, further than any of the text in that sidebar. It looks a little strange that way.
Again, it’s on http://www.elderguru.com
Thanks again.
Never mind, I just adjusted the padding — duh! Thanks again.
Awesome! Glad it works for you.
Cool, I actually was wondering how you did that to. I think I will implement it on my blog. Thanks!
I’d love to see some color on your site when I go to it next.
Thanks for the tips. This is exactly what I was looking to do and you’ve explained it so clearly. I was wondering if I might be able to apply to a category rather than use the plugins. I have my ‘Popular Posts’ in a category of their own and I wanted to do that instead of using the plugin.
Do you know how I could do this?
You sure can Alex, try putting the code with this as the ID instead of the one I gave you:
.widget_popular liSo the CSS should be:
.widget_popular li{ background: #FFFBCC; border: 1px solid #E6DB55; line-height: 1.4em; -moz-border-radius: 5px; padding: 0.9em; -webkit-border-radius: 5px; }Let me know if you have any problems!
Worked perfectly! I always like to see if I can use something more inline instead of adding more plugins if I can, so that tip is much appreciated. I wish I could use the thumbnails too, but I’m not blessed with the greatest amount of bandwidth from my host, so I’m concerned it might be a problem. Here I was thinking Flickr was perfect for me and my blog ^^”
Thanks again!
Alex´s last blog ..Weekend Round-Up 6/20
Hi, how can I use this specifically to style the Killer Recent Entries widget? Thanks for your help.
Sharon Hurley Hall´s last blog ..Freelancing Through The Summer Vacation
That feature uses the class of
widget_killer_recent_entries, so we can easily adapt the CSS code to make the Killer Entries work with this tutorial!Try this out:
.widget_killer_recent_entries li { background: #FFFBCC; border: 1px solid #E6DB55; line-height: 1.4em; -moz-border-radius: 5px; padding: 0.9em; -webkit-border-radius: 5px; }Let me know!
Alex´s last blog ..7 Clever Strategies For Earning More Followers on Twitter
Looks great, but I can’t get my widget to look like that. I want to have a specific image and a link to one post in particular (no date). I downloaded the Post-Plugin Library and Random Posts plugin.
CSS
#random-posts li {
background: #FFFBCC;
border: 1px solid #E6DB55;
line-height: 1.4em;
–moz-border-radius: 5px;
padding: 0.9em;
–webkit-border-radius: 5px;
}
#random-posts img { float: left; padding-right: 8px; }
Random Post Output
{link}
Can I select the post and image for different widgets.? Is this even the right plugin?
What settings do I use? How were you able to have so many widgets using the random plugin.
How do I add the image and link?
Clearly, I’m missing something here.
All I know is to cut and paste stuff and put it where it is recommended so I really need a basic step by step.
Thanks!
Dear Alex,
Thanks! The boxes look great and I got it done first time through which says your tutorial was well written. Because the boxes are based on ‘teasers’ I find that there is duplication between the teasers themselves and the boxes. Is it possible to have your boxes not appear on the front page with the teasers but only in individual post pages?
Thanks again,
William
William Todd´s last blog ..The Horns of the Dilemma
Hey William,
First, thanks for the comments on this tutorial! I appreciate it and am glad you are putting it to good use.
Since you use the recent post plugins, I guess that problem would come up. But, like I said — the plugins by Rob Marsh are extremely versatile and come with plenty of options! And there is an option that would fix this issue.
Take a look at this screenshot:
http://www.grabup.com/uploads/8d857c077ead6cad4b30c37d1eb24c8e.png
Basically, you want to set “Omit latest post” to “Yes.”
Let me know how that works out for you.
Alex´s last blog ..4 Unusual (And Long Term) Ways to Promote Your Blog Using Forums
Thanks. Almost what I wanted. I found the solution on the plug in creator’s q&a:
#
I don’t want my post plugin widget to show on the main page, just the single post page. Is that possible?
Yes. The widgets now let you choose the condition under which they are visible. The condition can be set using any combination of WordPress Conditional Tags, e.g., ‘is_home()’, ‘is_category()’, or ‘is_page()’.
In this case the right condition is ‘is_single()’.
So I went to the placement page and added this code “is_single()” to the condition field in the output after widget section. That gave me what I wanted.
Thanks again,
William
William Todd´s last blog ..The Horns of the Dilemma
Wow, honestly I just skimmed through your comment and thought I understood what you were asking. Sorry, you must have thought I was crazy since that has like nothing to do with what you were asking!
Glad you got everything working though!
Alex´s last blog ..4 Unusual (And Long Term) Ways to Promote Your Blog Using Forums
Does anyone know if this tutorial is working on wordpress 2.8? It is not working for me.
This tutorial uses a plugin that is compatible with Wordpress 2.8, and a little CSS. It should work, can I see your blog? And what have you done so far?
Alex´s last blog ..5 Funny Things Bloggers Do To Make Their Blog Look More “Official”
It is all good, stupid mistake, I just forgot a } somewhere and it caused a whole mess!
Thanks for the tutorial, it helped a lot. I was wondering if you were going to be doing a tutorial showing how you made that slick subscribe box on your blogussion site. I have a few ideas for how to use something like expanding from that kind of feature and a tutorial as a jumpoff to start with would be great.
Anyway, keep it up, great stuff man.
I have actually. I was going to do a 2 part tutorial on it!
Alex´s last blog ..6 Plugins You Should Always Have Ready For Blog Emergencies
cool, i will keep my eyes open for it
Great article — I’ve applied your ideas to my sites sidebar — but have a question; while I can get the images to show up for the popular post, how do I get gravatar images to show up for “recent comments”? Current output settings for popular posts is:
{link}
How to I tweak this so I can get gravatar images to show up for the “recent post” plugin? I’ve been trying to figure this out for a few days — if you’ve got the time to help it would be super appreciated
Rand´s last blog ..Pepsi; So-So Social Media Campaign.
Hey Rand,
The code to put gravatars in it is: {gravatar}
Alex´s last blog ..6 Plugins You Should Always Have Ready For Blog Emergencies
Hey Alex — ya I tried that, but then it puts in the default gravatar image — it can’t be css’d to look like the “popular posts” images. Sorry I think I copy pasted it yesterday but it seems it didnt take in last post — heres another attempt:
{link}
So here I’m able to make the “popular post” pic smaller; but if I use {gravatar} then I’ll just get a big 80×80 gravatar sitting there; is there a way to request the gravatar, but then also have it css’d so it will look like the “popular post” entry?
Thanks for your time btw — love the site — your links are very helpful.
Rand´s last blog ..Pepsi; So-So Social Media Campaign.
and another attempt: “{link}“
Rand´s last blog ..Pepsi; So-So Social Media Campaign.
Hmm — sorry posting the code doesn’t seem to work; it keeps getting reduced to “link“
Rand´s last blog ..Pepsi; So-So Social Media Campaign.
This is an awesome tutorial. Very easy to follow and i managed to get it working for Popular, Random, Recent posts within 15 minutes
Thanks. If you are interested to see how i modified it, check out my blog at PassportChop.com
ZQ
ZQ @ Travel Blog´s last blog ..Unusual Hotels: Sleeping in a Jumbo 747 Jet
Alex, Very nice info. Thank you! Keep it up.
However, do you have any idea on How to remove the — “Recent Posts /Recent Comments / etc. ” in the h3 (i think)? Just like yours. No Header above the widgets.
Btw, I didn’t put anything in the Title of the widget so I am guessing there should be a tweak on it.
Thanks!
now thats the way to tell..I seen this post about 5–6 different places..and i was try to customize my thesis @ http://unlimitedblogging.com from last 3 days
now finally i reached here from google as i was looking for footer customization..and finally i was able to add sidebars as i wanted to..
Thanks alot..now i am trying to add footer widget i hope it will work..i vl let u know the update..
thanks
ankit´s last blog ..Fight stress– have sound sleep
Thanks for the great and easy tutorial. Love your info and sharing idea. Thanks once again
steppinout´s last blog ..Tips To Make Sure Your Sponsored Themes Won’t Get You Banned From Search Engine
Its not working on my blog. Widgets appear without any boxes. The plugin you refer to says its only WP compatible up to 2.6. Is there some way to make this work with other widgets besides the ones you mention?
Jonathan Garro´s last blog ..Interesting Baby Names and Stronger Patriotism Through Kickball
how to add Views and Comment count at the bottom of the recent post or popular post ? because it’s not working if we simply replace date with view or comment count , any trick for doing this ?
Replace date with postviews…
Straight forward and easy to implement. Thanks.
PSP Go´s last blog ..Buy Sony PSP Go – Quick Buying Q&A
This worked. In the output tab, you have the thumbnail size — width=“48” height=“48”
I just stumbled upon it but if we don’t create the thumbnails, the plugin will auto generate the image to the right size.
If it does it on the fly like above, does the page load time increase compared to if the thumbnails were created ahead of time?
you are just cool –no words to thank u
Thank you for the detailed tutorial. I guess I need to work other way as I do not own thesis theme.
Ricky ´s last blog ..Remove Ikee iPhone Worm Easily[How-to]
excellent tips.. I m looking for this from a long time..
Rajesh Kanuri @ TechCats´s last blog ..Free Panda Cloud Antivirus Review
Great suggestions and examples, especially for a newbie like myself who lacks a natural sense of web design.
one more good post read today. thanks for giving this.
Step 2 does nothing. Please see site as step 2 CSS code is inserted but you see nothing.
David Cook´s last blog ..rules
Recently I got thesis theme. I was trying this hack it did work well for me but it doesn’t show images. I replaced the code with “thesis_post_image” but it still didn’t work.
I have created thumbnails.php file to call the thumbnail but it still in vain.
Can you tell me the exact meaning of {custom:Image} in the code. If I am using my thumbanils.pho files then which function am I suppose to call?
Ricky ´s last blog ..Upcoming genius in you blog and wordpress theme
BTW I forgot to mention that I am not using thesis teaser. I am just learning thesis.
Ricky´s last blog ..Upcoming genius in you blog and wordpress theme
You have great tips and tricks here. Much appreciated.
As much as I wanted to get the colored widget boxes to work for my recent posts, I did not. My recent posts are still looking just as drab as they were before I started. All the appropriate plugins are installed, I followed your guide, and nothing happened. EXCEPT that recent post entries are now showing up underneath each post in addition to the drab listings in the widgets.
Can you help me?
Can you post the link to your blog?
Alex´s last blog ..2009 is Over. Where does that leave you for the New Year?
You’re still hard at work?
Amazing.
Here’s the link. Go easy. I’m still learning.
http://tr.im/J5HE
Thanks
I found out why the recent posts were showing up under my posts. I had checked a box in the placement settings for Recent Posts. That piece has been fixed.
Haha, I am trying to take it easy today, but I have so much to do that I want to get at least a few work related things done.
But, if you’re talking about the sidebar recent posts, then that can’t be the right plugin. The plugin I used in this tutorial is by Rob Marsh, and his plugin uses the ID
recent-posts.But, this can still work…
Instead of using
#recent-posts liin the CSS, use#tdd-recent-posts liand let me know what that does.You are Simply Genius. That worked.
But I do have Rob Marsh’s plugins installed and activated. I wonder what more is going on then.
You have a follower for life. Thanks again. I will keep you in mind also for some Thesis design work I might need.
Happy New Year.
Alex, I inadvertently had another “recent posts” plugin activated. I have it right now.
Thanks again.
thanks for this type of article.after a along surfing i got this one.nice tips.thanks again.
The floating image aligns all text that follows to it’s right, including the image below and so on. What am I missing to make each floating image and it’s respective text individual boxes, and separate from those following, regardless if the text is enough to fill the height of the image? You can see my problem on this page: http://footballprime.com/holly3/
I am trying to use it in the tabbed widget using these same plugins found here: http://mattflies.com/tech/tabbed-widget-tutorial-for-thesis-wordpress-theme/
Thanks!
This is great article. Thank you for this useful post.
Tech Maish´s last blog ..20 Most Popular Ways to Promot Your Blog
This has really helped me to customize the look of my website!
Club Penguin´s last blog ..Free Club Penguin Account
great widget boxes…simply amazing..!
Shubham´s last blog ..20+ Color Tool For Web Designers/Webmasters and CSS Geeks