Theming Magento eShop frontend : a beginner’s guide

In a previous article, We’ve briefly explained the four concepts behind Magento’s rendering system. The last 3  entities are  perfectly understandable for web developers :

• template (in app/design/frontend) stores HTML code for a series of twenty page types and page components, such as  catalog, navigation, shopping cart, checkout, cms.
• Skin (in skin/frontend) stores the css stylesheets,
• Locale stores language specific strings, in CSV format

Instanciating your own template out of Magento’s default install is a child game. Our introduction article covered the automatic installation of packaged themes from Magento Connect : to perform the same task manually, you’ll just have to perform a simple cut & paste operation of two basic folders :

• template : copy / duplicate app/design/default/frontend  to app/design/frontend/YOURTHEME
• skin : copy /duplicate skins/frontend/default to skins/frontend/YOURTHEME
  Notice at this stage that two skins are copied : you’ll have to specify the skin you want in the backend System / configuration /design form, as shown below

The first entity, though, is a bit harder to understand. It is called Layou and  is coded out of raw XML format, and explained on Magento’s Designer Guide.