Customizing background is one of the effective way to change the feel of your theme.
Last week, one of the readers, Azzam, asked how to change background color in Thesis Theme. Although it is not difficult, but I think it is better to create a tutorial to explain the idea of changing background color in Thesis Theme.
How Thesis Background Works?
Out of the box, Thesis comes equipped with a markup structure that can accommodate background changes with ease. Three HTML elements are involved in the background:
<body class="custom">
<div id="container">
<div id="page">As you can see, there are 3 background layers in Thesis.
How To Change Thesis Background Color?
Here are the 3 steps you can easily follow.
Step #1: Open custom.css
Open custom.css file using any text editor of your choice such as Notepad. The file is located at thesiscustom folder. This file is specially created for you to customize the design of Thesis Theme such as font, font size, font color, background color and etc.
Step #2: Adding Background Color
Add the following codes to your custom.css file and save it.
body.custom {
background: #44443f;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
padding: 0.3em;
background: #33332f;
border: 0.4em solid #3e3e3a;
}
.custom #page {
background: #fff;
}
From the picture above, you can clearly see the meaning of each line of codes.
Step #3: Changing Background Color
From the code above, there are 4 colors you can change. The color is in hexadecimal format with a leading #. #fff or #ffffff is white color and #000000 is black color. You can use online color picker to help you convert color into hexadecimal format.
http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html
http://www.colorschemer.com/online.html
Step #4: Upload custom.css To Your Web Server
Finally upload modified custom.css file to your web server. Done, you should be able to see the effect now.
Conclusion
It is quite easy to customize the background color of Thesis Theme and you can change the color yourself even you are not too familiar with cascading stylesheet. In my next Thesis tutorial, I would like to continue to explore the possbility of incorporating background image instead of just background color.
Related Posts:
{ 3 trackbacks }
{ 16 comments… read them below or add one }
Excellent.
Thanks you for this post.
What about if you wanted to add an image as a background?
Azzam
@Azzam,
As usual, I will prepare another post to explain the concept.
Hello, I tried this tutorial but unfortunately, it didn’t work. My whole blog has turned gray when I only wanted the background to be gray while the container will remain white. What can I do to change this? Thanks
@Aubrey,
Are you using Full-width framework in your Thesis theme? If yes, please try to change it to Page framework.
I was having the same problem as Aubrey and was very frustrated. Thank you for filling me in about the Page framework setting!
Is there a way to do it with full-width framework?
Thank you for the information about setting it to page framework
Dude you TOTALLY stole this from the Thesis developer site.. including the screen captures. Unless you work for DIY Themes.. that is so wrong.
Hi,
I copied the code you have listed here to change the background on my Thesis theme. It worked fine and I spent a good part of the afternoon experimenting with different colors.
Somewhere, somehow, something weird happened though and now, no matter what Hex code I put in to change the background, all I get is white.
I deleted the code and started over and the same thing happens. I can’t for the life of me figured out what happened.
Any suggestions?
FYI: You can still use the full-width framework, just change the code from page being a is a class not an id. However their may be some disagreements on making a page a class or a id. However this is what the full-width framework changes page too. Below is show additional changes I made to allow this to work with the full-with framework.
body.custom {
background: #44443f;
margin-top: 2em;
margin-bottom: 2em;
}
.custom #container {
padding: 0.3em;
background: #33332f;
border: 0.4em solid #3e3e3a;
}
.custom #header {
background: #ffffff;
}
.custom .page {
background: #ffffff;
}
.custom #footer {
background: #ffffff;
}
oh, thank you so much for this tutorial! my site is a work in progress but now i’ve learned one more customization. woo hoo.
thanxs for the work
great tutorial, I’ve done to my new blog right now… thank’s
Nice post. I use the thesis theme on one of my blogs and i love it
Thanks a lot Bey. That was great.
Tons of thanks.
Thanks so much! I’ve been trying to figure out how to lose the top margin for awhile and accidentally stumbled onto it here!