Magento theme hierarchy

In its current releases, Magento supports two themes: a default theme, and a non-default theme. The non-default theme takes priority when Magento is deciding what it needs to display. Any elements not found in the non-default theme are then found in the default theme specified.

Note

Future versions of Magento should allow more than one default theme to be used at a time, as well as allow more detailed control over the hierarchy of themes in your store.

Magento theme directory structure

Every theme in Magento must maintain the same directory structure for its files. As you may have seen in previous chapters, the skin, templates, and layout are stored in their own directories.

Templates

Templates are located in the app/design/frontend/interface/theme/template directory of your Magento store's installation, where interface is your store's interface (or package) name (usually default), and theme is the name of your theme (for example, cheese).

Templates are further organized in subdirectories by module. So, templates related to the catalog module are stored in app/design/frontend/interface/theme/template/catalog/ directory, whereas templates for the checkout module are stored in app/design/frontend/interface/theme/template/checkout directory.

Layout

Layout files are stored in app/design/frontend/interface/theme/layout. The name of each layout file refers to a particular module. For example, catalog.xml contains layout information for the catalog module, whereas checkout.xml contains layout information for the checkout module.

Skins

Skins are not stored in Magento's app directory like templates and layout. They're stored in the skin/frontend/interface/theme/ directory.

Images are typically stored in the skin/frontend/interface/theme/images/ directory. Depending on the CSS used within your theme, your images could be contained within another directory.

CSS files are located in the skin/frontend/interface/theme/css/ directory, which typically includes your theme's print stylesheet, as well as stylesheets for your store's look and feel. Theme-specific JavaScript files are located in the skin/frontend/interface/theme/js/ directory.

Tip

While the locations of these files can be altered in your theme's layout files, maintaining this structure will make your theme easier to use for other Magento theme designers familiar with other themes structured like this one.

If you don't use this structure in your theme, then Magento may not be able to find the elements that it is looking for, so your theme may not work as you expect!

Note

Remember that there's a difference between an interface and a theme in Magento. When we talk about themes, remember that a theme is a part of an interface (also known as a package).

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset