Styling the Thesis Sidebar

How to style the Thesis sidebar is something I find being asked a lot when it comes to customizing the Thesis WordPress theme. I think this is because the classes are kind of hidden, as in there’s not much documentation of them, and changing your sidebar look is a great way to start differentiating your site from all the others out there.

I’ve decided to prepare this little guide on styling Thesis sidebars, and after you read it you should hopefully be able to do whatever you want with it. I’ve separated it into three sections: classes, hooks, and the multimedia box. This will allow you to alter the look of your sidebars, do cool things in them, and take advantage of a function already created for you.

I hope you enjoy and find this quick guide useful.

Classes

Classes are what you’ll change to alter the look of your sidebars. These are all pre-applied to your theme out of the box, so you’ll need to put them in custom.css and prepend .custom before them and boom! Your sidebars will be full of flare and personal charm in no time.

li.widget – This is each individual widget. If say you wanted your widgets a different colour than the rest of your sidebar, you’d add a background to this class.

.custom li.widget h3 – This is the header of each widget and one that people frequently like to change. For example you could add a background or if you want to get rid of the small-caps that every Thesis site has, you could put font-variant: normal;.

li.widget ul li – I put this here because people frequently use lists in their sidebars and using this class you can change how list items appear. Adding an underline for example, or changing how your category links appear.

#content_box and #content – These classes are used to perform the number one customization I see asked about when it comes to Thesis, and that is: how to change your sidebar colour. Editing these two classes together will give you a different background colour for your sidebars all the way to the bottom of the page. Use the following, where #content_box is your desired content colour and #content is your main background.

.custom #content_box {background-color: #eee; }
.custom #content {background-color: #fff;}

Hooks

This information can be found in the official Thesis Hooks Reference List, but I thought I’d add it to this guide as well. Using these hooks in your functions will let you do some cool things in your sidebars, such as add widgets that span both columns or put in advertisements.

thesis_hook_before_sidebars – Before your sidebars; spans both columns.

thesis_hook_after_sidebars – After your sidebars; spans both columns.

thesis_hook_multimedia_box – Inside your multimedia box, which you can read more about below.

thesis_hook_after_multimedia_box – After your multimedia box and before your sidebar widgets.

You can also use thesis_hook_before_sidebar_1, thesis_hook_after_sidebar_1, thesis_hook_before_sidebar_2 and thesis_hook_after_sidebar_2 if you want to hard-code something above or below one of the sidebars.

Multimedia Box

The multimedia box sits above your sidebars on the right and is pretty self-explanatory, I just want to make sure you know it’s there and what it’s capable of, which is essentially anything. You can find the options for the multimedia box under Design Options and there you can decide what to put in it. You can use it for a picture slideshow or an embedded video, or you can use “Custom Code” to really think outside of the box (ha). You can also widgetize it if you so feel.

That’s about it. I hope if you learned something from this little guide here. If you have any further questions about styling the Thesis sidebar feel free to ask in the comments.

photo by glenn harper

Stay Updated

Or subscribe via RSS

You'll notice this site talks about the Thesis theme for Wordpress. Don't know what the heck that is? Find out.