We've taken a look at what Magento is capable of, and examined some existing Magento themes, including the default theme displayed after installation. To begin theming Magento, we need to look at what a theme is made of.
A Magento theme consists of three things:
- XML layout files: They specify how the design is laid out.
- PHTML templates: It is a mixture of PHP and HTML files, which specify how specific elements (for example, the shopping cart) of a layout look.
- Skins: They provide the Cascading Style Sheets (CSS), and the images needed for creating the desired look for your Magento skin.
The meaning of the terms theme and interface in Magento Commerce are contrasting.
An interface in Magento consists of one or more themes that together make up what you see in your store, as well as what it looks like to your customers. As we will see, Magento supports more than one theme at a time, so an interface is not necessarily just one theme.
A theme in Magento is what defines the look and feel of a store. Interfaces can have multiple themes assigned to them in Magento, enabling seasonal images to be used during certain periods, such as Christmas or Thanksgiving (in America).
A theme is what contains the layouts, templates, and skins, which we'll come to later in this chapter.
Just to add to the confusion, there are also two types of themes: Default themes and non-default themes.
A default theme in Magento is the primary theme of an interface. Magento looks for this default theme, and will load it to your store's frontend (that is the part that your customers see).
A non-default theme allows you to create seasonal-looking online stores by applying as many or as few additional design elements, such as CSS or images, as you need. Non-default themes can also be used to customize your store to:
- Create a different look or layout for certain product pages, which require less (or more) information than normal products.
- Provide a way to display new products or even products that are "coming soon" without allowing customers to add them to their carts.
- Customize certain aspects of your store for country-specific requirements like customers expecting a button in a different position on the web site in a country.
As you can have multiple themes in Magento, there is a hierarchy for themes in place so that you can predict which themes will be displayed with a scheme of inheritance. The default theme provides a base for every aspect of your Magento store, from how it looks to where things are displayed. Subsequent themes can then overwrite what the default theme tells Magento, and any elements that are not overwritten are inherited from the default theme.
The default theme is always the lowest level theme in Magento's hierarchy. This means that non-default themes will simply overwrite what the default theme provides Magento with.
Skins, layouts, and templates are what Magento needs in a theme. Each of these helps to change a Magento theme in some way. Changing the skin changes the look and feel of your store, while changing the templates and layouts will change how the store is displayed, and what is displayed in it.
Skins within a Magento theme are what make the theme look the way it does. Skins specify colours, typefaces, and some layout rules, courtesy of CSS files and images. Your Magento theme's skin can also include JavaScript files to change your store's behavior.
Magento skins include files that affect your store's color scheme and logos. The default Magento theme is shown in the following screenshot:
With some quite extensive changes to the skin elements of the Magento theme, our store can be made to look more like Magento's modern theme.
As you can see, the skin elements of a Magento theme offer a lot of flexibility in creating different visual impacts.
The layout of the various views in Magento, such as, the shopping cart, product detail pages, and product results page, are controlled by the layout files. Magento's layout files are written in Extensible Markup Language (XML).
Layouts are also used to add, remove, and manipulate elements in views of your Magento store. By manipulating layout files, you can:
As an example, see the default Magento theme at http://demo.magentocommerce.com:
This theme relies on a three-column layout, where a central column is used for the primary content of the page, and the two supplementary columns are used for additional comments. The products page use a two-column layout, and this change is achieved by changing the theme's layout files.
There are two types of blocks in Magento:
A layout makes use of both types of blocks, as do templates in Magento.
As mentioned before, Magento templates specify what is to be displayed in each block of content in the form of content blocks. Template files are in PHTML.
The PHP in these template files is solely for the presentational logic, that is, the PHP is used only to make visual changes to your store in the template files. However, it doesn’t affect the operation of the store itself, for example, calculating the cost of items in a shopping cart.
In Magento's default theme, a structural block comprises of an element of your store such as the shopping cart, a poll, or the page's main content, which is highlighted in the following screenshot:
Templates in Magento are split into two different types. Firstly, there are skeleton templates that provide an overall structure for a page, such as one-column, two-column, and three-column layouts. Secondly, templates provide the HTML for the content blocks for each of the features that were highlighted earlier.
By handling templates this way, Magento further separates the templates' content from the layout of the store, allowing easier changes to either the template or the layout, without you needing to worry about one affecting the other.