Hi there, I check the threads based on the last reply, so if there are other replies in between I might not see your request as quickly. Also, your question is actually quite involved and took some time to work on.
would like to change the background colours for the following: main column, sidebar, site title box and menu box
In the Piano Black theme, the background color for the main content area and sidebar are setup using an image: http://s2.wp.com/wp-content/themes/pub/piano-black/img/side.png
That is a design method that is used to get the look of a sidebar that spans the entire height of the theme even though the sidebar is not really that tall.
So there are actually some things to decide and a few different options to consider. First, you could change the background color for the entire content area keeping the content and sidebar color the same, and you could add a left border to the sidebar to separate it a little. This option allows you to just change out the color with CSS without messing around with images:
#primary {
background: midnightBlue;
margin: 0 -350px 0 5px;
width: 949px;
}
#secondary {
border-left: 2px dotted black;
}
Adjust the color names as necessary.
Another option would be to change the entire main background color to something, and then change the primary content area (which is laid over the top of the main area in this theme) again to get the effect of two solid colors for the backgrounds of the main content and sidebar:
#main {
background: #222;
width:953px;
margin-left: 3px;
}
#primary {
background: midnightBlue;
margin: 0 -350px 0 0px;
width: 617px;
}
You can even use some CSS3 to add in shadows to get a similar effect to the background image, which has a shadow built in on the left and right sides. Note that CSS3 is still in beta and only works in some browsers. For example, the following would work in IE9 but not IE8:
#main {
background: #222;
width:951px;
margin-left: 4px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), -0 0 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), -0 0 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), -0 0 4px rgba(0, 0, 0, 0.4);
}
#primary {
background: midnightBlue;
margin: 0 -350px 0 0px;
width: 617px;
}
Another option would be to replace the background image with an image you create that has different colors. You would want to download the image, create a new version, upload the new version to your media library, and replace the image URL in the following CSS with your custom image:
#main {
background: url("http://s2.wp.com/wp-content/themes/pub/piano-black/img/side.png") repeat-y;
}
With all of these options, the background image used in the footer no longer matches up with your new colors. One way to deal with that would be to remove the footer background image entirely like this:
#colophon {
background: none;
}
Another option would be to save the background image, customize the colors, and replace the image in the theme with a custom image you create (just like the image option mentioned above for the main and sidebar columns:
#colophon {
background: url("http://s2.wp.com/wp-content/themes/pub/piano-black/img/bottom.png") no-repeat top;
}
To change the background color of the site title box in the Piano Black theme, try this:
#branding {
background: darkGoldenrod;
}
If you do that, you'll probably also want to change the site description and RSS feed link font colors to make them more readable. You could do it like this:
#site-description, #rss-feed, #rss-feed:hover {
color: black;
}
Then there's the question of the RSS feed link. It uses a background image that assumes a black background color for the header: http://s2.wp.com/wp-content/themes/pub/piano-black/img/rss.gif
To replace it, you would need to recreate the image with the colors you want, upload the new image to your media library, and update this CSS with your new image URL:
#rss-feed {
background: url(http://s2.wp.com/wp-content/themes/pub/piano-black/img/rss.gif
) no-repeat left top;
}
Then there's the question of the search box in the header. The colors in the search box are also setup using background images. To replace them, you could use this CSS and replace the image URLs with custom ones that you create and upload:
#search-area {
background: url("http://s2.wp.com/wp-content/themes/pub/piano-black/img/search-area.gif") no-repeat, url("http://s2.wp.com/wp-content/themes/pub/piano-black/img/search-button.gif?m=1352062105g") no-repeat right;
}
#search-area input[type="image"] {
display: none;
}
To change the background color of the menu box in the Piano Black theme, try this:
#access {
background: midnightBlue;
}
If you do that, you may also want to change out the colors of the menu font colors, submenu backgrounds, submenu font colors, and borders. Here are all the relevant CSS rules to the menu colors. You can just change out the color codes to colors of your choice:
#access {
background: #000;
}
#access li {
border-left: 1px solid #222;
}
#access a {
color: #888;
border-bottom: 2px solid #000;
}
#access ul ul a {
background: #000;
border: 1px solid #222;
}
#access li:hover > a {
color: #83bac4;
border-bottom: 2px solid #83bac4;
}
#access ul ul :hover > a {
color: #83bac4;
border-bottom: 1px solid #222;
}
#access ul ul a:hover {
background: #222;
border-bottom: 1px solid #222;
}
#access .current_page_item a,
#access .current_page_item a:visited,
#access .current-menu-item a,
#access .current-menu-item a:visited {
color: #869497;
border-bottom: 2px solid #627376;
}
#access .current_page_item a:hover,
#access .current-menu-item a:hover {
color: #83bac4;
border-bottom: 2px solid #83bac4;
}
#access .current_page_item ul a,
#access .current_page_item ul a:visited,
#access .current_page_item ul a:hover,
#access .current-menu-item ul a,
#access .current-menu-item ul a:visited,
#access .current-menu-item ul a:hover {
border-bottom: 1px solid #373737;
}
designsimply
