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.

  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*

4 Responses to Blogspot 101 – Background Color

  1. Ema

    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

  2. Alger

    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/

  3. Winx

    Thank you!
    I change background on my blog.

  4. Martin-Biering

    Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.

We Welcome Your Comments

...but spam will be deleted. Thanks!

CommentLuv Enabled



© 2007-2008 RS Designs | design by Revka and Linda of RS Designs Berries and Cream Blog Design