Enter your keyword

Changing The Background Color of Your Website

Changing The Background Color of Your Website

Source: DIYThemes

Source: DIYThemes

Now that you’ve located your custom.css file in Thesis, you have mastered all of the technical tools, pretty much, that you need to start changing the way your site looks. What the custom.css file does is override the regular, default settings for all of the stylistic elements of your theme and replace them with the values you want; for example, if you want your background to be red, you put the instructions to color the background red into your custom.css file, and then the browser knows to use that preference instead of the default color (white, if you’re using Thesis). This replacement is all done through copying and pasting text files via Fetch, there is no fancy design program needed.

The only catch is that you have to learn to speak the browser’s language when you tell it to change something–in this case, that means you need to learn how to tell it to change something using CSS.

In order to introduce you to the method of changing stylistic elements on your site in bite-sized pieces, I’m going to first show you how to change one small element with CSS: the background color. Please note that there is a “background starter kit” available for Thesis users on the DIY Themes site. The “background starter kit” will allow you to make changes on your background, but it doesn’t really explain why and how the different code elements work. My goal today is to start with that background starter kit and explain how each element works, so that you can (hopefully) learn to transfer what you learn into other elements of your site’s design.

The Three Regions of the Thesis Background

Whenever you want to change a style element on your site, you have to figure out what the area is called in CSS. This is where having the Firebug extension is very handy. With Firebug, we can just right-click on an area on the page and find out the CSS at work there. For expediency’s sake, I will just tell you how the Thesis theme background works (but for those of you not using Thesis, you can figure it out on your own by using Firebug): there are three elements that control the way the Thesis background works:

  1. The “body” class;
  2. The “container” class; and
  3. The “page” class.

What the hell does that mean? Well, basically, it means that there is not just one “background” to the Thesis theme. There are three different regions that can be colored different colors according to your preference. Many people may choose to have all of these three regions to have the same colors in order to present the illusion of having only one region. The way that you do this is to set all of these regions to the same color, and then everything will look seamless. But there are also some interesting things you can do by using different colors and elements to the regions, as you’ll see below.

To get an idea of what each region does, first we’ll look at the “map” of Thesis provided on DIYThemes, which I’ve placed it in the header of this post. The map shows that Thesis has three different elements that comprise background, but because they are colored in similar ways, it might be a little difficult to discern where one starts and another begins. So I’m going to use some real world examples to show you sites that use the three elements.

The Custom Body Class

ScaryMommy uses Thesis with a custom body class background color.

ScaryMommy uses Thesis with a custom body class background color.

OK, first of all, there is the “body” class element, which corresponds only to the left and right sides in the page map above. It is the part on the left and right sides of the Thesis map that appear as grey margins, but not including the top and bottom of the page. To see what a site looks like when it has a different color for just the “body” class element, check out the screen shot of ScaryMommy‘s site at right. She is using Thesis with a custom body class, and has set her body class background color to #454344.

If you wanted to change your background to look exactly like ScaryMommy’s, you would do so by putting this into your custom.css file.:

body.custom {
background: #454344;
}

Make sure you check the box for using a custom stylesheet in the Thesis Options menu.

Make sure you check the box for using a custom stylesheet in the Thesis Options menu.

Right now, assuming that you have installed Thesis right out of the box, the body class element is coded in your Thesis files to be background: #FFFFFF, or completely white. If you wanted to just change the body class, or just the left and right sides of the outermost frame of your page, you would take the following steps:

  1. Make sure the “use custom style sheet” button is checked in your Thesis Options Menu;
  2. Use Fetch (or whatever FTP program you like) to locate your “custom” folder in Thesis;
  3. Download a copy of custom.css and save it to your desktop;
  4. Paste the above code into custom.css, down near the bottom, after all of the text that is already there, using a text-editing program like WordPad or TextEdit (on Mac);
  5. If you want a different color, you can also change the color code to whatever you want it to be at this point (look up color codes here);
  6. Save the document as custom.css on your desktop;
  7. Delete the copy of custom.css that is currently live on your website site using Fetch (you just click “delete”);
  8. Upload your new custom.css file to your server using Fetch; and
  9. Refresh your page to make sure that the changes took place.

The Custom Container Class

The Daily Blonde is using a custom body class and a custom container class.

The Daily Blonde is using a custom body class and a custom container class.

Let’s say that you like the way a different colored body class looks, but you also want to have the tops of the page colored to match your side margins. An example of a site running Thesis that has done this is The Daily Blonde. She is running Thesis with a custom body class and a custom container class, and both have their backgrounds set to: #39605F. Say you wanted to alter your site like this, but still using ScaryMommy’s color scheme (for the sake of an example): you would do the above steps for changing the body class, and then add this additional information to the code in your custom.css file using the same steps as outlined above:

.custom #container {
background: #454344;
}

This will leave you with a white page on a grey background. You can play around with the colors to see what you like best, but if you want the background to appear seamless, you have to make sure that everything is changed in both places.

The Custom Page Class

The page class is the part that appears in white on your site after you’ve colored both the custom body and custom container classes. In other words, it holds all the content. If you wanted to change the background for this class, you could do so by including the following code in your custom.css file:

.custom #page {
background: #454344;
}

This would change the background of your site completely grey, but for obvious reasons you probably don’t want to do this. While there are good examples of people who use alternatives to white for the content portion of their blogs, I am hesitant to even show you how to do it here, frankly, because black on white is so much easier to read. If you do decide to change the background color of your site, stick with light neutrals in order to keep your readers happy!

No Comments

Post a Comment

Your email address will not be published.