Need help? Check out our Support site, then


Change background colours in Piano Black theme

  1. I am currently working on a private test site as I want to change the whole look of my blog (cup-let.com), but without affecting it whilst I try out new themes. I am currently working on a test with theme Piano Black, and would like to change the background colours for the following: main column, sidebar, site title box and menu box. I've looked in the original source code for the theme, but am having problems locating where I can change these. Can anybody shed any light?

    The blog I need help with is sliceofcuplettestsite.wordpress.com.

  2. Hello there,
    Please be patient while waiting for Staff support with your CSS editing.

  3. Thanks for your reply. It's been a while since I last posted on the forum, so I wasn't aware that support was now only coming from staff. Hopefully they'll be able to answer my question soon :)

  4. There's nothing preventing any other members from helping you but lately I have not seen that happening.

  5. Two weeks on and I haven't had any feedback from CSS staff :( Do you think I should close this one down and re-open, in the hopes it'll be picked up by someone?

  6. 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;
    }
  7. Wow, that IS a lot of work you've put in for me! And really really appreciated. I've been playing around with some of the options you've suggested and I think I'm starting to get somewhere. It would have taken me weeks to work this out without your input, and even then I wouldn't have come up with some of the things you have suggested! So thank you very much for all your help. Hopefully my new look blog will launch very soon... :)

  8. Thank you. I'm happy I could help, and I bet your site is going to look great! :)

  9. The new look is starting to come together now I think :)

    I have one little niggly problem left that I'm struggling to adjust. Again, its to do with colours in the Piano Black theme.

    As I have changed the theme colours from black to purple, it is now hard to see the icons that sit next to the text in the footer.entry.meta field (the small icons next to "Posted in..." and "Leave a comment"). Is there a way for me to change the colour of these icons so that they are more visible? I'd ideally like to have them match the colour of the text in these fields (which is #B8B8B8). Any advice on this would be greatly appreciated :)

  10. You can't change the icon colors themselves using CSS only because the color is set inside the images. However, you can upload a new version of each of the icons with the colors you want instead and replace them using CSS like this:

    .cat-links {
    background: url(YOUR_CATEGORY_ICON_URL no-repeat 2px -1px;
    }
    
    .comments-link {
    background: url(YOUR_COMMENT_ICON_URL) no-repeat left top;
    }

    Replace YOUR_CATEGORY_ICON_URL and YOUR_COMMENT_ICON_URL with the image URLs for the replacement images you uploaded to your media library.

    Note that you would need to create the new images with different colors on your own. Here are the original ones for reference:
    http://s2.wp.com/wp-content/themes/pub/piano-black/img/category-icon.gif
    http://s2.wp.com/wp-content/themes/pub/piano-black/img/write-comment.gif

  11. designsimply, you are a genius! It took me a while to sort out the background colour for the image, but I've done it now and it works! Even better, it looks just how I wanted it to :D Thank you so much for all your help. I should be ready to go live with my new look site by the end of the day :)

  12. Yay!

Topic Closed

This topic has been closed to new replies.

About this Topic