Blogspot 101 – Background Color
by Revka ~ February 19th, 2008. Filed under: Blogger Tutorials.*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.
- From your dashboard (I’m assuming you’ve already logged into your blog), click on Layout.
- Click on Edit HTML.
- Scroll through the code until you see the section that begins with the word body.
- 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.
- 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;
- 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.
- 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;
- 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).
- If everything is correct, click on Save Template.
Let me know if you need any assistance implementing this tutorial. Happy tweaking! *smile*


November 25th, 2008 at 5:28 am
Hi RS Designs,
I am a beginner in blogging. I had my first blog a month ago, but after purchasing a domain name and their notification that everything went well and I was given a new domain name, my blog has never showed up since. All my attempts to recover my blog was a waste of time: numerous blog. help pages, talking on the phone, internet….nothing. Who knows maybe I made some mistake while signing up. Anyways I am not giving up. I am making another blog, this time with some tweaking of my template. I was very happy to come across your site which was very helpful with making borders and background color. Great tutorial for beginners and non-English-native speakers. Visual help and detailed coding examples are priceless.
I was wondering if you have any advice how to prevent a blog to be disappeared, what new bloggers should know for the blog to be registered correctly.
Thank you ,
Ema
March 1st, 2009 at 11:47 am
This is great – extremely useful and do-able. Thank you for taking the time to post this tutorial.
In response to Ema’s comments, I’m having the same problem. I recently found this and may try it if all else fails. http://joeduck.com/2008/02/17/bloggercom-troubleshooting-ghsgooglecom-ip-fix/
May 30th, 2009 at 5:37 am
Thank you!
I change background on my blog.
July 29th, 2009 at 5:07 pm
Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.