WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

How to style Sidebar Widget with different color in Thesis Theme ?

by Aky Joe

Couple months back, a blogger friend who is also thecreatology blog follower, requested a Thesis Theme tutorial for styling sidebar widgets. As we all know that sidebar is an important element of blog, where we put advertisements, social media promotions and subscriptions. Hence, by making sidebar widgets eye catchy will increase blog hits and decreases bounce rate. For instance, you can check out the screenshot below (click to enlarge the image):

thecreatology sidebar widget design

TheCreatology Widget Styling

As you can see in the above screenshot, the sidebar is on left side, whereas in most blogs you will find it one on right side. But doesn’t matter if it is on left or right, all what matter is that sidebar should be made eye catchy. In this article you will learn how to style sidebar widget with different color in Thesis Theme.

Getting Started: Update Thesis Theme

To make sure that we are sailing on the same ship, I recommend you to update Thesis Theme. Don’t know how to do that ? Well, just refer to article Safely upgrade to latest version Thesis 1.8 ? If you don’t have Thesis Theme Copy then you can also Download Thesis Theme.

How to style sidebar widget ?

Thesis Theme is no ghost, so you can always play around with its customization. Customizing sidebar in thesis theme can be done by applying CSS code, rest I leave it on your skills. I know you will not let me down. (Giggle)

A sidebar may contain different types widgets, for instance a text widget or a recent post list widget and etcetera. So, make sure you analyze your need, before copying the code.

CSS Code to Style Thesis Sidebar

Hmm! So we have reached the ammunition, where will not find any armory or magazine, but the CSS code to style sidebar widget. Find the CSS code below:

Make sure you take full backup of custom.css file using FTP before modifying the original file.

Sidebar List Widget  CSS Code

.custom .sidebar ul li ul li a{background:#E5ECF9;border: 1px solid #AABCE0;border-radius: 7px; color: #FFF; display: block;font-size: 13px; padding: 4px 10px; margin:2px 0;}

.custom .sidebar ul li ul li a:hover{background:#D3DCED;}

Thesis Killer Recent Entries CSS Code

.custom #widget_killer_recent_entries-2{background:#BFE2F2; border:10px solid #77D6FF;}
.custom #widget_killer_recent_entries-2 h3{padding: 5px 0; margin: 10px 0; font-size: 18px; font-weight: bold; text-align: center; color:#fff;}
.custom #widget_killer_recent_entries-2 ul { font-size: 14px; font-weight: bold; list-style: decimal; margin: 0 0 0 20px;}
.custom #widget_killer_recent_entries-2 ul li { border-bottom: 1px solid #ddd;margin: 0; padding: 5px 0;}
.custom #widget_killer_recent_entries-2 ul li a { color: #333; display:block; font-size: 12px; font-weight: normal; background: transparent; padding: 0;}
.custom #widget_killer_recent_entries-2 ul li a:hover {color:#e33e00;}

Did you copy the right code ? This is just to remind you about the code which you analyzed before coming to this step.

We’re Done!

After that you have copied the correct code, save custom.css file and upload it on server. And if, you are using custom file editor from your dashboard admin then just hit Big Ass Save Button. Once done, refresh the website and check out sidebar styling and if you are not satisfied then you can play around with CSS code.

With this we come to the end of tutorial to style sidebar widgets in Thesis Theme. I hope it was easy, if not? you can also hire me to do style sidebar widgets for you. If you have any query or further assistance is required, post your feedback as a comment below.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!


{ read them below or add one }

Pubudu February 6, 2012 at 6:22 pm

Thanks.I was looking a way to customize my widgets,If you could continue this series.It will help for most people.Thanks


Tate February 10, 2012 at 12:22 pm

I tried it on thesis 1.8 and looked up the widget numbers ( I think I did it right) but it didn’t work.


Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...