Changing the background color is super easy, folks. The real question is do you want everything to have the same color background. You probably don’t, so I will show both how to change all the backgrounds to the same color and how to give your site a “page” look. Here we go.
- As with any CSS or PHP customization, you will have to follow the first four steps from my previous tutoring session.
- Use your favorite editor to open the custom.css file.
- Type the following:
.custom { background: #color hex; }
Ta da! Finished. But, wait! It probably looks bad all the same color. Yes, indeed it does. So, add this little gem on the line below what you just entered:
.custom #page { background: #fff; }Obviously, you can choose colors as you please. Remember that #fff is shorthand for #ffffff. So if you choose the color #dddddd, you may shorten it in the CSS to just #ddd.
I believe that covers it.
Don’t have Thesis? Get it HERE.
{ 11 comments… read them below or add one }
Hi! Maybe you can help me find an answer to this. I have a small image (40 x 40 px) that I want to use for the background on my blog. I want it to “tile” both horz and vert and fill in the entire background. I can’t find the css code for doing this anywhere. I’ve tried several different things and could make it fill one row across either way but can’t get it to fill the entire background. Any hints???
Sure. Simply use this:
body.custom { background: url(‘images/yourimage.imagetype’); }
How can you change the color of the Nav Bar and the complete horizontal space that is associated with it?
@Marc
In Thesis 1.6 nav color controls are in the Design Options.
Matt what size should you make the image to fit Thesis background?
@George
The size of a background image depends entirely on the overall size of your site. The answer to this question is purely case by case.
With Thesis is there way to identify the size of your site?
Was I supposed to literally just add “.custom #page { background: #fff; }” ? (I am very new at this this.) Because I did and it didn’t make any difference? Thanks.
I have a gradient image ( 5×745 png ) that I would like to use as a custom background for my site. Since it is only 5px wide, I need it to tile horizontally, but since it is a gradient (light to dark), I don’t want it tiling down. I want to set the background color to the darkest part of the image. I used this code in my custom style sheet, but it did not work. It tiled across fine, but the background color never shows up. Where did I go wrong?
body.custom {
background: #0f5dff url(‘images/bluegradient.png’);
}
thanks for the tutorial. What If I only want to change the color of the background of the posts?
thanks
Depending on your settings, you can change the color of the page (through the thesis interface) or use .custom #content_box #content { color: #a38f83; /* or whatever color */ }
Sorry for being so slow getting back to ya!!!!