Change Colors on Your Blog

The fastest way to customize a blog template is to change colors. In the blog template, scroll down from the top until you find a CSS rule that looks like this:

body {   background:#aba;   margin:0;   padding:20px 10px;   text-align:center;   font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;   color:#333;   font-size/* */:/**/small;   font-size: /**/small;   }

This CSS rule applies to the background of the entire page. The background:#aba property tells the browser what color to use for the background of the page. In this case it's aba, which is a shortened form of hexadecimal aabbaa, a somewhat greenish blue color.

The hexadecimal color format applies to web safe colorsor colors that all web browsers and the computer operating systems they run on display correctly. You can learn more about hexadecimal colors at these websites:

• PageTutor, http://www.pagetutor.com/pagetutor/makapage/picker/ Includes a valuable interactive color picker. Use this to determine which color to use on your blog.

• Tips n Tutorials, http://www.tipsntutorials.com/tutorials/HTML/ 63 Introduction to hexadecimal colors.

• WebMonkey: "Why October 25 equals December 25 in Hexadecimal," http://webmonkey.wired.com/webmonkey/97/17/index2a.html?tw=design Want to understand decimal, octal, and hexadecimal numbers and how this fits into web color schemes?. Read this article.

Try a white background by changing background to look like this:

background:#ffffff;

ffffff is pure white; 000000 is pure black. So now the entire body section should look like this:

body {   background:#ffffff;   margin:0;   padding:20px 10px;   text-align:center;   font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;   color:#333;   font-size/* */:/**/small;   font-size: /**/small;   }

Notice that the only change is the background property. Copy the entire template by pressing Ctrl+A (+A on the Mac); then paste it into the template page on the blog. Preview the change (see Figure 13.5).

Figure 13.5. Changing the background color on a blog template is simple.

Experiment further with the background by adding an image to the background, as you'll see in the next section.

Remove Graphical Elements In Your Blog

The template used in this example has few images associated with it:

• Rounded corners for the text boxes These tiny graphics give text boxes a rounded look.

• User ID photo You uploaded this.

• Arrows These appear in the Links section.

Your template may be as sparse. If you change your template background to white, you may have to remove graphics to make the page look correct. Simply search for every GIF file or PNG or JPG/JPEG file in the template and replace it with #fff.