In this article I will be showing you how to create your own custom theme for Magento 1.4. Rather than creating a totally bespoke theme, we will create a theme based on the default theme. However, by doing this, you will have all of the information needed to create your own totally bespoke Magento 1.4 custom theme.
Directory StructureThe first part of creating your custom theme is to create your directory structure. To understand this, first we need to learn about themes and packages.
Package & Theme: What's the difference?Look at the directory structure below and see whether you recognise it.
In the above scenario, the default package houses 2 separate themes. In theory, a package can contain as many themes as you like. The beauty of this system is that as well as having your base theme, you can create new themes which simply enhance your base theme. This allows you to reduce the amount of code you need to write and maintain!
The Directory Structure in Magento 1.4
Template Fall Back in Magento 1.4This subject almost deserves an article of it's own, however, I will try and condense it here without stripping too much out. In the above directory structure, there are 3 packages:
- base - contains the theme default
- default - contains the theme default
- fishpig - contains the themes default and fish-theme
When trying to access view.phtml, Magento would access the following files until either the page was found or an exception was thrown.
We are now presented with two options:
- Allow our theme to fall back to base/default
- Copy over base/default files to fishpig/default and use that as our fall back
Skin foldersJust like the template and layout folders, the skin folders operate using base/default as a fall back. While templates can be vary similar cross-theme, CSS will most likely be entirely different. Because of this, the default CSS and JS are stored in default/default rather than base/default.
For this example I'm going to create a package called fishpig and a theme called fish-theme. Start by creating the following folders:
Now that we have created a custom theme, it is time to enable it in Magento.
In my next post I will explain about the following things
- How to Enabling our Package/Theme in Magento 1.4?
- How to Creating a template file?
- How Customising the default Magento theme?