Updated post with a new and better method.
Today I got a question from Jacob Yap and even though I could easily have answered him within the mail I thought this was a great opportunity to finally start my Thesis page about how to customize Thesis.
Jacobs question:
May I know how to edit background color of the sidebars?
How to change the background colour of the sidebars:
There are a few different methods on how to solve this and depending on what you are looking for I can recommend three of them.
Method 1
Thanks to the simplicity in Thesis we can easily change the colour of the sidebars with one simple line of CSS. Depending of if you want to change sidebar_1 or sidebar_2 you can easily change this within this line:
.custom #sidebar_1 {background:#3971DE none repeat scroll 0 0;}
The problem is that your sidebar more often than not is shorter than the rest of the page. Because of this your sidebar may end in the air, and beneath you have the same boring colour like the rest of the page.
Method 2
If you want the same colour of both your sidebars you can easily get around this by simple using these lines instead:
.custom #content_box {background-color:#3971DE;}
.custom #content {background-color:#FFFFFF;}
Instead of changing the colour of your sidebars you change the background colour for all of your content. Then you simple change the background colour for your main content (post).
By doing so you you will get equally long sidebars, but if your sidebars is longer than you content the background of your content will not reach to the bottom. This happens rarely but one example is your 404-page.
Method 3
This is a hack a lot of sites used back in the old days, but it still works as good as back then. You basically replace your background with a image.
- Take a screenshot of your site.
- Open it in Photoshop and fill your sidebars and content with the background colour you are looking for.
- Crop everything outside of your sidebars.
- Change the height into 1px.
- Save it and upload it to your site.
Now you should have a image looking like this. Head over to your custom CSS in Thesis and add this line:
.custom #content_box {background: #FFFFFF url('http://domain.com/background.jpg') repeat-y top center;}
As you can see on my page about how to make money with Twitter all the background continues all the way down to the bottom now.
What do you want to know?
Do you have another question about Thesis, blogging, personal development or simple a question about me? Simply get in touch with me through my contact form. I will try to answer all of your questions within 24 hours.
Great tutorial and even fast!
P.S. And thanks for the link love too 😉
No problem Jacob. I like to see myself as generous when people are generous back to me. Just visited you site and noticed it solved your problem.
Very easy ^_^ Thanks for sharing!
Thanks, implemented it to draw more attention to one of my sidebars. Oh, you might want to add that it is the custom.css file that needs to be edited. I can see some people would try to edit the regular CSS file in the thesis folder.
Good point Bob, I will do that.
Huh, I’m really weak about php coding. Your explanation there help me a lot. 🙂
I’m glad to hear Fatin. If you’ve got any problem with Thesis or WordPress, just send me a note through my contact form.
Thanks.
I was trying to change but not succeed.
Do you use WP Cache? What did you get instead?
No, I didn’t.
Did you manage to solve it or would you like me to have a look at it? Just contact me through my contact form then.
Thank you buddy,
I have changed side bar.
It is really simple.Thanx for sharing it over here.
I was about to buy Thesis before, but I finally opted in Ultimate Blogging Theme from Carl Ocab. I love the theme and the way things are displayed, but I can’t deny that Thesis is really interesting indeed….
I understand what you mean. I like your theme as well since it doesn’t look to much standard. I will try to get some time to customize me theme as well next month.
Thesis seems so easy to customize. I really wish I had had the budget to buy it. Definitely something I’m going to consider in the near future.
It’s definitely worth the money.
I’m sure I left a comment on this post before, but it seems to be gone or deleted.
Thesis is very easy to make changes to the sidebar colours and the widget headers. You can practically change all details with a few pieces of CSS or PHP coding.
I agree with you Geroge and this is partly the most important reason to why I love Thesis. You can change a lot of things without ever having to change something in the source code of Thesis. Thanks to this you can easily update the theme without having to redo your changes.
One suggestion before you do anything to your CSS code. copy paste and safe it on a notepad. In case you mess up your blog, you still have a backup.
This is the best thing about Thesis, Cyn. Since you’re never changing the core source code you will never mess up your theme. With that said it’s a good idea to have a copy of your changes, as you suggested.
This is great! I’d be happy if you put lots of Thesis tutorials on your site, so every time you figure something out for Thesis customization, please make a post about it. 🙂
Thank you Christie. I will try to make a post every time a make a change in my Thesis-time. Feel free to ask me any questions about Thesis and I will try to make a post of it, while giving you some link love.
Thanks so much Stefan! I think a lot of people are looking for nice straight-forward Thesis tutorials like you gave with the sidebars. I love to have a trustworthy place like this to copy/paste code instead of wading through forum questions and wondering if anyone ever gave the correct answer.
You’re welcome. Hopefully my Thesis page will be exactly what you are looking for within a few weeks.
Thank you very much for this, just what I was looking for, for my new Thesis theme!
You’re welcome Klaus. I’m looking forward to see how you customize it.
I’ve actually already applied it and I found only one problem so far – and you have it too, I see.
If you go to a page not long enough, like this one: http://ducedo.com/404 – then the sidebar color will appear under the page content. If you know what I mean?
You are right Klaus. There is actually a third method which will give you just what you want. I will republish this post tomorrow and show you exactly how to do it.
Looking forward to it, thanks!
Hehe, method #3 sure is a hack… not a hack I’m proud to be using, it’s a pain if you ever want to resize sidebars or simply change colors. But never the less, I’ve added it below method #2, a bit reduntant, but those few lines of extra code shouldn’t slow down anything and then I’m sure it looks as I want to, in case method #3 should fail for some reason.
Thanks for the tip.
You’re welcome Klaus. I’m glad you found it useful.
Appreciate this site. sorted me right out!
cheers
Barb
Nice tip Stefan! Thanks for sharing.
Cheers!
Omar Tariq