How to style a sidebar widget

If you’ve used The Thesis Theme for WordPress, you know that out of the box, it has certain stylistic traits. That is, before making any changes at all, there is a certain style to the font, for example, in the menu bar (navbar) and, perhaps more noticeably, in the sidebar columns.

If you’re happy with the way they look on your site, then read no further. But if you’d like to know how to change some of that styling to fit the look and feel you’re going for with your site, then the below should help.

How do I begin?

Okay, the first thing to know is that these kinds of changes (font family/size, borders, background color, text color, etc) are made using CSS (a computer language that is used to alter the presentation of, for example, HTML documents). Most themes, including Thesis, come with certain CSS styling as part of their default look, but you/we can change that default look by adding CSS to the style sheet. With the Thesis Theme, this style sheet is called custom.css and it is super easy to access by clicking on the Thesis>Custom File Editor menu. The document that shows up on that screen in your custom.css file. In other themes, that style sheet is often called style.css.

The custom.css file starts out a blank sheet of paper (well, pretty much…there are a few instructional notes at the top), but any CSS you add to it effectively supersede the default styling. So, if the default styling for a text widget placed in the sidebar has the title in small caps and any links in the text widget body in blue, you can change that by adding some CSS to the custom.css file.

So how do you know what change? Well, naturally, it helps to know CSS, but with the below code, and a little explanation, maybe you’ll start to see how it works, and you’ll be on your way to learning how to do some heavy CSS lifting.

Identify the things that need changing (selectors and declarations)

There’s 1 main tool I use to identify the pieces I’m going to change. It’s called Firebug and it’s a free Firefox (the browser) extension that you can add to your browser. I won’t detail how to do that here, but if you need some help with that, leave a comment and I’ll assist.

Assuming you have Firebug installed, open up your browser and go to the web page that has the element you’re trying to change. In this example, I’ll be using a test site of mine to show you how a few minor changes can make a big difference.

So, you’ve got Firefox opened to the page you want to change. On my browser, the Firebug button is at the top right, yours may be somewhere else, but look for something that looks like what you see in this image here, and click on it.

A panel will appear from the bottom of your screen that’s a couple inches high. At the top left of that panel, you’ll see another button you have to push, pictured here. It’s the one that says “click an element in the page to inspect” when you hover over it. Click it. Your mouse is now temporarily disabled in the sense that if you click a link on the web page, it won’t actually take you there. Rather, in the panel that is at the bottom of your screen, you’ll see the html elements involved with the item your mouse is hovering over at any given moment. If you don’t click, the bottom panel will continue to change as your mouse moves around. The moment you click, the panel will freeze with the details of the element you clicked on.

So let’s take the test site I mentioned. If you check it out, you’ll see 2 text widgets along the left sidebar (unless you’re reading this way in the future and I’ve taken it down…just in case, they are pictured here). If you’ve got Firebug open and click on the inspect icon, then hover over the text in the body of the 2nd text widget (the one called Styled Text Widget), you’ll see in the bottom panel the below (among some other things):

click to enlarge

Don’t stress over what all that means, the main thing I wanted was to give you a reference to look back on so you can see how the code I’m about to give you relates to what Firebug is showing us. You see that the id=text-4 and it has a class=widget. Cool. So if I want to change the styling of that widget, those are the elements I need in the CSS I’m going to add to custom.css.

CSS Code to style your text-widget

Click on the Thesis>Custom File Editor menu, scroll to the bottom, or navigate to the part of the file you want to put it (if you have your custom.css file organized in a particular way), and paste the below code:

.custom #text-4.widget h3 {
text-transform:uppercase;
text-align:center;
font-size:1em;
border:.1em solid #000000;
font-weight:bold;
background-color:#666666;
margin-bottom:0;
color:#ffffff;
}
.custom #text-4.widget p{
background-color:#77BD90;
border:.1em solid #999999;
padding-left:.4em;
padding-right:.4em;
}

The result of that above code is what you see on the site there…or, if that site no longer exists, what you see pictured here. I’m not going to explain what all that means/does, because what I really hope you’ll do is play with it a bit. Put a text widget on your site, inspect it to find out what number it is, make the change in the code (if your text widget has an id=38, you just change the 4 in the code to a 38), and then start altering the values and see what happens. Change text-align to right, font size to 4em, background color to #ff0000, padding to 1em, etc. That will give you a feel for how that code works and help you understand each piece of the puzzle a bit better. Then you’ll be able to venture out on your own and start styling different kinds of widgets, or adding background patters instead of colors. That sorta thing.

As always, my goal here is to give you the code you need, and just enough explanation to peak your interest in learning more. Or at the very least, get you to leave a comment and ask for help. Either way is cool with me, I’m always happy to help.

Cheers…