As we've seen, we can change a lot of our Magento store by creating a Magento theme based upon an existing theme. We can take this further by looking at the following in more detail:
- Preparing the design for our new Magento theme
- Creating the layout, which our new Magento theme will need
- Creating the relevant blocks and templates for our store
A great way to understand clearly how Magento themes work is by customizing a theme more heavily than simply changing its logo or colors, which is what we'll do for our new Cheesy Cheese Store's design:
You'll notice that it's a three-column design, with a column for the primary information of the page, a column for promotional graphics (such as "free delivery this week"), and a last column for the shopping cart and other store-based functionality.
The design is achieved through some relatively simple XHMTL and CSS and a small number of images. The basic structure of our new theme contains:
- A header that contains the logo, navigation, and links to our visitors' accounts
- A left column, for the page's primary content
- A central column, for promotional graphics and messages for our store's visitors
- A righthand column, for our store's functionality such as shopping cart and product comparison feature
- A footer that contains our store's copyright notice and links to other store-wide features such as the Site Map and the Advanced Search feature. This is contained at the bottom of the lefthand column in our new Magento theme.
Magento is a huge system to work with. The easiest way to make sure that you don't miss anything while theming it is to simply install Magento's Blank theme again, and start from there. To distinguish it from our previous Magento theme, we will call our new skin cheese2, so copy the files from a clean copy of this theme in the blank directory in to a new directory called cheese2.