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

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