Create Custom Responsive Theme in Magento

You’ll do your responsive theme development using a copy of the responsive theme provided with Magento CE and EE. This section discusses how to create new top-level directories for your theme and to copy files to those directories.

The rwd/default theme falls back directly to the base/default theme, so themes in the default package will never be included as a part of the fallback chain.

Magento EE only. The enterprise/default theme is completely replaced by rwd/enterprise and therefore, enterprise/default is not included as a part of the fallback chain.

Base directory of your custom theme will be like below(referenced from magento root directory):-

app/design/frontend/custompackage/customtheme
skin/frontend/custompackage/customtheme

Create the above base directories(folders) via command tool or FTP client or cPanel File Manager. Then edit the theme.xmlfile.

theme.xml file has different content for Community Edition(CE) and Enterprise Edition(EE).

For Community Edition,

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

For Enterpise Edition,

<?xml version=”1.0″?>
<theme>
<parent>rwd/enterprise</parent>
</theme>

It’s very important you have a theme.xml in the

app/design/frontend/custompackage/customtheme/etc

directory with exactly the contents shown. If theme.xml is not configured correctly then magento will not load your theme.

To avoid unexpected errors, best practise is to copy the files from rwd/default and then edit the files accordingly. so the following files should be copied and edit (assuming first / is magento root directory)

/skin/frontend/rwd/default/images to /skin/frontend/custompackage/customtheme

/skin/frontend/rwd/default/scss to /skin/frontend/custompackage/customtheme

After copying the files, the folder structure will be like below picture,

Magento Create Custom Response theme folder structure

Note : You can configure a Compass watcher to watch your skin directories for changes in CSS and JavaScript and compile them when something changes. You can do this by PHP IDE or command tools.

Leave a Comment