The next major part of creating our color variation is customizing the "template_css.css" file to contain the correct color information to match the new images that we have created. The template_css.css file contains several classes that control the layout of the template, we will not need to modify all of them, nor will we need to modify any of the layout properties. We will be focusing on just the colors.

• The first class we need to address is the body class. The body class controls the color of the main body text throughout the template. Currently, the body text color is set to a dark blue. We will want to change it to something that better matches our new color scheme. We will be changing the color to #333.
  
  

  body {
  	line-height: 135%;
  	font-family: Arial, Helvetica, sans-serif;
  	color: #333;
  }

• The next classes we need to address are the links. Currently the links in the site are a green color and will not look good with our red and gray color style. We need to change these to something that will compliment our style.
  
  The first set, a:link and a:visited control the color of the regular links and visited links. We will want to use our main red color for these, #CC0000.
  
  

  a:link,
  a:visited {
  	/* color: see style css */
  	color: #CC0000;
  	text-decoration: none;
  }

  
  The second set of link styles, div#bottom a:link and div#bottom a:visited, control only the links that show in our bottom modules area. Since bottom area has a much different background color than our main content, we will need a different color for these links so they are easy to read. For this example, we can try a slightly brighter red color, #ED2428.
  
  

  div#bottom a:link,
  div#bottom a:visited {
  	color: #ED2428;
  }

• The next area we need to address is the html class which controls the color of the background of our site. Currently, we have a gradient image from our Source PNG that makes up part of it, but where that image stops, the old blue color shows. We need to change this color to match the darker end of our background gradient, #666.
  
  

  html {
  background: #666 url(../images/bg.png) 
  0 0 repeat-x;
  }

• Next, we need to change the background color of our sidebar area. In our source PNG we had set this color so that our arrow icon images would have the proper background color in them. This sidebar background, though, is created from the CSS so we will need to change its color from the light blue, to the light gray we used in our source PNG, #F3F3F3.
  
  

  td.right {
  background: #F3F3F3 url(../images/col-divider.png)
   0 0 repeat-y;
  width: 255px;
  }

• Next, we will need to alter the color of the background for our bottom modules area. Part of the background of the bottom modules area is made up of our gradient image from the source PNG, but where that image stops, we still have old dark blue color underneath which will show if the modules in the bottom module area are tall enough. Once again, we will want to use the color from the darkest end of that gradient, #252525.
  
  

  div#bottom {
  background: #252525 url(../images/bottom-bg.png)
   0 0 repeat-x;
  }

• Next on the list, is the color of our main horizontal menu buttons that appears when the mouse hovers over them. Currently they are a light blue color, we will want to change this color to the pale light red that we used for the horizontal bar above the menu bar in our Source PNG, #FF6D6D.
  
  

  div#horiz-menu a:hover {
  	background: #FF6D6D;
  } 

• Next, we need to set our colors for the module areas and the bars underneath the module headers. There are three main module areas, the main content modules, the right column modules, and the bottom modules.
  
  First, we need to set the colors for our main content module headers. We need to set the color of text for the module header (h3) the same color we used for the main body text, #333. Since we did not change the color of our main content background (currently white), we can leave the border underneath the module header the same.
  
  

  div.moduletable h3 {
  	color: #333;
  	border-bottom: 3px solid #e7e7e7;
  	padding: 3px 0;
  }

  
  Second, we need to set the module text color and module header border for the right sidebar modules. We will be using the #333 body color again for our td.right div.moduletable color. For the border underneath the module header, td.right div.moduletable h3, we will want to use the border color we used in our Source PNG for the sidebar area, #ccc.
  
  

  td.right div.moduletable {
  	color: #333;
  }
  
  
  td.right div.moduletable h3 {
  	border-bottom: 3px solid #ccc;
  }

  
  Last, we need to set the module header border for the bottom modules. Once again, we will want to use the module header border color we used in our Source PNG for the bottom module area, #595959.
  
  

  div#bottom div.moduletable h3 {
  	border-bottom: 3px solid #595959;
  	color: #fff;
  }

• Finally, we need to change the color of our contentheadings which are currently set to the green color. Again, we will want to use our main red color that we used for our links, #CC0000.
  
  

  .contentheading {
  	padding: 10px 0;
  	margin-top: 10px;
  	margin-bottom: 10px;
  	line-height:100%;
  	color: #CC0000;
  }

That covers all of the areas that need to be changed to create the red and gray color scheme that we put together in our Source PNG. There are several other classes that could be further customized if you want to put your own touch this style.