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… read them below or add one }
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.
Thanks tony,
keep on reading we have more things to deliver regarding wp, thesis and blogging..
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!
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;}
Will this also work for list style images? Such as arrows for bullet points?
ya it is possible. we will try to put post for your query.
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
I will check, after that i will inform you.
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!
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…
@Pascal
thank you…
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
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..
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
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");}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..
Reduce the sidebar heading width .
give your site link then only we can able to solve your problems
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…
Email sent to you.
Hey Pascal, I just sent you an email. Do check it mate..
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
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!!
hai Steve,
The above post first custom.css code add these terms within the braces shown in sidebar h3
color:#ffffff; font-weight:bold;Thanks for the awesome tips!
Hello Suresh,
I would like to add a Background image to the sidebar heading. Do you have a tutorial on this?
Hi Laura,
Yes. It is. Here is the link Background image in sidebar heading
Cheers.
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.