Customising the RWD Magento Responsive Theme

The new Magento Community Edition 1.9 and the Enterprise Edition 1.14 have been released with a new theme called RWD (Responsive Web Design). The great thing about this is that retailers now don’t need to have a different theme for mobile and tablet devices, because the responsive theme adapts the layout to the viewing environment.

If you are a web designer, customising a responsive web design can be a little bit more complicated than making the usual ‘Desktop Only’ skin  and separate mobile (adaptive) skin.

The good thing about customising the RWD Responsive theme is that you already have in place the styles and the structure for responsive key elements such as the navigation menu, columns, grids, layouts, branding, and the use of images 1x and 2x resolutions. Therefore customising the RWD theme is much quicker than creating a whole responsive theme from scratch. It is also much better written than all the responsive themes for Magento we have so far assessed.

The new RWD theme uses Sass/Compass technology. Compass is an open-source CSS Authoring Framework which uses Sass, an extension of CSS3 which allows you to add nested rules, variables, mixins, selector inheritance, and more. Basically with Sass you can extend the powers of CSS and also have your stylesheets quite organized. So before you start customising the RWD theme, you must make sure you get familiar with Sass, here are some links for you to get you started:

Sass Guide
Sass Full Documentation

1. Once you have Sass and Compass installed you will need to find the responsive theme code, which are located in the following directories:

Notice that ‘rwd’ is a whole package that has inside a theme called ‘default’.

2. Now, you must create the directories for your new custom package which will be based on the rwd package:

3. Create an ‘etc’ directory in the location below

4. Create a theme.xml file in the location below

5. Add the following code to the theme.xml file to configure the theme fallback

Magento C.E:

<?xml version="1.0"?>
<theme>
 <parent>rwd/default</parent>
</theme>

Magento E.E:

<?xml version="1.0"?>
<theme>
 <parent>rwd/enterprise</parent>
 <layout>
 <updates>
 <enterprise_catalogsearch>
 <file>enterprise/catalogsearch.xml</file>
 </enterprise_catalogsearch>
 <enterprise_checkout>
 <file>enterprise/checkout.xml</file>
 </enterprise_checkout>
 <enterprise_cms>
 <file>enterprise/cms.xml</file>
 </enterprise_cms>
 <enterprise_customer>
 <file>enterprise/customer.xml</file>
 </enterprise_customer>
 <enterprise_newsletter>
 <file>enterprise/newsletter.xml</file>
 </enterprise_newsletter>
 <enterprise_oauth>
 <file>enterprise/oauth.xml</file>
 </enterprise_oauth>
 <enterprise_page>
 <file>enterprise/page.xml</file>
 </enterprise_page>
 <enterprise_review>
 <file>enterprise/review.xml</file>
 </enterprise_review>
 </updates>
 </layout>
</theme>

1. You must copy all the images files from:

 

2. You can copy all the scss files from:

Although this approach will result in having duplicates of files that you will never want to edit. So after you copy all of the files, you can delete the following folders:

After you delete these folders from you theme, they will fallback on the RWD default theme, See the fallback structure.

3. Make sure you copy the file config.rb which is required by compass in the location below:

Put the following code inside config.rb, make sure you change “yourpackagename” and “yourthemename” for your own directory names.

Community Edition:

# note: this should never truly be referenced since we are using relative assets
http_path = "/skin/frontend/yourpackagename/yourthemename/"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true

add_import_path "../../../rwd/default/scss"

output_style = :expanded
environment = :development

Enterprise Edition:

# note: this should never truly be referenced since we are using relative assets
http_path = "/skin/frontend/yourpackagename/yourthemename/"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true

add_import_path "../../../rwd/enterprise/scss"
add_import_path "../../../rwd/default/scss"

output_style = :expanded
environment = :development

Now in the Magento Admin Panel go to System > Configuration > GENERAL > Design.

You may have to flush the cache from System > Configuration > Cache Management if prompted.