Design a theme for Magento 1.4

2010-02-09 by Frederik (3 comments)

Where do I start?

There are 2 very important directories you need when wanting to create a theme for Magento 1.4

• Directory 1: app/design/frontend/<interface name>/<theme name>/
• Directory 2: skin/frontend/<interface name>/<theme name>/

These directories contain all the files necessary for creating a Magento theme. Directory 1 contains the layout settings and html files of your pages, and directory 2 contains all the styling information (CSS and imag

A helpful theme

I started out with the Magento Blank Interface which is included with Magento 1.4. This is a very basic interface and theme which allows you to start almost from scratch.

First start by creating a folder in the "app/design/frontend/" directory with the name of your interface and in there a folder with the name of your theme. Next you do the same thing, but in the "skin/frontend/" directory.

The easiest way to learn how the blank theme works, is to copy and paste everything from the "skin/frontend/default/blank/" directory into the folder you just created. This makes sure you have some basic styling already, which you can easily adapt to your needs.

To start using your new Interface and theme, you must let Magento know to use your adapted "blank" theme as the new default one. This can be done by accessing the Magento admin panel and going to the Design configuration tab (System - Configuration - Design).

Then you need to fill in the Interface name in the "Current package name" field, and the name of your theme (-folder) in the Default field. If everything is working correctly, you should now see your empty theme being used on the Magento front-end.

Note: Do not forget to disable the system cache by going to System -> Cache Management and disabling all the caches. Else the changes won't be reflected in the front end.

Theme Hierarchy

There is a very important thing you need to know of how Magento works:

There is a certain hierarchy in the themes. To make sure nothing breaks when a certain file is not available in a theme, Magento automatically falls back to the theme lower in the hierarchy. The base theme (Default) contains all the necessary files and is the final fallback option. This means you can just copy the files you want to change to the new theme folder (with the same folder structure as the original files and folders) while the others can be left as they are.

This makes it easier to adjust your theme when there is an update of Magento and it also makes it easy to adjust certain parts of your site, for example if you want a seasonal version of your design. You can just override the files needed with a new theme and leave the others alone.