RS Designs

*To view all of the posts in this series, either click on the following link, or type Blogger Tutorials into our search box.*

I think it’s high time I added another tutorial to my series Blogspot 101.

The border tutorial was a big hit, and I am happy to have been able to help you spruce up your design. I have had many requests for a tutorial detailing how to create an image border. I will get to that eventually. That can be a complicated task requiring a lot of tweaking.

Several people have asked how they can have their background one color and their content area another. That is actually quite a simple task, and I will show you how to do that in this tutorial.

1. From your dashboard (I’m assuming you’ve already logged into your blog), click on Layout.
2. Click on Edit HTML.
3. Scroll through the code until you see the section that begins with the word body.
4. Under that line, look for a line that begins with “background:” (the word and the colon, not the quotation marks). If that line is not there, simply add it. Make sure to add the colon after the word background.
5. To change your page’s background color, you will need to insert a color code, which is the pound sign (#) followed by a six digit/letter code. For this example, I will use, #000000. That is the code for black. (You can find web-safe color codes at Page Tutor or WebsiteTips.com. WebsiteTips.com also offers free color schemers and color palette tools.) After you type in the code, finish with a semicolon. Your line of code should look like this - background:#000000;
6. Next, you need to change your content area background color. Scroll further down in the code until you find the section that begins with outer-wrapper.
7. Follow steps 4 and 5, but change the color code to #ffffff. That is the code for white. Your line of code should look like this - background:#ffffff;
8. Click on Preview. If you have done everything correctly, your page background should be black (or whatever color you specified), and your content area should be white (or other color).
9. If everything is correct, click on Save Template.

Let me know if you need any assistance implementing this tutorial. Happy tweaking! *smile*