The default Magento 1.9 RWD theme is responsive, clean and offers a variety of features including product zoom & colour swatches, great out of the box or great to modify with CSS changes.

In this tutorial i will explain how to make simple design & CSS Changes which can include a change of background colour, font colour & styles. I will explain what is possible with use of custom CSS in an advanced tutorial at a later date.

Create a Sub Theme

Firstly it is important to create a sub theme for the RWD package, this will stop your custom changes getting overwritten in any future update of your store.

1. Navigate to:

skin/frontend/RWD/default/css/

Download both styles.css & madisonisland.css

2. Create a new directory

skin/frontend/RWD/YOUR_THEME/css/

3. Upload both of the downloaded CSS files to your new sub theme directory.

4. In your Magento admin panel navigate to:

System -> Configuration -> Design

5. Do not change the package name, leave this as RWD, but under “Theme” change “Skin (Images / CSS)” to YOUR_THEME.

Now you should be able to make changes to your new styles.css & madisonisland.css and your changes will not be overwritten when you next update/upgrade your Magento installation.

Using your browser inspector tool you can find the rule that applies to each block and the line it is on within the styles sheet. This will allow you to make simple changes to font & background colours amongst other things for advanced CSS users.