Select Page

Magento Basics – Simple CSS Changes To 1.9

by | Mar 31, 2015 | Magento Advice | 0 comments

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.

Conor Rhys Tomkins

Conor Rhys Tomkins

Senior PHP Developer

Working with PHP applications since the age of 17. I have a wide range of knowledge on most PHP open source platforms. I must admit, my favorites are Magento & Wordpress!

Still need answers?

8 + 14 =