How to Customize Side Bar Heading Background colors and Fonts in Thesis Theme?

Hi Thesis theme users! Hope you have already satisfied with your thesis theme. You know that our thesis theme looks minimalist. Some bloggers don’t agree with the word minimalist when you use it regarding thesis theme. I am also. You can’t tell it like that. Because thesis can bend and blend as per our wish. Ok. Now i am going to show you how to customize the side bar heading in thesis theme. After learnt this tutorial, you can able to add boxes in side bar heading, change colors of background and text, change font sizes and padding.

In this tutorial, I have included the video & css style sheet code also. Watch the video tutorial. It shows how to do the customization.

Side Bars Background Color and Fonts Customization in Thesis Theme

If you can’t watch the video, then follow the below steps to complete customization of side bars.

1. Normally thesis theme Simple side bars. You want to customize it as per the colors and fonts which you have used in thesis. I have customized my theme as shown in the above video tutorial. I give my

code also here. What you should do with this code is, just change the colors, fonts and padding, and paste it your custom.css style sheet.

Here is the code:

.custom .sidebar h3{background-color: #00B8B8; -moz-border-radius: 4px; padding: 0.1em 0.1em 0.1em 0.5em; font-weight:bold; font-size:1em; color:#ffffff;}

2. Now i show you how to add this code in your custom.css. Go to your wordpress dashboard. Click on ‘Custom File Editor’ under ‘Thesis Theme options’ in bottom left navigation of dashboard.

3. You can see custom file editor box there. Make sure you are going to edit in ‘custom.css’. Because there will be three options.

1. Custom.css
2. Custom_function.php
3. Layout.css

4. Just paste the above code in custom.css. Now you can go and see your sidebars with rich look. You can simply change the color by replacing the color code given in the above code. You can also change the font size of side bar texts by replacing the font size in the above code. If you want to change the width and height of the side bar heading boxes, simple increase the padding mentioned in the above code.

Thesis sidebar customization

Hope I helped you to customize your thesis sidebars.  If you have any questions just leave a comment here or contact us using contact form.  You can also check my other thesis tutorials in our blog or watch all the video tutorials in our YouTube channel.

{ 34 comments… add one }

Leave a Comment

  • Tech Maish January 30, 2010, 11:57 PM

    How to add the same background color as you have added in your blog.

    • Suresh January 31, 2010, 1:12 AM

      Do you need background color for your sidebar heading or site?

  • Mathdelane February 2, 2010, 9:46 AM

    I’m glad I’ve found this tutorial through Google. Thank you sharing this!

    • Pascal February 2, 2010, 10:46 AM

      you are welcome, we have lot of tutorial in our site. it is very useful for you. for more video tutorials subscribe our site and youtube video channel.

  • Suresh February 17, 2010, 10:17 AM

    hai vivek,
    In your custom.css file in header css code brfore the background: #333 url you are having /* but there is no close comment line like */
    thats why your next code sidebar h3 is not working.

    also in sidebar h3 code padding:0 1em; between 0 and 1 is space not hyphen.

  • wilander May 24, 2010, 11:00 PM

    hai suresh

    Any idea for changing footer sidebar title background color alone;
    plz plz

    • Suresh May 25, 2010, 5:20 PM

      hai wilander,

      in your footer widget css code.

      change #footer #footer-setup h3 {background-color: #111;}
      change #111 into any other color code.

  • Riri June 9, 2010, 9:48 PM

    Hi Fourblogger thanks for your tips. Do you know how to make a sidebar heading font in thesis all to lowercase letters? I tried “text-transform: lowercase;” and it doesn’t work 🙁

    • Suresh June 9, 2010, 11:24 PM

      hai Riri,

      Do you want your sidebar heading lowercase?

      use the below code in style.css file
      .sidebar h3 {font-variant: small;}

      by default it will be like the below
      .sidebar h3 {font-variant: small-caps;}

      Just replace small-caps with small in style.css. we cant do this with custom.css file.
      the style.css path is wp-content/ themes/thesis17/style.css

      Keep in mind when you upgrade new version of thesis style.css change wont automatically upgraded.
      You should do it manually again.

      • Jessica August 5, 2011, 5:49 AM

        Thank you for helping out with this! Finally got it figured out after finding this tutorial! Very helpful…

  • Heidi June 15, 2010, 11:54 PM

    I can’t get any changes to apply to my sidebar styling … 🙁

    • Suresh June 16, 2010, 12:14 AM

      hai Heidi,
      I checked your site there is no sidebar style code in custom.css file.
      first add the css code and if you have any problem the leave a comment..

      • Heidi June 16, 2010, 12:41 AM

        Oh sorry! Deleted it because it wasn’t working. Put it back in, and still not working. Thanks!

        • Suresh June 16, 2010, 10:11 AM

          hai Heidi,
          the sidebar code is working fine..

          In your custom.css file you added two close brazes } just before the sidebar h3 code.

          remove one braze the color will be display…

          • Heidi June 16, 2010, 10:38 AM

            Ah, such a silly, simple fix. Thanks so much!

  • Samir Rifai August 19, 2010, 12:04 PM

    Congratulations for your blog. I’ve found many interesting posts which helped mine.

    How can I add a border for each of the widgets in the sidebar. The border must include the headlines, just like yours.

    Thanks a lot!

  • Mia Staysko October 21, 2010, 4:44 AM

    Hi Fourblogger,
    thanks for this, it styled my sidebar headers nicely. However now I am getting the following every time I use the Design Options save button:

    Warning: Invalid argument supplied for foreach() in /home/sacred1/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php on line 468

    Warning: Cannot modify header information – headers already sent by (output started at /home/sacred1/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php:468) in /home/sacred1/public_html/wp-includes/pluggable.php on line 890

    Is this related?

  • Jeremy October 27, 2010, 4:32 AM

    love your tutorials. keep up the good work. thanks.

  • Nicole December 12, 2010, 2:13 AM

    Excellent! This is just what I was looking for. Thank you for this.

  • griselda January 9, 2011, 7:10 AM

    hey. thanks for this great post. unfortunately its not working on my blog. i’ve tried it so many times but no luck. please can you help?


  • Come live life my way February 9, 2011, 1:04 PM

    Do all the codes that you provide here are only for Thesis theme? I think its not going to work for other themes. I have tried some codes but its not showing any results as such.

  • Ronald Redito May 19, 2011, 8:03 PM

    Wow, I now implemented this on my blog. Thank you so much.

  • kd June 29, 2011, 10:16 PM

    Works like a charm. Definitely bookmarking this site!

  • Gouri July 9, 2011, 12:57 AM

    Very useful, thanks.

  • Jonathan Dunsky August 26, 2011, 8:43 PM

    I placed this entire code: custom .sidebar h3{background-color: #00B8B8;

    -moz-border-radius: 4px; padding: 0.1em 0.1em 0.1em 0.5em; font-weight:bold; font-size:1em; color:#ffffff;}

    in my custom.css and nothing happened. Nothing changed. Any idea why?

    I’m using thesis 1.8.2

    • FourBlogger August 26, 2011, 8:58 PM

      hai Jonathan,
      Just add . (dot) infront of custom .sidebar h3 that is it should be .custom .sidebar h3 { }
      Better provide your site link.

  • Eric Bloom September 12, 2011, 10:05 PM

    Hi Fourblogger,

    I see the navigation default font is all CAPITAL LETTERS. How can I use upper and lowercase letters in the navigation menu?

    Thank you.


    • Suresh September 13, 2011, 9:29 AM

      hai Eric Bloom,

      In your custom.css file add the below lines..

      .custom .menu a {

      It will remove the uppercase letters from the navigation menu.

  • Kamal Patel October 18, 2011, 12:31 AM

    if i want to add image rather than the text ….then what i need to do ??

    please to tell me …BTW nice post …im learning thesis from your blog….appreciated more n more.

  • jaspinder grewal March 4, 2012, 6:52 PM

    thanks man.. i really needed to customize the thesis sidebars

  • August 5, 2012, 10:42 PM

    I really appreciate your efforts about bloggertricks