How to change the background color of your blog

Change the background of your blog to any color you want, or even change the color with an image. First you need to understand the structure of your blog template. The header, the sidebar, the posts and the footer are in the outer-wrapper. The rest of the page is the body. Changing the background color of the body will change the background of the outer-wrapper, too, but the background of the outer-wrapper can be changed separately ,so it`s possible to use different backgrounds for the body and the outer-wrapper.

1. First let`s change the background of the body: Go to Layout, Edit HTML Find the following code:

body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

Look for the line what i have marked with red, the rest of the code may be different.

Replace the background:$bgcolor; tag (this may be different, just look for the first part of the code: background:) whit one of the following codes.

1. Use a color:

background:#000000;

or

background:rgb(0,0,0);

Here is a list of HEX and RGB colors to use.

2. Use an image:

background:url(http://the-url-of-the-image.jpg);

2. Now let`s set the background of the outer-wrapper:

Find the following code:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Search for the first line of the code , the rest of the code may be different.

Now just do the same as at the body.

And don`t forget to save your template.

Related tutorials: