How to Change sidebar widget background and Border in Thesis Theme

This video tutorial explains about how to style our sidebar widgets. Normally thesis theme 1.6 sidebar widgets are very simple. In order to look our sidebars pretty we need to  Style your widget  background and text area. sidebar give the better impression to our visitors  so we need to concentrate more on sidebar widget element customization. Normally thesis theme  widget similar to the below image.

Before

To style your widget text area by copy and paste the following code in custom.css file.

/*side bar widget area link style */

.custom li.widget ul li{
background:#F0F0F0;
border: 0.1em solid #C7C7C7;
-moz-border-radius:4px;
padding:0.5em;
margin:0.5em;
}
  1. For do this  login your wordpress admin
  2. Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard.
  3. Select custom.css file and click on edit selected file.
  4. Paste the above code and save it. Then visit your site.

The above code is to style the sidebar widget text link area only not to style the whole widget  area.

The above mentioned code you can change text area background color. The widget text link area contains Line height, font size of the text link. If you want to modify your widget text font Just add font-size: 1.5em; this code is not to change the widget title size. You can also remove border if you don’t want.

You can also style your widget area by adding the following code in custom.css file

/*side bar widget bacground*/

.custom li.widget ul {
background:#444;
border: 0.1em solid #C7C7C7;
-moz-border-radius:4px;
padding:0.5em;
}

For do this follow the above four steps.

The above code contains the background of the widget area. Styling widget title is not included in this code to style widget title click here. Once you pasted the above codes your side bar widgets shown like the below image.

After

Share the experience in comments with new widget style in your sidebar.

For more checkout our all Thesis theme tutorials..

{ 41 comments… add one }

Leave a Comment

  • Himanshu December 30, 2009, 7:33 PM

    Thanks Pascal for this tutorial, I was just looking for this tutorial. You blog is awesome, keep up your good work.

    Reply
  • Pascal December 30, 2009, 11:39 PM

    You are welcome. Keep on reading. We have more customizations.

    Reply
  • aviaitonMY January 17, 2010, 10:36 AM

    Hi, pertaining to your tutorial above,

    how to add background color, image or border in different widget, Ive tried your tutorial it works like charm, thanks.

    but like, let say, popular post, random post, top commentator etc. i want a to add a different background color to make it very2 easy to indicate. like the sidebar heading:

    ***hey maybe you should add this in your tutorial.***

    .custom li#random-posts h3 {text-align: center; font-weight: bold; font-size: 1.3em; color: #FFFFFF; padding: 0px 5px; background: #FD453B6;}

    so hows pascal? i tried to use the same way like the code above but i dont know how to change from the heading to background code…i hope you could fix this for me..

    thank you!

    Reply
  • BestofBlogger December 31, 2009, 8:26 PM

    Thank you very much for sharing friend. But is widjet or widget? i added codes but nothing changed.

    Reply
  • Pascal December 31, 2009, 9:18 PM

    you are welcome. Yes that is widget only. you can change now, it will work.

    Reply
  • BestofBlogger December 31, 2009, 8:27 PM

    And may you tell how can I add 3 column footer to thesis?

    Reply
  • Pascal December 31, 2009, 9:23 PM

    we are already posted. click follow link you can get answer for your question. thanks

    http://fourblogger.com/create-3-column-footer-for-your-thesis-theme/

    Reply
  • BestofBlogger January 1, 2010, 12:39 AM

    ok, I got it, thank you so much

    Reply
  • BestofBlogger January 1, 2010, 4:52 AM

    And i have a question also. How can i entegrate gallery plugin (fancy-transitions-featured-gallery) to thesis or any slide show plugin? Please help me.

    Reply
  • Pascal January 1, 2010, 12:50 PM

    let you soon we will put post for your question.thanks..

    Reply
  • Sriraj January 3, 2010, 5:03 PM

    Thanks Pascal. I was listening to your tutorial yesterday on YouTube and now implementing then on a test site. Will shift to thesis very soon

    Reply
  • Pascal January 3, 2010, 6:20 PM

    You are welcome sriraj. you can customize your thesis theme as your own wish.

    Reply
  • Tony Thomas January 5, 2010, 7:04 AM

    WOW-WEE! That was awesome!

    Great tutorial… All of your videos
    are great!

    Thank you, so much Pascal!

    Reply
  • Pascal January 5, 2010, 9:32 AM

    Thanks Tony. Do you use Thesis Theme?

    Reply
  • Tony Thomas January 5, 2010, 9:46 PM

    Yes, my partner has it. Configuring site
    as we speak. Will be uploading it soon.

    If it were not for your tutorials
    we’d be lost!

    Thanks again!!!

    Reply
  • Tanmoy January 10, 2010, 5:03 PM

    Graet thesis customization tutorials are here i think.

    Reply
  • Pascal January 10, 2010, 6:13 PM

    Thanks Tanmoy. We have made all tutorials with videos. You can get all videos here http://youtube.com/fourblogger

    Reply
  • Shahab khan January 30, 2010, 2:23 AM

    Thanks for the nice article man. It helped me a lot!

    Reply
  • Suresh February 17, 2010, 10:13 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. you should add */ this line in header css otherwise remove /* in ths same line.

    Reply
  • Ben February 24, 2010, 8:33 PM

    Thanks for tutorial. However, my column order is S1 content S2. And when I apply your code to css only sidebar 2 changes. How can I also change S1?

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

    Give your site name, then only we will rectify your error.

    Reply
  • Lisa June 30, 2010, 12:15 PM

    Thankyou. That was just the thing I was looking for.

    Reply
  • Rachel July 30, 2010, 12:35 AM

    How do I add frames/borders around each of my FOOTER sidebar widgets so there is no space between theme? Something like the example you have above but without the dark background and keep the frame? I just want to add frames/borders to the content in my footer widgets ( I have four footer widgets installed and I used your footer widget tutorial).

    Thanks,
    Rachel

    Reply
  • Richard September 3, 2010, 3:26 AM

    Very nice tutorial. Thanks !!

    Reply
  • LIC September 12, 2010, 3:56 AM

    Nice info about Thesis theme. I used this theme on my WP blog. Good tips.

    Reply
  • Nainar January 16, 2011, 10:15 AM

    useful informative site. keep it up.congrats

    Reply
  • Kristin Moore January 25, 2011, 3:31 AM

    Hello,
    I used all of your code above and it worked perfectly for my widgets which contain custom menus. BUT, I added an additional custom menu on one of my pages, and some of the formatting is not applying to that one widget. The colors are good and match the original sidebar widgets. But on this page http://www.twistarsusa.net/college-recruits/ each of the links has too much padding (they’re too fat). Do you know how I can apply the same styling to this custom menu?

    Thank you!

    Reply
  • Pascal January 25, 2011, 8:08 AM

    contact us through contact form to hire us to get done any thesis customizations. thanks for commenting.

    Reply
  • Danny May 16, 2011, 11:45 PM

    Thanks pascal, you always come up with the best thesis TUTORIALS on the net, keep up the good work, and keep posting them good thesis video tutorials.

    Reply
  • Rick July 1, 2011, 4:45 AM

    Hello,

    Didn’t seem to work with mine using Thesis 1.8

    Rick

    Reply
  • Raj July 25, 2011, 4:13 PM

    this is what i am looking.. thanks for the tutorial..

    Reply
  • Martina October 10, 2011, 9:43 PM

    hey Pascal

    this is also what I am looking for
    but it does not work
    I pasted the code to the custom.css, but there is no effect.

    does it work for the newest Thesis version?
    all the best

    Reply
  • Suresh October 11, 2011, 9:19 AM

    Hai Martina,

    This css code will work any version of thesis theme. Once again try it.

    Reply
  • Suresh October 11, 2011, 5:26 PM

    Hai Martina,

    In your sidebar widget dont have list items so just relplace the below line
    .custom li.widget ul li {

    with
    .custom li.widget {

    and style your sidebars..

    Reply
  • Martina October 11, 2011, 5:40 PM

    Suresh

    It works!
    patience is golden, asking questions when we need answers

    thanks a lot:)
    M.

    Reply
  • Mike October 17, 2011, 5:39 AM

    thanks a lot for this posting! a long time i was searching for this information about how to change a widget background!

    Reply
  • FourBlogger October 17, 2011, 10:06 AM

    Glad this post helped…. Thank you for using our tutorial.

    Reply
  • Jonathon Villaescusa December 7, 2011, 3:18 AM

    Hey, wanted to see if there was a way to remove the side bar completely from certain pages. I want these pages also to be a full width page so extending to the sidebar area.

    I am using Thesis Theme too.

    Any help would be really appreciated….also love the new skin you guys made…thinking about getting it myself!

    Reply
  • FourBlogger December 10, 2011, 4:32 PM

    Jonathon,
    Look for this tutorial Remove sidebar on specific post and remove sidebar on pages and modify as full width.

    Glad you like our thesis skins I hope it helps

    Reply
  • ahmadshorif January 15, 2012, 10:19 AM

    you describe this is for thesis theme . Is the way is same for all others theme ?

    Reply
  • michelle March 30, 2012, 10:18 PM

    I used the code above to try and change my background color and nothing happened. I also used the one in your book copy and pasted it and the same thing happened. I am not sure what else I need to do.

    I am also trying to get a side bar in my footer like the one on this site http://www.gillickcopy.com/

    Not sure what to do to get it there exactly like this with the footer border color as well. Any suggestions would be greatly appreciated.

    Thanks.

    Michelle

    Reply