Magento theme files
As you have already seen, Magento themes use a number of different types of files to change how your e-commerce website is displayed to your customers. The following four groups of files are associated with Magento themes:
- Skin files
- Layout files
- Template files
- Locale files
Skin files
Skins encompass the files that you would associate with a website's design: the CSS, images, and JavaScript your theme requires in order to display your store.
In Magento, skin files are located in the /skin/frontend/ directory. Magento's base skin files are stored in the /skin/frontend/base/default directory of your Magento installation, while theme files, which you would typically edit for custom themes that you create, would be included in the /skin/frontend/name-of-your-package/name-of-your-theme/ directory.
In the examples used in this book, you will be building a theme in the default package, so your skin directory will look like this: /skin/frontend/default/name-of-your-theme/.
Layout files
Magento uses XML layout files in its themes to inform Magento about which blocks are displayed where in the page and in what order, for example, the MY CART and COMPARE PRODUCTS widgets that use Magento's default theme, as shown in the following screenshot:
The Magento layout can also be used to add and remove CSS and JavaScript files as well as other elements from the <head> element of your Magento theme and alter the order and location of the links.
Magento's base layout files are stored in the /app/design/frontend/base/default/layout directory of your Magento installation, while your custom theme's layout files can be found in the /app/design/frontend/name-of-your-package/name-of-your-theme/layout directory.
In the examples used in this book, you will be building a theme in the default package, so your application directory will look like this: /app/design/frontend/default/name-of-your-theme/.
Template files
Magento's template files (which use the .phtml file extension to indicate a mixture of PHP and HTML) provide your Magento theme with a way to generate the HTML for your store's pages using the data and content stored within Magento.
Magento's base template files are stored in the /app/design/frontend/base/default/template directory of your Magento installation, while your custom theme's layout files would be found in the /app/design/frontend/default/name-of-your-theme/template directory.
Locale files
Finally, Magento's locale files help you customize the text in the interface elements of your Magento store, such as the text used as links in the userbar for your store, as shown in the following screenshot:
A Magento locale file can also be used to provide a translation of your store's elements to French, or even just American English to British English. In the preceding example, a locale file might change the My Cart link to My Basket, for instance.
The content of pages and products of your store can be translated by creating new products and pages in your new store's language within the store view for that particular language.
Magento locale files are stored in the /app/design/frontend/base/default/locale directory, with locale files specific to your theme being stored in the /app/design/frontend/name-of-your-package/name-of-your-theme/locale directory. Translations are stored in a translate.csv file; for example, /app/design/frontend/default/name-of-your-theme/locale/en_GB/translate.csv contains the translations for British English for that particular theme.
Packages
In Magento theming, a package typically encapsulates a default theme that contains all of the skin, template, layout, and locale files Magento needs to render the website. It might also contain another non-default theme that customizes the look and feel of the website on top of the base theme, as illustrated in the following diagram:
Assigning a package at the website level means that all the stores under that store level inherit that package. This would simply apply the theme to all of the stores assigned to that particular website in Magento. So, by assigning a theme at the website level in the following diagram, the Cap store and the T-shirt store would inherit the same theme, unless it was specifically overwritten at the individual store view level:
