How to style a sidebar widget

wordpress tutorial – widget styling

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.

How to turn on firebugSo, 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 Use firebug to inspect an elementmouse 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):
two unstyled text widgets

click to enlarge

text-4 widget

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;
}

styled text widgetThe 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 patterns 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…

{ 29 comments… add one }

Leave a Comment

  • Jason January 8, 2012, 8:18 am

    Great article! I was looking for exactly how to tweak the header font on the sidebar items and this was it. Also, I didn’t know about the Firebug plug-in, that’s a great tip!

    Thanks,

    Jason

    Reply
    • Jeb January 8, 2012, 8:46 am

      Hey Jason,
      Glad it came in handy for you. Thanks for the comment and good luck to you sir.

      Cheers…

      Reply
  • Anuj@improve google pagerank January 12, 2012, 1:47 am

    Firstly thanks mate appreciate it. This is one a a very small number of thesis sites that I have book marked — I come back to this site again and again, thank you for all your hard work.

    Secondly I am using a skin from thesis themes and therefore have no idea on how to adjust the function php and do it that way i.e. by creating a custom page template — because the skin uses a custom page template for a “portfolio style” page.

    That being said would you recommend another way — and why would removing the sidebars via css NOT be optimal ?

    Appreciate your help

    Reply
    • Jeb January 18, 2012, 8:50 pm

      Hey Anuj,
      First off, sorry for my delay, it seems your comment got filtered out and I never got notified of it. I just came upon it by chance a few minutes ago.

      Now then, thanks for the comment, wish I was a bit more prolific as it concerns tutorials…just seem to run out of time. :) I’ve never actually used a Thesis skin…are you saying that in using one, your flexibility in utilizing the custom-functions.php file is removed? What, exactly, are you trying to accomplish?

      As for removing the sidebars, I’m not sure CSS is how I would think to do it. What approach are you using? Sorry, lots of questions, but I’d need a little more info to be of much help. Let me know.

      Cheers, and thanks again.

      Reply
  • Darren February 7, 2012, 1:14 pm

    Jeb,
    Thanks for this article it is the only article I have found that actually tells you as it is, even the DIY Themes help isn’t much use. I’ve been scratching my head with this for hours, I am not new to web design and css but the thesis is trying my patients ;-).

    Anyway, thanks again you have saved my laptop being thrown out the window.

    Regards

    Darren

    Reply
    • Jeb February 8, 2012, 7:52 pm

      Hey D…
      Sweet, always glad to hear I’ve been instrumental in the saving of a life. Glad it helped you.

      Cheers…

      Reply
  • Fabian | The Friendly Anarchist June 21, 2012, 9:43 am

    Hey Jeb, Google definitely rules. After quite some time, it brought me back to your site, only to find out you’re offering precisely the Thesis CSS tutorials I had been looking for. Yay for that!

    Thanks a lot for your work on these, they are GREAT! (Alas, soon TFA will look quite a bit different than now! :))

    Reply
    • Jeb June 21, 2012, 12:20 pm

      Hey there Fabian, nice to hear from you bud…I was just thinking about you the other day. I’m glad these tutorials are useful for you…please feel free to holler if you run into any challenges. Otherwise, idle-on my friend. Cheers…

      Reply
  • Lisa July 17, 2012, 11:16 am

    Hi,

    Great article. It gave me some good ideas, however, I once I get to a certain level in the css (maybe more than 4 selectors), I cannot hook onto them.

    .custom #text-12.widget .textwidget h4 a is not working to style the header, and I’m stuck. Any advice?

    Thanks.

    Reply
    • Jeb July 17, 2012, 11:54 am

      Hey Lisa,
      Thanks for the comment. In that case, you don’t need the extra .textwidget in there. So, to style your sidebar headers/titles, you just do .custom #text-12.widget h3 {font-size:2em;color:#f10000;}, or something along those lines. the -12 refers to the text widget number which you can find using firebug, and all the inside-the-curly-brackets stuff should be replaced by whatever styling you actually want to implement. Make sense? Depending on the type of widget, the additional elements may change a little (like, if there are unordered lists in them, etc), but this should get your widget title styled. Holler with questions.

      Reply
  • Lisa July 18, 2012, 8:10 am

    Thanks for the assistance. I ended up using inline styles for now. I think there’s a problem with the php widget code. Or too many plugins installed for the sidebar. I’m going to mess around with it some more this afternoon.

    Lisa

    Reply
  • Mark July 22, 2012, 1:06 pm

    Hi Jeb,
    Thanks for the css lesson! I’m wanting to use this in the sidebar for my recent posts.
    I got it to work for the h3 using #recent-posts-4.widget, but don’t know the changes in the css
    for the lists.

    Thank you in advance to take a look, I appreciate your help.

    Here’s the link to my site rightonwebdesign.com
    Thanks, Mark

    Reply
  • Mark July 22, 2012, 3:37 pm

    Hi Jeb,
    sorry to double-post, I found my issue, and changing the selector to “ul”
    example: .custom #recent-posts-4.widget ul {…
    was the fix!

    Thanks for the css codes “styling a text widget” lesson. This is a great reference for anyone wanting to go a little farther on their own with wordpress and thesis!
    Hat’s off to you friend!
    Thanks, Mark

    Reply
    • Jeb July 22, 2012, 4:11 pm

      Hey Mark,
      Very nice, glad you found it on your own. Would have been happy to help of course, but I’ve always found figuring things out myself to be most helpful. Cheers, and thanks for the comment, much appreciated. :)

      Reply
  • Mark July 22, 2012, 7:13 pm

    Hey Jeb,
    I just wanted to let you know that this information you’ve provided has given me a good run
    for my site today! You’re absolutely right, that working it out on your own gets the most benefit, but with that said, I am really thankful for what you’ve shared here!

    oh yeah, and..
    I especially like how you are using eStore (sidebar) and how you present your services. Your site is very cool!

    Reply
    • Jeb July 23, 2012, 8:48 am

      Hey Mark,
      I’m glad it’s been helpful to you sir, that’s the goal. :) Thanks for taking the time to say so, and good luck with your site.

      Reply
  • Stephen Cobb September 2, 2012, 2:49 pm

    Excellent tutorial sir!

    I was actually looking at how to style all my widget headings [h3] at once, but this was very helpful. And now I can style each one differently if I want.

    Much appreciated…Stephen

    Reply
    • Jeb September 2, 2012, 8:09 pm

      Great Stephen, so, did you figure out how to do it for all of them also? So you don’t have to do it individually if you don’t want to? If not, let me know. Thanks for the comment. Cheers…

      Reply
  • Jana September 3, 2012, 3:20 pm

    Thanks, this is a great tutorial! But I’m actually wondering how to style all the widgets at once. Is there any chace you could make a tutorial for that?

    Reply
    • Jeb September 8, 2012, 10:18 am

      Hey Jana,
      Thanks for the email. My schedule has tightened up a bit lately, but tell me exactly what you want to accomplish and maybe I can help. So for example, do you want ALL widget titles to be bold and centered? Or something like that? Let me know…

      Reply
  • Brad September 28, 2012, 8:35 am

    Jeb,

    Thanks for the article. I have spent way too much time trying to figure this out. However, I am still having problems getting it to work. I am trying to center the text over my e-mail subscription box at the top of my sidebar.
    My firebug says:

    * * * * Don’t Miss a Single Deal! * * * * Get CRUISING AWAITS Delivered to Your E-mail Box!

    I pasted the following in my custom.css:
    .custom #text-2 .widget {
    text-align:center;
    }
    However, it still is not changing. Any suggestions>

    Thanks!

    Reply
    • Jeb September 29, 2012, 6:53 am

      Hey Brad,
      So, there’s just one thing you’re missing. That text that starts with “Don’t Miss a Single…” – that’s a heading, an H3 heading, to be exact. Which means you’ve either put it as the title of your widget (widget titles are, by default, designated as H3 headings), or in the body/edit box of your widget, you manually placed it inside an H3 tag, by putting an h3 before it and an /h3 after it (NOTE: there should be a < and a > on either side of both the h3 and the /h3, but if I put them in here, it won’t actually show you the text of that tag, it will just execute it, and the ‘before it and an’ will just be made an H3 heading because that text would then be bracketed by actual, functioning H3 tags, if that makes sense).

      So, what that means is that the code you have in there right now is ONLY affecting the main body of your widget, and not the H3 heading. So to get it to affect the H3 heading, you just make one small tweak:

      .custom #text-2.widget h3 {

      That should let you customize the heading with whatever css you like, including centering it (text-align:center;). Please let me know if you have any other questions. Cheers…

      Reply
  • Brad September 28, 2012, 10:05 am

    Sorry…
    My firebug says:

    * * * * Don’t Miss a Single Deal! * * * * Get CRUISING AWAITS Delivered to Your E-mail Box!

    It did not copy correctly in my previous post…sorry!

    Thanks again!

    Reply
  • Connor Gallagher February 5, 2013, 6:15 am

    Great stuff!

    I was looking for advice on how to edit the fonts in my Thesis 1.8.5 sidebar widgets, but in actual fact the advice you provided here was much more extensive than what I was initially looking for and enabled me to make even more customizations.

    So thanks a lot Jeb. I’ve bookmarked your site and will definitely be revisiting whenever I need some how-to articles on customizing Thesis.

    Kind regards,

    Connor :-)

    Reply
    • Jeb February 16, 2013, 9:45 am

      Hey Connor,
      I’m really glad it worked well for you. That’s the goal. ;) Thanks for the nice comment. Cheers!

      Reply
  • Hannah May 19, 2013, 4:07 am

    Thanks. Firebug rules!

    Reply
  • aries August 29, 2013, 11:30 am

    Excellent tutorial..
    Please tell me, how to change font sidebar hover to bold..?
    Thanks before..

    Reply
    • Jeb August 30, 2013, 10:40 am

      Hi Aries…
      Which part, exactly, are you trying to bold on hover? Heading? Or what? Thanks…

      Reply