Exetail Capital Partners | Customising the RWD Magento Responsive Theme
2154
post-template-default,single,single-post,postid-2154,single-format-standard,qode-listing-1.0.1,qode-social-login-1.0,qode-news-1.0,qode-quick-links-1.0,ajax_fade,page_not_loaded,,qode-theme-ver-12.1,qode-theme-bridge,bridge,wpb-js-composer js-comp-ver-5.4.2,vc_responsive
 

Customising the RWD Magento Responsive Theme

Customising the RWD Magento Responsive Theme

rwd-magento

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.

Characteristics of Responsive Web Design

  • A responsive design is based on fluid grids, rather than absolute units like pixels or points, we will use percentage relative units on our css. ie. div { width: 70%;}
  • Images must also have a max-width and height in relative units with css.
    ie. img { max-width: 100%; height: auto}
  • The use of CSS3 media queries allow us to use different CSS style rules depending on the characteristics of the device where the website is being displayed.
    ie. @media only screen and (max-width: 770px) { /* the css inside this media query will only display on viewports smaller than or equal to 770px */ }

Sass / Compass Technology

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:
You must install Compass library into your development environment for Compass to be able to compile the Sass files into CSS, otherwise you won’t be able to see the changes you make on the Sass files.Have a look at this tutorial about Sass and Compass InstallationWe assume that you know how to use Terminal, but if you don’t, it will be good for you to check out this designer’s guide to use the Terminal to get you started.

Step 1 – Create your Directory Structure

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

  • app/design/frontend/rwd
  • skin/frontend/rwd

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:

  • app/design/frontend/yourpackagename/yourthemename
  • skin/frontend/yourpackagename/yourthemename
directory-structure

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

  • app/design/frontend/yourpackagename/yourthemename/etc

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

  • app/design/frontend/yourpackagename/yourthemename/etc/theme.xml

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>
directory-structure-2

Step 2 – Copying the files

1. You must copy all the images files from:

  • skin/frontend/rwd/default/images

To:

  • skin/frontend/yourpackagename/yourthemename/images

 

2. You can copy all the scss files from:

  • skin/frontend/rwd/default/scss

To:

  • skin/frontend/yourpackagename/yourthemename/scss

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:

  • skin/frontend/custompackage/customtheme/scss/core/
  • skin/frontend/custompackage/customtheme/scss/function/
  • skin/frontend/custompackage/customtheme/scss/layout/
  • skin/frontend/custompackage/customtheme/scss/mixin/
  • skin/frontend/custompackage/customtheme/scss/module/
  • skin/frontend/custompackage/customtheme/scss/override/
  • skin/frontend/custompackage/customtheme/scss/vendor/

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:

  • skin/frontend/yourpackagename/yourthemename/scss/config.rb

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
directory-structure-3

4. You have to copy only the files that you would want to override from:

  • app/design/frontend/rwd/default/template

To:

  • app/design/frontend/yourpackagename/yourthemename/template

5. The best practice for changing magento layouts is using a local.xml file.

  • app/design/frontend/yourpackagename/yourthemename/layout/local.xml

Check out the Magento Documentation for creating a new theme.


Step 3 – Configure Magento Admin

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

  • In Package, in the Current Package Field put yourpackagename
  • In Themes, in the Default field put yourthemename
  • And click Save Config button at the top.

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

magento-design-configuration

Can’t see your changes?

Don’t forget you need to configure Compass to watch your skin directories for changes. Compass will compile your .scss files into .css files. Otherwise you won’t be able to see the changes you make in your browser.

Because you installed Sass and Compass previously, you can just type the following command in Terminal

  • cd my_magento/skin/frontend/yourpackagename/yourthemename/scss compass watch

Leave Compass polling for changes while you work on the customisation of your theme.

compass-watch


Resources:
Responsive Web Design
RWD Magento Guide
Sass Language Guide
Sass Documentation
Compass Documentation