Would you like a different background color at your website? It’s easy. I’ll show you how.

First, let’s talk about the page background. That’s the color around the container where your content is.

On my Business of Art website (Arts-Careers.com), the background is dark grey. The arrow in this picture points to the area that I’m talking about.

Let’s say that I want to change that background color to green. It’d look like this, instead. (The red arrow points to the change I might like.)

To make that change, I’ll use any text editor (or simple HTML editor where I can write code) and open the file wp-content > themes > branfordmagazine > style.css

In that CSS file, look for the code for the body of the document. It looks like this:

That code, #333, indicates dark grey. (That’s the same as #333333, by the way. Since all the numbers are the same, all the way across, only the first three are necessary.)

Tip: In CSS, “background” is usually the background color. “Color” is usually the text color.

To make the background color a dark green (color #006633), I’d change the CSS to look like the following.

Then, I’d upload this edited file via FTP. After that, I’d look at my website and tweak the color (in style.css) until I was happy with it.

CONTAINER BACKGROUND CHANGES

But, let’s say that you want to change the background color for your container… where the content is. This can lead to many other changes, such as the header and so on, but the following will get you started.

The background color of the container is controlled by the style.css file as well. The following screenshot shows the part of the CSS code you’ll be changing.

That should help you customize the Branford Magazine theme to make your site look more unique.

Reminder: This is a good example of how I explain things — with screenshots — throughout my book, Sites that Soar! (If you don’t own a copy yet… get one now!)