Look out for the #header and insert background:
#888 in it.
#header {
float: left;
width: 71%;
text-align: right;
background: #888
}
The color can be replaced with any color of your choice.
The following screenshot is what you will end up with. The red outline is the header section outlined by the Web Developer extension.
You just learned how to insert a hex color code in the
global.css file to modify the header background
color.
Is there a way to change the background color in one section?
Look up the CSS file and see the sections which may be modified to make it easier for you.
Looking back, there are many sections you need to dig through in the CSS file. There is an alternative route to it, but you need to be sure that you are not confusing yourself by inserting new properties into the ID selectors within the global layout section.
If you understood the manner in which you can edit the CSS file, you can also
do this through the /*global layout*/ section. Add
background: color of your choice to the following classes.
/* global layout */
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: left;
background: #C6F66F
}
h1#logo {
float: left;
width: 27%;
margin-top: 0.5em
}
#header_right {
float: left;
margin-bottom: 15px;
width: 73%;
text-align: right;
background: #C6F66F
}
#left_column, #center_column, #right_column { float: left }
#left_column {
clear: left;
width: 191px;
margin-right: 21px;
overflow: hidden;
background:#B4F63D
}
#center_column {
width: 556px;
margin: 0 0 30px 0;
overflow: hidden;
background:#8EEB00
}
#right_column {
width: 191px;
margin-left: 21px;
overflow: hidden;
background: #82B22C
}
The following screenshot is what you will end up with.
The background color for the left column, center column, and right column are
coded in different shades of green. Those areas where you still see grayish
colors and have not changed from the original will require further editing in
the global.css file. Some of which are background images
or background colors on various blocks which we covered in Chapter 5,
Applying Images. Alternatively, you can add new properties in the
various sections, although this will require more understanding of the
CSS.
The global layout changes you made in these classes or IDs will affect the other related pages. An example of the effect will be on the product page, as shown on the next screenshot.
