More Template Changes

I'm going to be changing the pages colors to match what I did in the header. If you aren't familiar with how they colors are defined on web pages, it can be a bit intimidating. In basic terms, they are defined using the amount of red, blue, and green in the color. That's easy enough, but they are defined using hexadecimal which begins looking like some type of alien language for the uninitiated:

#ffcc22

Here's how it works in a nutshell (without worrying about all of the math). The first two characters are the amount of red, the next two are green, and the last two are blue. The higher the number, the more of that color there will be, and each digit goes from 0 to f with f being the highest (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f). If you want all red and no other color, you would use #ff0000. All green would be #00ff00 and all blue is #0000ff. The other two of interest are black (no color): #000000; and white (all colors): #ffffff.

If you're lost, don't worry. You don't really need to know all of this. Most graphics programs will tell you the RGB values of a color, and there are some handy color-picking tables available on the web.

In my case, I want the background parts of my page to be the same green as the background of the header. Looking back at my image editing software, I see that it was #75bb4e. I'll make the following edits in styles.css to set this color (only the changes sections are shown):

#header {
margin: 0;
padding: 0;
height: 334px;
width: 100%;
background-color: #75bb4e;
}

...

body#background {
background-color: #75bb4e;
}

Similarly, I'll update the test portions of the page to be the aged white color: #efece5. That's in the following sections. You may not want to make all of these the same color, but it works for the look I'm going for. To do this in CSS, change the colors marked in green below; you can remove the red lines and these sections will get their background color from the page itself:

#page {
 background-color: #efece5;
 margin: 0px;
 padding: 10px;
 width: 968px;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 display: block;
 }
...
#content {
 width: 574px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding-right: 10px;
 padding-left: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
    background-color: #f8f8f8;
  border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 text-align: left;
 }
...
#footer {
 margin-top: 0px;
 width: 968px;
 height: 30px;
 clear: both;
    background-color: #dddddd;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 }
...
#products {
 width: 100%;
 margin: 0px;
 padding: 0px;
 border: 0px;
 border-style: solid;
 border-color: #efece5;
 }
...
tr.row1 {
   background-color: #efece5;
   border-style: solid;
 border-color: #efece5;
 border-width: 1px;
   }
...
#navigation ul {
 text-align: left;
 font-size: 12px;
 padding-left: 5px;
 list-style-type: none;
 list-style-image: none;
   background-color: #dddddd; 
  }
...
#viewmore {
 text-align: right;
    background-color: #ffffff
  }
...
#sortbox {
 width: 100%;
    background-color: ;
  border: 0px;
 border-style: solid;
 border-color: #efece5;
 }
...
#search {
 padding: 12px;
 margin-top: 0px;
    background-color: #efefef;
  color: #333333;
 font-family: Arial;
 font-size: 12px;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 text-align: left;
 }
...
#sidebar {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 10px;
 float: left;
 width: 175px;
   background-color: #f8f8f8;
     text-align: left;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 }
...
#sidebarright {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 0px;
 float: right;
 width: 175px;
    background-color: #f8f8f8;
    text-align: left;
 border-style: solid;
 border-color: #efece5;
 border-width: 1px;
 }

Now I just need to find a darker color of the antique-white for some of the other sections of the page. I'll mess around with it a bit and show what I did in the next post. For now, here's what the site looks like: