in Thesis Thursday · April 5, 2010

Create Colored Widget Boxes Displaying Recent Posts, Popular Posts, and More

One thing I have received the most atten­tion about regard­ing the design of this blog are those yel­low boxes in my side­bar that dis­play ran­dom posts on the blog. Peo­ple like it, and I got a com­ment on my last The­sis Thurs­day post ask­ing how to cre­ate that box.

I decided that this week I would cre­ate a sim­ple tuto­r­ial to show you how I did that effect here because I think it is a pretty cool trick.

This tuto­r­ial is eas­ily adapt­able for use on non-Thesis blogs, but for the sake of the series — the code will be writ­ten with The­sis in mind.

1. Prepa­ra­tions

Just to get a lit­tle pre­pared here, these are the things you will need for this tutorial.

Once you choose what plu­gin you want, down­load it, install it and add it within your Wid­gets panel. Sim­ple enough prepar­ing, right? As long as you know what you want, the hard stuff is out of the way.

2. The CSS

Depend­ing on the plu­gin you use, the CSS will be dif­fer­ent. But the only dif­fer­ence is the #ID that is used, and that is eas­ily change­able. So, the CSS code I use here is pretty sim­ple, 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 sim­ple. We have a back­ground which will allow you to switch up the color of the box, the bor­der will sur­round the whole think, the line height con­trols the spac­ing between each line of the link, and the padding is the spac­ing from the box to the text. The -moz-border-radius & -webkit-border-radius will make the box rounded with­out images. They will only be round in Safari and Fire­fox, but it’s a neat trick to those who can actu­ally see it.

I have col­ored in #random-posts because that is the thing that will change depend­ing on which plu­gin you choose.

The ID’s you will need to use for the other plu­g­ins are below:

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

3. Cus­tomiz­ing the output

Default Widgets LookYou should have the yel­low box around the link by default. It looks kind of bor­ing, but because of how flex­i­ble this plu­gin is, mak­ing it look bet­ter is not a prob­lem at all.

There are a lot of dif­fer­ent things you can add to the box to make it look cool. The plu­gin makes adding things so sim­ple too, and you really don’t need any cod­ing knowl­edge at all to do it.

So to start, go to Set­tings → Recent Comments/Recent Posts/Random/Popular Posts → Out­put → Out­put Tem­plate. This is where we can add any­thing 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 The­sis teasers and have the 66×66 images for each post

You can paste this code into the Out­put Tem­plate box:

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

NOTE: If you let The­sis auto gen­er­ate thumb­nails, replace thesis_thumb with thesis_post_image in the code above.

The code calls the thesis_thumb cus­tom 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 pub­lished. The date can be replaces with a vari­ety of things like com­ment 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 Out­put Tem­plate 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 lit­tle style to change the font color, size and case. This will bring what­ever 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

If you look towards the bot­tom 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 float­ing, it will over­lap the box, mak­ing 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.

Sim­ple Enough, Wasn’t It?

That was pretty sim­ple wasn’t it? The plu­g­ins used in this tuto­r­ial are extremely pow­er­ful, and allow you to cus­tomize your out­put extensively.

I hope you enjoyed this tuto­r­ial, as it was the first tuto­r­ial in the series. I hope you stick around for more posts here, and next week’s The­sis Thurs­day post! Is there any­thing you guys want cov­ered for next Thursday?

PS: This is a really cool The­sis resource. Matt Lang­ford wrote up a kick ass list of 100 Resources For The­sis you guys should def­i­nitely check out!

MAY 21ST, 2009

{ 113 comments… read them below or add one }

1 kristarella May 21, 2009 at 10:14 PM

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.

Reply

2 Alex May 22, 2009 at 4:00 PM

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. :)

Reply

3 kristarella May 22, 2009 at 7:41 PM

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. :)

Reply

4 The Mules May 21, 2009 at 11:54 PM

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.

Reply

5 Alex May 22, 2009 at 4:03 PM

Woah, it works? I mean, yeah, duh! Of course it works.

Reply

6 Joreg - Nokia Mobil Talk May 22, 2009 at 11:13 AM

Great post, it seems even easy enough for me, I would like to see a post Footers

Reply

7 Alex May 22, 2009 at 4:03 PM

Hold that thought for a couple more days…

Reply

8 R.J. May 22, 2009 at 11:26 AM

Nice job! This is something I’ll definitely look into. Also, gives me incentive to start using thumbails.

Reply

9 Alex May 22, 2009 at 4:04 PM

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.

Reply

10 Montana Flynn May 22, 2009 at 2:15 PM

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.

Reply

11 Alex May 22, 2009 at 4:05 PM

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.

Reply

12 Montana Flynn May 22, 2009 at 7:06 PM

Its fixed nicely now. Not sure what you meant by boxes though. Blogussion unfollowed me, :(

Reply

13 Alex May 22, 2009 at 7:08 PM

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!

Reply

14 The Mules May 22, 2009 at 4:21 PM

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.

Reply

15 kristarella May 22, 2009 at 7:46 PM

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. :P

Reply

16 Montana Flynn May 22, 2009 at 7:11 PM

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

Reply

17 Alex May 22, 2009 at 7:16 PM

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.

Reply

18 Montana Flynn May 22, 2009 at 7:39 PM

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.

Reply

19 Alex May 22, 2009 at 7:44 PM

Man, forget IE. :p I just don’t support anything below IE7 anymore. =/

Reply

20 Montana Flynn May 22, 2009 at 10:28 PM

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!

21 kristarella May 22, 2009 at 7:47 PM

I agree as well. They’re good without round, just a little something for those with superior browsers.

Reply

22 Matt Langford May 25, 2009 at 3:47 AM

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!

Reply

23 Alex May 25, 2009 at 9:34 PM

Well, there is a new one every Thursday! Just give me some time, I think I can hit 100!

Reply

24 blinkky May 25, 2009 at 8:53 AM

Very details tutorial. I always wonder how to do it.

Reply

25 Jorge - Nokia Mobile Talk May 25, 2009 at 10:32 AM

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

Reply

26 Jorge - Nokia Mobile Talk May 25, 2009 at 10:43 AM

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

Reply

27 Alex May 25, 2009 at 9:36 PM

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.

Reply

28 Jorge - Nokia Mobile Talk May 25, 2009 at 2:43 PM

Got it Alex, thanks anyway, hey they have to necessarily be 48×48 or can we tool around with this !

Reply

29 Alex May 25, 2009 at 9:37 PM

Any size you want, I just made them smaller so they don’t overwhelm anyone!

Reply

30 Jorge - Nokia Mobile Talk May 25, 2009 at 8:26 PM

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

Reply

31 Jorge - Nokia Mobile Talk May 26, 2009 at 12:21 AM

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

Reply

32 Alex June 6, 2009 at 11:38 AM

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.

Reply

33 James June 4, 2009 at 4:22 PM

Thanks for the great tip on creating color widget boxes. I had looked before on the web, but couldn’t find anything.

Reply

34 Alex June 6, 2009 at 11:38 AM

Make sure to tell all of your Thesis using friends now. :)

Reply

35 Somone June 6, 2009 at 11:44 PM

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.

Reply

36 Alex June 6, 2009 at 11:50 PM

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. :)

Reply

37 ChasingSanity.com June 8, 2009 at 7:32 PM

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

Reply

38 Alex June 8, 2009 at 8:38 PM

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?

Reply

39 ChasingSanity.com June 10, 2009 at 7:47 PM

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;
}

Reply

40 Alex June 10, 2009 at 7:50 PM

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.

Reply

41 ChasingSanity.com June 10, 2009 at 8:16 PM

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.

42 ChasingSanity.com June 10, 2009 at 8:17 PM

Never mind, I just adjusted the padding – duh! Thanks again.

Reply

43 Alex June 10, 2009 at 8:19 PM

Awesome! Glad it works for you. :)

Reply

44 Jake_WebJourney June 16, 2009 at 9:15 PM

Cool, I actually was wondering how you did that to. I think I will implement it on my blog. Thanks!

Reply

45 Alex June 17, 2009 at 6:09 AM

I’d love to see some color on your site when I go to it next. :)

Reply

46 Alex June 17, 2009 at 10:50 AM

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?

Reply

47 Alex June 17, 2009 at 7:33 PM

You sure can Alex, try putting the code with this as the ID instead of the one I gave you:

.widget_popular li

So 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!

Reply

48 Alex June 20, 2009 at 5:22 AM

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 =-.

Reply

49 Sharon Hurley Hall July 2, 2009 at 4:22 PM

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 =-.

Reply

50 Alex July 5, 2009 at 6:23 PM

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 =-.

Reply

51 Susan July 8, 2009 at 5:40 PM

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!

Reply

52 William Todd July 8, 2009 at 10:37 PM

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 =-.

Reply

53 Alex July 8, 2009 at 10:49 PM

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 =-.

Reply

54 William Todd July 8, 2009 at 11:55 PM

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 =-.

Reply

55 Alex July 9, 2009 at 12:11 AM

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 =-.

Reply

56 joseph July 10, 2009 at 4:36 PM

Does anyone know if this tutorial is working on wordpress 2.8? It is not working for me.

Reply

57 Alex July 10, 2009 at 5:19 PM

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” =-.

Reply

58 joseph July 16, 2009 at 6:53 PM

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.

Reply

59 Alex July 20, 2009 at 11:04 PM

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 =-.

Reply

60 joseph July 24, 2009 at 10:30 PM

cool, i will keep my eyes open for it

61 Rand July 20, 2009 at 10:17 AM

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. =-.

Reply

62 Alex July 20, 2009 at 11:11 PM

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 =-.

Reply

63 Rand July 20, 2009 at 11:17 PM

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. =-.

Reply

64 Rand July 20, 2009 at 11:21 PM

and another attempt: “{link}”
.-= Rand´s last blog ..Pepsi; So-So Social Media Campaign. =-.

Reply

65 Rand July 20, 2009 at 11:23 PM

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. =-.

66 ZQ @ Travel Blog August 1, 2009 at 11:03 PM

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 =-.

Reply

67 ronnell August 9, 2009 at 9:55 PM

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!

Reply

68 ankit September 3, 2009 at 6:46 PM

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 =-.

Reply

69 steppinout September 28, 2009 at 9:44 PM

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 =-.

Reply

70 Jonathan Garro October 1, 2009 at 2:54 PM

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 =-.

Reply

71 Pooja Arora October 3, 2009 at 5:27 PM

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 ?

Reply

72 Nash October 15, 2009 at 2:12 AM

Replace date with postviews…

Reply

73 PSP Go October 6, 2009 at 6:04 PM

Straight forward and easy to implement. Thanks.
.-= PSP Go´s last blog ..Buy Sony PSP Go – Quick Buying Q&A =-.

Reply

74 Kelly October 17, 2009 at 2:06 AM

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?

Reply

75 mktanny October 30, 2009 at 2:04 PM

you are just cool -no words to thank u

Reply

76 Ricky November 11, 2009 at 6:23 AM

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] =-.

Reply

77 Rajesh Kanuri @ TechCats December 8, 2009 at 5:07 AM

excellent tips.. I m looking for this from a long time..
.-= Rajesh Kanuri @ TechCats´s last blog ..Free Panda Cloud Antivirus Review =-.

Reply

78 aks December 9, 2009 at 3:47 PM

Great suggestions and examples, especially for a newbie like myself who lacks a natural sense of web design.

Reply

79 aks December 11, 2009 at 9:50 AM

one more good post read today. thanks for giving this.

Reply

80 David Cook December 20, 2009 at 6:03 PM

Step 2 does nothing. Please see site as step 2 CSS code is inserted but you see nothing.
.-= David Cook´s last blog ..rules =-.

Reply

81 Ricky December 26, 2009 at 6:57 AM

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 =-.

Reply

82 Ricky December 26, 2009 at 6:59 AM

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 =-.

Reply

83 Sam December 31, 2009 at 2:49 PM

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?

Reply

84 Alex December 31, 2009 at 2:55 PM

Can you post the link to your blog?
.-= Alex´s last blog ..2009 is Over. Where does that leave you for the New Year? =-.

Reply

85 Sam December 31, 2009 at 3:06 PM

You’re still hard at work?

Amazing.

Here’s the link. Go easy. I’m still learning.

http://tr.im/J5HE

Thanks

Reply

86 Sam December 31, 2009 at 3:17 PM

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.

Reply

87 Alex December 31, 2009 at 3:19 PM

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 li and let me know what that does.

Reply

88 Sam December 31, 2009 at 3:27 PM

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.

89 Sam January 1, 2010 at 2:17 AM

Alex, I inadvertently had another “recent posts” plugin activated. I have it right now.

Thanks again.

90 avinash January 6, 2010 at 5:38 AM

thanks for this type of article.after a along surfing i got this one.nice tips.thanks again.

Reply

91 Holly January 11, 2010 at 11:56 AM

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!

Reply

92 Tech Maish January 16, 2010 at 2:59 PM

This is great article. Thank you for this useful post.
.-= Tech Maish´s last blog ..20 Most Popular Ways to Promot Your Blog =-.

Reply

93 Club Penguin March 6, 2010 at 2:26 PM

This has really helped me to customize the look of my website!
.-= Club Penguin´s last blog ..Free Club Penguin Account =-.

Reply

94 Shubham March 8, 2010 at 2:27 AM

great widget boxes…simply amazing..!
.-= Shubham´s last blog ..20+ Color Tool For Web Designers/Webmasters and CSS Geeks =-.

Reply

95 Reza Winandar April 9, 2010 at 10:03 AM

Thanks for tutor Alex, I really need it for my blogs!
.-= Reza Winandar´s last blog ..This is blog is now Do Follow =-.

Reply

96 Gail from GrowMap April 11, 2010 at 7:31 PM

Hello Alex,

Congratulations on your many successes. I found my way here from the interview InsideTheWebb did with you about Blogussion. Have you ever considered joining the DoFollow CommentLuv KeywordLuv community? See the post I’ll use in CommentLuv for details.
.-= Gail from GrowMap´s last blog ..KeywordLuv: How Using It Benefits Us All =-.

Reply

97 Srivathsan G.K April 12, 2010 at 11:52 AM

Amazing stuff :) thank you so much for sharing the informative article.
.-= Srivathsan G.K´s last blog ..Website Speed Determines Google Rankings – How to Solve it ? =-.

Reply

98 blinkky April 12, 2010 at 1:28 PM

I’m not really good with CSS. I’ll try this. Really help me a lot =)
.-= blinkky´s last blog ..Create Your The Simpsons Character =-.

Reply

99 Kalvster April 30, 2010 at 1:51 AM

Good tips. Thank you very much, and I’ll keep this in mind.
.-= Kalvster´s last blog ..How to Download Singstar Songs from the UK Singstore =-.

Reply

100 Pension May 1, 2010 at 6:05 PM

Thanks for the information, i posted your blog to my facebook group in the category `Create Colored Widget Boxes In Thesis`. Regards, Katy

Reply

101 Power Trainer May 5, 2010 at 5:01 AM

If you’re interested in having a guest blog poster please reply and let me know, also if you want to have a guest account on my blog. Cheers, Dave the Power Trainer

Reply

102 Zikk May 9, 2010 at 8:52 PM

yo good blog and nice work our blog video newspaper will soon be adding reviews on blogs and add them to our as the top best 1000 blogs to visit we also do video reviews on Create Colored Widget Boxes In Thesis and all types of reviews go here

Reply

103 Johnie Whitting May 10, 2010 at 3:44 PM

hmmmm…i don’t think I go along with everything that you’re saying, but I like the way you put your arguement across in your thoughts. I’m following your RSS.

Reply

104 Nimit kashyap May 11, 2010 at 8:43 AM

I really love wordpress tutorials since i always strive to make my blog look better and function great. Thanks for sharing this tutorial.
.-= Nimit kashyap´s last blog ..Best Things To Sell On eBay =-.

Reply

105 mohdisa May 13, 2010 at 4:13 AM

this awesome, thanks for this tutorial. i very love to study about thesis design. thanks.
.-= mohdisa´s last blog ..Selamatkan Entri Anda Dengan Google Reader =-.

Reply

106 Leona Griffin May 15, 2010 at 10:11 AM

This is a great tutorial, I’m going to give it a try but I don’t know if my skills will be enough to get it to work. Thanks for sharing!
.-= Leona Griffin´s last blog ..Google SEO – Top Companies & Prices =-.

Reply

107 The Saltwater Report May 16, 2010 at 11:42 AM

Thanks man, Im going to add a box like that to my blog!
.-= The Saltwater Report´s last blog ..Professor Examines Oil Spill With New Prediction =-.

Reply

108 Spruch May 18, 2010 at 4:03 AM

Hello from Germany! May i quote a post a translated part of your blog with a link to you? I’ve tried to contact you for the topic Create Colored Widget Boxes In Thesis, but i got no answer, please reply when you have a moment, thanks, Spruch

Reply

109 Thomas Griffin May 19, 2010 at 6:47 PM

Alex,

You have an incredible gift at creativity and clarity. Thank you so much for the blessing you have been to me in my web design journey. This tutorial is simply wonderful!

Thomas
.-= Thomas Griffin´s last blog ..Why You Need the WordPress Thesis Theme for Your Blog =-.

Reply

110 Richard Barratt May 30, 2010 at 6:55 PM

Hi thanks for this – works a dream.

A question though…

Can this plug-in be used in anyway to grab the thumb nail images from a category off a separate Thesis site?

For my next project I want to display 5 items off an RSS feed from a separate Thesis blog on a sub-domain.

If not, any pointers on where to start would be much appreciated.

Thanks again :)
.-= Richard Barratt´s last blog ..Richer_Image: HA! > RT @steve_nicholls: Heard that The Faces are to “reform” with Mick Hucknall singing instead of Rod – should be called The Faeces. =-.

Reply

111 Rakesh Solanki June 6, 2010 at 11:38 AM

I tried this tricks for my sidebar customization and it’s works.
.-= Rakesh Solanki´s last blog ..Check Your PassWord Strength With Password Checker =-.

Reply

112 Ritu Sharma June 9, 2010 at 8:39 AM

Hi… Is there any wordpress plugin for the Footer modifications
.-= Ritu Sharma´s last blog ..Free : Watch Live FIFA 2010 World Cup Live Online Streaming =-.

Reply

113 Cash Back Everytime You Shop July 1, 2010 at 12:26 AM

Colore widget boxes are so much better then just black and white ones. This is great.

Reply

Leave a Comment

CommentLuv Enabled

{ 14 trackbacks }