How To Create Box For Sidebar Element – Thesis Tutorials

by Lee Ka Hoong on December 3, 2009

Thesis themes is a wonderful and professional wordpress theme, we can customize in many ways and make it as unique as you can. If you want to customize your thesis theme in simple way, you can just play around the Thesis Options and Design Options in the thesis cpanel, that would be enough for you; but if you want to customize your thesis theme in unique way, you might need to know a little about CSS coding as most of the customizations require you to play around with the custom.css and custom_function.php file.

How To Create Box For Sidebar Element

Today, I just want to share a very simple thesis customization tutorial which is how to create a box for all your sidebar elements. Some people may want their sidebar elements to be surrounded with a rectangular box, it’s to make every single sidebar section can be seen clearer.

It’s pretty simple, just copy the code below and paste in your custom.css file.

.custom .sidebar h3 {text-align: center; font-weight: bold; font-size: 17px; color: #FFFFFF; background:#424242 repeat; border: 3px solid #ffffff; padding: 5px 5px; width: 95%; -moz-border-radius: 5px; margin-top: 5px; padding:5px 5px;}
.custom .sidebar .widget {background-color: #ffffff; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border: 1.5px solid #000000; padding: 5%; width: 90%; }

Once you’ve uploaded and replaced the custom.css file, you will see something like this.
sidebar-box-customization

My Thought

Thesis Theme can be customized in thousand ways and almost all the thesis tutorials can be found on the web, so you have to sketch your design and see what you want to be integrated into your thesis theme. I’ve been using Thesis Theme for quite some times, and I can say Thesis Theme is the best wordpress theme and you can customize it in thousand ways and come out with your brilliant design.

I hope you like this little Thesis Customization tutorial, when I learn new thesis customization tips and get used to it, I’ll also write and share the tutorial over here.

I hope you like my recent new customized thesis theme, it’s simple and I hope you like it!

GET THESIS THEME NOW IF YOU HAVE YET TO BUY ONE!
Buy Thesis

Related Articles That You Like To Read

{ 39 comments… read them below or add one }

1 Pascal (2 comments.) December 3, 2009 at 10:58 pm

Lee Ka, Nice Thesis hack. Today i come to your site as you are being active in some much blog comments. You have good content regarding wordpress. Reading your site through RSS. I need to know more hacks.
Pascal´s last blog ..Free Worpress.com to Self Hosted Wordpress.org Migration: My ComLuv Profile

Reply

2 Lee Ka Hoong (535 comments.) December 5, 2009 at 2:19 am

@Pascal,
Thank you for reading my blog my friend. I hope you find something useful from this blog, if you need anything else simply contact me via the contact form above. :)

Reply

3 Senthil Ramesh (26 comments.) December 4, 2009 at 1:42 am

Thats cool. Very simple technique to blog with. It seems to be so simple for me who is familiar with CSS but it can be of great help who has little or no tech knowledge
Senthil Ramesh´s last blog ..Whats wrong with Mashable !! Or is it a CMS issue? My ComLuv Profile

Reply

4 Lee Ka Hoong (535 comments.) December 5, 2009 at 2:15 am

@Senthil,
I hope you like this tutorial Senthil. Some thesis customization may be complicated, while some of them may be pretty simple, just like this one.

Reply

5 Senthil Ramesh (26 comments.) December 5, 2009 at 11:20 am

Yes, the first time I started using I felt uneasy but lot of tutorials available made me to learn as well as made me comfortable with it.
Senthil Ramesh´s last blog ..7 Reasons Why Should You Start Guest Blogging My ComLuv Profile

Reply

6 Lee Ka Hoong (535 comments.) December 6, 2009 at 12:28 am

@Senthil,
There are many things need to be learned for thesis customization. I enjoy using Thesis theme and I still have many things need to be learned too, I’m still trying to improve my thesis theme design too.

Reply

7 Senthil Ramesh (26 comments.) December 4, 2009 at 1:44 am

BTW, I would like to know how you made the Blog categories shown below, then recent comments displaying gravatars?
Senthil Ramesh´s last blog ..Whats wrong with Mashable !! Or is it a CMS issue? My ComLuv Profile

Reply

8 Lee Ka Hoong (535 comments.) December 5, 2009 at 2:14 am

@Senthil,
That’s the customization from Asnio, Footer Mod.

Reply

9 Senthil Ramesh (26 comments.) December 5, 2009 at 11:30 am

Yup, I got it and installing it. I should mention the articles at this blog are cool and I am in a thought to give a guest blog if possible. The comment Luv and Top Commentators makes me to comment more.
Senthil Ramesh´s last blog ..7 Reasons Why Should You Start Guest Blogging My ComLuv Profile

Reply

10 Lee Ka Hoong (535 comments.) December 6, 2009 at 12:15 am

@Senthil,
Cool! Kindly draft the guest post and send it over to me, I’ll take a look and publish it if possible. :)
I’ll make my blog comment dofollow too, stay tuned!

Reply

11 Metal Briefcases (23 comments.) December 4, 2009 at 4:34 am

Thesis Theme looks great on your blog. Knowing how to customize themes can be very useful. Even if you’re using a great looking theme, you do want it to be somehow unique. You never want to look too similar to other blogs.

Reply

12 Lee Ka Hoong (535 comments.) December 5, 2009 at 2:09 am

@Metal Briefcases,
Thanks my friend, I hope you like my current design. I’m poor in customizing thesis theme, so I took long time to customize it. No doubt, Thesis theme is a wonderful wordpress theme, grab one if you need a professional theme. ;)

Reply

13 Malhar Parve (3 comments.) December 4, 2009 at 1:20 pm

Thesis is know for its simplicity. Your tips are very helpful for new bloggger’s like us. Also, just want help from you about the sidebar email subscription box. How can I create like yours? Thanks in advance. :)

Reply

14 Lee Ka Hoong (535 comments.) December 5, 2009 at 2:04 am

@Malhar,
Thanks for dropping by my friend. I’ve sent you an email earlier, let me know if the coding doesn’t work. :)

Reply

15 George Serradinho (29 comments.) December 4, 2009 at 2:10 pm

A very and easy CSS tip to implement. Just keep noting all the tips down and eventually you will have many posts that will help others.
George Serradinho´s last blog ..eBook – Your Body Is Your Temple My ComLuv Profile

Reply

16 Lee Ka Hoong (535 comments.) December 5, 2009 at 2:01 am

@Serradinho,
Yea, I found that I have many notepad files that kept all the thesis tutorials in my laptop. Rather I post them online instead of keeping them privately.

Again, I would like to say thank you for your help in thesis customization bro! :)

Reply

17 James M. (11 comments.) December 4, 2009 at 3:11 pm

That’s cool. I effected the same look in mine once but it took more than 8 lines of code. Great hack.
James M.´s last blog ..Wave board 101: Learning the waveboard My ComLuv Profile

Reply

18 Lee Ka Hoong (535 comments.) December 5, 2009 at 1:55 am

@James,
Thanks James, I hope you find this simple tutorial useful. :)

Reply

19 Tinh (14 comments.) December 4, 2009 at 9:49 pm

Nice tip, thanks. Thesis is now community-based theme, not by blogger individually. We are not along with Thesis :-)
Tinh´s last blog ..Site Performance: Check Your Site Speed Within Google Webmaster Tools My ComLuv Profile

Reply

20 marcus from how to make money online (14 comments.) December 5, 2009 at 5:38 am

Wow. These boxes look great. II have a blog template that was made with 1 of these boxes installed but since you provided such good instructions I think I will ad another box to my blog. Thanks.
marcus@how to make money online´s last blog ..How To Get More Twitter Followers On Auto-Pilot My ComLuv Profile

Reply

21 Lee Ka Hoong (535 comments.) December 6, 2009 at 12:46 am

@marcus,
Great! But this tutorial is only for blogger who uses Thesis Theme, do you have any blog that uses thesis theme Marcus? :)

Reply

22 titan (110 comments.) December 5, 2009 at 1:38 pm

still not interested to use premium theme. I prefer with the old one. BUt i admit i like your new theme compare the last one. :D
titan´s last blog ..Edisi Siasat: Buat Duit dengan Intellilinks My ComLuv Profile

Reply

23 Lee Ka Hoong (535 comments.) December 5, 2009 at 11:56 pm

@titan,
Thanks titan, I hope you like current design. Anyway, I still have something to modify, still in the progress. :)

Reply

24 Fazreen (20 comments.) December 5, 2009 at 10:32 pm

Still saving for buying a thesis theme developer license..Anyway nice and easy hack shared.

Reply

25 Lee Ka Hoong (535 comments.) December 6, 2009 at 12:50 am

@Fazreen,
Cool! Try to get one for yourself, I must say Thesis Theme is great for any type, any niche blog. A very flexible wordpress theme, you can customize it to whatever design you like. :)

Reply

26 Typhoon (34 comments.) December 5, 2009 at 11:02 pm

Your New design is looking good though I think you should make those 125×125 banner ads center aligned in that place.
Typhoon´s last blog ..WP-Robot v2.0 Out Now With Superb Changes | Get Discount For Being A SmartBloggerz Reader My ComLuv Profile

Reply

27 Lee Ka Hoong (535 comments.) December 6, 2009 at 7:18 pm

@Typhoon,
Thanks dude, glad that you like it. I’m trying to make it center but couldn’t be able to change it, the coding doesn’t work for the BSA widget. I’ll keep an eye on that..

Reply

28 Extreme John (3 comments.) December 9, 2009 at 9:05 am

Excellent and very simple tutorial, I love the Thesis Theme tutorials they make me smile :)
Extreme John´s last blog ..I am Tiger Woods 10th Mistress My ComLuv Profile

Reply

29 Dave Doolin (6 comments.) December 9, 2009 at 9:08 am

Very sweet little hack!

Thesis really is a great piece of code.
Dave Doolin´s last blog ..Playing The Host: A Quick Intro to Wordpress MU My ComLuv Profile

Reply

30 Lee Ka Hoong (535 comments.) December 12, 2009 at 9:05 am

@Dave,
Thanks Dave. Thesis theme is a great and flexible theme, you can customize it to whatever design you like, of course little coding work needed. I hope you like this simple tutorial. :)

Reply

31 Mike (1 comments.) December 9, 2009 at 9:24 am

Extreme John just tweeted the link and I had to try it. I love it, added it to my blog!
Mike´s last blog ..2009 Coffee News – Everything From Coffee Wars To Coffee Viagra My ComLuv Profile

Reply

32 Lee Ka Hoong (535 comments.) December 12, 2009 at 9:02 am

@Mike,
Hey Mike, I know you’re a regular commentator in ExtremeJohn blog, me too. Also, glad to see you here and hope to see you here again. :D

Reply

33 oes tsetnoc (9 comments.) December 9, 2009 at 12:30 pm

I am not using thesis theme but you can edit this box in regular themes too with the help of side widgets

Reply

34 How to make quick money (33 comments.) December 9, 2009 at 2:28 pm

Great post – it keeps something that can sound quite complicated very simple.

You really can create a lot of interesting stuff using a simple template and some creativity, and tailor it to make exactly what it is that your blog needs.
How to make quick money´s last blog ..How I Got 700 Unique Visitors Last Month? My ComLuv Profile

Reply

35 Sahil Kotak (6 comments.) December 9, 2009 at 11:07 pm

Nice tutorial Lee, Thesis is very good theme and really easy to customize. :)
Sahil Kotak´s last blog ..250+ Thesis Theme Resources My ComLuv Profile

Reply

36 KevinChong (25 comments.) December 10, 2009 at 2:29 pm

Yeah, It is same what you said that, easy to use and modify what you like to be.
KevinChong´s last blog ..How Being a a4Patela4 Made Me Somewhat Successful My ComLuv Profile

Reply

37 KevinChong (25 comments.) December 10, 2009 at 2:28 pm

I will purchase the thesis theme one day. It give me elegant and cleanliness to user who want to blogging make money online future.
KevinChong´s last blog ..How Being a a4Patela4 Made Me Somewhat Successful My ComLuv Profile

Reply

38 KevinChong (25 comments.) December 10, 2009 at 2:31 pm

Lee I also suggest you put the picture of Google adsense ads on your sidebar until other people purchase it one day. what so you think it ?
KevinChong´s last blog ..How Being a a4Patela4 Made Me Somewhat Successful My ComLuv Profile

Reply

39 Lee Ka Hoong (535 comments.) December 11, 2009 at 10:28 pm

@Kevin Chong,
No, I’m trying to minimize the number of advertisements in this blog. Thanks for your opinion, perhaps I would do that one day later. ;)

Reply

Leave a Comment | It's a Dofollow Blog, please follow comment policy!

CommentLuv Enabled

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

Previous post: WebHostingGeeks – The Web Hosting Review Site

Next post: How To Signup Web Hosting – Beginner Guide