First open the stylesheet.css in the folder includes/templates/your template/css folder
I am assuming your using the classic template so open the css sheet and look for these lines and using the newest version of zen
Code:
/*sideboxes*/
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633;
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}
.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}
The colors I marked in red are the sections you need to edit for the background color changes, read the title of the stylesheet that that line of read is in and that will explain the function of the color your changing.
For example
Code:
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}
#ffffff is the color of the background of your sideboxes simply change that code to the color code of your choice, and goes for the rest if you wish to change them as well, not required.
experiment a little, be sure to back up any file you play with incase you mess up.
Also you can go here http://www.w3schools.com/css to the famous css school and learn a little at the same time
Good Luck