How to Place Different Background Color for Each Sidebar Heading in Thesis Theme

Normally all sidebar widgets of thesis theme has the same css style. If you add any background color or style to any one of the sidebar widget all widget style has become changed. This tutorial I will show you how to add different background color and style for each widget heading available in the sidebar shown in the below image.

Different background color for each widget

For doing this if you are a firefox user you need firebug add-on. It is used to identify the each sidebar widget shown in the video. If you don’t have firebug just install this add-on before going to see this video. The upcoming tutorial I will show you how to use firebug add-on in firefox browser.

This Video Contains details about…

How to change different background color for each sidebar widget heading?

How to change font size of sidebar widget heading?

How to use firefug add-on in firebox?.

How to get each sidebar widget name in thesis theme?

Adjustment of margin and padding in the each widget heading.

Three examples of how to change sidebar heading text and background color.

Codes

This custom.css code is for the common for all sidebar widget.

Css code for sidebar heading alignment and full width of sidebar heading.

/* save this code in custom.css file */.custom ul.sidebar_list li.widget h3{margin:0 -0.9em;padding:0.5em 1em;font-size:16px;}

Css code to style each widget heading (common code) Watch the video it will show you what are all the changes needed in this code to add different background. If you need you can give background image also by replacing /* , */and image path url in the below code.

This below code you should change li.widget as li#corresponding widget name you got from firebug.

/*common css code for different color in each sidebar heading */

.custom ul.sidebar_list li.widget h3{color:#555;background-color:#ff0000;/* background:url(" enter your image path"); */}

Share your comments on comment section. For more checkout our all Thesis theme tutorials..

{ 27 comments… add one }

Leave a Comment

  • Tony M February 17, 2010, 10:10 AM

    Nice tutorial that not only shows customization of sidebar, but how to be more aware of whats possible in WP and Thesis.

    What Im really wondering is how to make some post titles with background like you have in your posts. Thats really a nice little design.

    Reply
  • Suresh February 17, 2010, 10:22 AM

    Thanks tony,
    keep on reading we have more things to deliver regarding wp, thesis and blogging..

    Reply
  • aviationMY February 17, 2010, 11:06 PM

    Suresh,

    for individual widget style let say i want my #random-posts widget,

    i want it to be flush with the left and both sidebar so there is no space like mattflies.com

    the default for all widget is:

    ul.sidebar_list {padding: 0 !important;}

    but i want to be in a certain widget only like on #recent-post, #random-post and so on… so how to manipulate the code?

    thank you!

    Reply
  • Suresh February 18, 2010, 12:13 AM

    hai aviationMy,
    use the corresponding widget name example for#random-posts
    for full width widget content use the below code

    .custom li#random-posts ul{ margin:0 -1.8em 0 -0.9em;}

    for widget heading use this below code

    .custom li#random-posts h3{ margin:0 -1.3em 0.692em -0.6em;}

    Reply
  • Tony M February 18, 2010, 2:34 AM

    Will this also work for list style images? Such as arrows for bullet points?

    Reply
  • Pascal February 18, 2010, 7:25 PM

    ya it is possible. we will try to put post for your query.

    Reply
  • aviationMY February 18, 2010, 4:14 PM

    Hi Suresh,

    thank you for the tutorial, but the heading works well too BUT in Firefox n Chrome only…when in IE the heading not flush with the right of the sidebars…

    as u can see..my site in IE…theres a white space at the right of the #random-post heading…

    i try display: inline; but it seems make it more worse..is there anything that can make it flush with the right of the sidebars?

    thank you in advance

    Reply
  • Pascal February 18, 2010, 9:46 PM

    I will check, after that i will inform you.

    Reply
  • aviationMY February 24, 2010, 4:59 PM

    Hi fourblogger.com,

    any idea how to fix the sidebar heading not flush with sidebars border in Internet Explorer…?

    mine not flush with the right sidebars if you see my website in IE…

    i hope we got something to overcome it..

    Thank you in advanced.

    p/s: in Google.com.my i just type in fourblo and fourblogger comes out with 82,100,000 search result…hope to learn some SEO from you…if no tutorial, hope can learn privately with you! in y watch, your

    hope this blog remains as a MOST FRIENDLY THESIS THEME TUTORIAL BLOG ADMIN in this globe!

    Reply
  • Suresh February 25, 2010, 10:19 PM

    hai aviationMy,

    To fix the sidebar problem in IE and you can use the below method is used to remove the space in left and right side of a particular widget. follow below steps..
    1. remove sidebar padding. ie .custom ul.sidebar_list{padding: 0em;}
    now all the widgets left and right side spaces are removed.
    2. Now add padding for a particular widget in which you want spaces left and right of the widget. For this use the below code
    for example if you want space for random-posts use
    .custom li#random-posts{padding:0 1em;} now you are getting space left and right side of this widget.
    ultimately you get no space for other widgets as you like..so if you don’t want space for a particular widget add space in other widgets…

    Reply
  • aviationMY February 18, 2010, 10:59 PM

    @Pascal

    thank you…

    Reply
  • Gagan March 11, 2010, 8:45 AM

    Hi Suresh,

    The current thesis design of four blogger is amazing, there are different blocks for post and each sidebar widget. I mean each sidebar widget is in different block with background. Can you tell me how to do it.

    You each post is in different block, please tell us how to do it…

    Thanks

    Reply
  • Suresh March 12, 2010, 4:06 PM

    hai gagan,

    add padding and background color in each widget for this add the code in custom.css file .custom ul.sidebar_list li.widget {padding:1em; border:1px solid #ddd; background-color:#eee;}

    now you will get it..

    Reply
  • Gagan March 12, 2010, 8:10 PM

    Hey Suresh,
    I got it, that is for sidebar, and what about the content box…. I want to make the content box in different background too….. Here is a screenshot that will help you to understand what I am saying :

    http://i39.tinypic.com/34pf59f.png

    ss taken from devilsworkshop dot org

    Reply
  • Suresh March 12, 2010, 8:35 PM

    hai,

    To add background in content use the below code
    .custom #content{background:#eeeeee;}

    if you want to add image in backround
    .custom #content{background:url("give image path here");}

    Reply
  • Gagan March 13, 2010, 7:41 PM

    The code you gave for the sidebar, using that code my sidebar is going out of the main page.. Have a look..

    http://i39.tinypic.com/mav3w9.gif

    Can you provide your own sidebar code please..

    Reply
  • Pascal March 14, 2010, 12:49 AM

    Reduce the sidebar heading width .
    give your site link then only we can able to solve your problems

    Reply
  • Gagan March 14, 2010, 10:03 AM

    my site is : thetemplatebank dot com

    please help me. Can you tell me your email id so that I can have a chat with you directly…

    Reply
  • Pascal March 15, 2010, 9:15 AM

    Email sent to you.

    Reply
  • Gagan March 15, 2010, 9:34 AM

    Hey Pascal, I just sent you an email. Do check it mate..

    Reply
  • Chris January 28, 2012, 5:40 PM

    Hi,

    Used this line (.custom #content{background:#eeeeee;}) to change the background color of my Sticky post.
    When I view the post individually the color has changed.
    But… when I look at the home page, it has the same white back ground as the rest.
    How can I make my Sticky post have a different color when viewing my home page?

    thx

    Reply
  • Steve March 12, 2010, 12:49 PM

    Thanks for the great tutorial, I do have one question….

    It all works perfect except, my sidebar heading text is gray but I want it to be bold and white. What exactly would I put and where in that code where I put it to make that happen?

    Thanks!!

    Reply
  • Suresh March 12, 2010, 4:00 PM

    hai Steve,

    The above post first custom.css code add these terms within the braces shown in sidebar h3 color:#ffffff; font-weight:bold;

    Reply
  • John June 9, 2010, 8:43 PM

    Thanks for the awesome tips!

    Reply
  • Laura June 19, 2010, 2:48 AM

    Hello Suresh,

    I would like to add a Background image to the sidebar heading. Do you have a tutorial on this?

    Reply
  • Pascal June 19, 2010, 9:05 AM

    Hi Laura,

    Yes. It is. Here is the link Background image in sidebar heading

    Cheers.

    Reply
  • Gillis March 1, 2012, 4:32 AM

    Hi Suresh – not sure if you’ll be able to help me but I followed your excellent tutorial and successfully changed my sidebar headings. However, now I wanted to add some new ones, and find I’m completely unable to add them, or indeed to change the colors of the ones I already have! I’m guessing there might be some conflict with something I’ve done in between the two stages – but nothing springs to mind. Do you think I might be missing something? Be grateful for any help you can give.

    Reply