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.
{ 19 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!!!!
I have a problem with IE 6. In all other browsers my blog background color is white, but in IE 6 it is gray. I applied the codes, but still not working. Can you suggests me a code.
The only fix is to ditch IE6. Sorry
Here is a question I can’t get this to work. I’ve tried using the url and such, but I cannot get my background image to show in the page. I want to use a custom image on my page. Can anyone help?
paste the line of css you used on here and we’ll see what the problem is.
Hi Matt,
Really helpful site here! I have changed the background colour of my site to white and, for whatever reason, the background of my reply comments (the ones I make not visitors) remains black.
What did I miss?
Thank you so much for your help
remove this from your custom.css:
.custom dl#comment_list .bypostauthor {
background: #000000;
}
Hi Matt,
The background in my logo has 3 different colors that are layered on top of each other (top = light blue/gray, middle = light gray, bottom = white). I’d like to see how my site would look if I created its background to be similar to the logo. I’m not sure though what the code would be to do this. Do you know if it’s possible to do this and if it is, what would the code be?
Thanks for your help!
Would you be able to help me out? My changes that I make in the custom.css file are not showing up.