Change RWD colors

[dpalme]

ok I have been searching on google all night trying to find instructions on changing the RWD theme background and header colors but so far haven't found anything that remotely covers this.

Can someone point me in the right direction?

[Conor_Tomkins · Accepted solution]

Good morning! (Well it is here in the UK).

To edit the colours you need to edit the styles sheet for the template. This can be located at:

skin/frontend/RWD/default/css/styles.css

I suggest making a sub theme so when you upgrade magento your changes will not be over written. Copy the styles sheet from the above location and create a new directory

skin/frontend/RWD/YOUR_THEME/css/styles.css

Now in your admin panel navigate too:

System -> Config -> Design

Leave the current package as RWD but replace skin/images and styles with your new theme name.

You can now edit the new styles sheet and you will see the changes on your frontend.

The blue colour in the 1.9 theme is #39C this should help you find the rules it applies too and change to your colour. But you can use your inspector to find/edit specific blocks.

Also please note that you may need to edit madisonisland.css for certain blocks which is in the same directory. Remember to do the same and make a copy of this in your new template if required.

Remember to clear your browser cache each time you update the styles sheet or you will not see the changes.

Let me know if you need anymore help.

[theMageComp]

Hello @dpalme 

To change the colors in RWD theme you will need to make changes in style.css.

Here is the path of css file skin/frontend/rwd/default/css/style.css

Please use FireBug add on in firefox to check in which class you willl need to make changes in css.

[dpalme]

Thanks guys, sorry for the late response, fighting an infection that can't seem to shake....

When I add the new location for the skin/css etc. do I have the slash included or just the name?

[Conor_Tomkins]

If you are talking about in your admin panels design section, you just put the name of your subtheme. No files need to be declared

[dpalme]

As a follow up, I'm using the inspector in firefox and when I look at the header, the area containing the logo, I get a .page-header-container.  

I added a background-color to it, and it changed it, however there are two white sections on the outside, one on the left and one on the right that still remain "white".  Using inspector, I can't seem to get those areas selected, when I highlight it, the entire page is selectied.

i'm assuming enherited, I just don't know from where.

[Conor_Tomkins]

If your header has no background set it will be transparent and the background colour set for .page will show.

Try setting a background for your .page-header-container insted.

If this is not what your looking for link me to your website so i can see.

Also, if my solution for changing the CSS and creating the new sub template please accept it as a resolution so users in future can find the answer in the thread

[dpalme]

I had it set for the .page-header-container but that doesn't  fix the issue of the corners.

You can see what I mean here: http://www.gatewaytack.com

[dpalme]

Still can't seem to get the color to go to the edges