Design a theme for Magento 1.4
Where do I start?
There are 2 very important directories you need when wanting to create a theme for Magento 1.4
- Directory 1: app/design/frontend///
- Directory 2: skin/frontend///
These directories contain all the files necessary for creating a Magento theme. Directory 1 contains the layout settings and html files of your pages, and directory 2 contains all the styling information (CSS and images).
A helpful theme
I started out with the Magento Blank Interface which is included with Magento 1.4. This is a very basic interface and theme which allows you to start almost from scratch.
First start by creating a folder in the “app/design/frontend/” directory with the name of your interface and in there a folder with the name of your theme. Next you do the same thing, but in the “skin/frontend/” directory.
The easiest way to learn how the blank theme works, is to copy and paste everything from the “skin/frontend/default/blank/” directory into the folder you just created. This makes sure you have some basic styling already, which you can easily adapt to your needs.
To start using your new Interface and theme, you must let Magento know to use your adapted “blank” theme as the new default one. This can be done by accessing the Magento admin panel and going to the Design configuration tab (System – Configuration – Design).
Then you need to fill in the Interface name in the “Current package name” field, and the name of your theme (-folder) in the Default field. If everything is working correctly, you should now see your empty theme being used on the Magento front-end.
Note: Do not forget to disable the system cache by going to System -> Cache Management and disabling all the caches. Else the changes won’t be reflected in the front end.
There is a very important thing you need to know of how Magento works:
There is a certain hierarchy in the themes. To make sure nothing breaks when a certain file is not available in a theme, Magento automatically falls back to the theme lower in the hierarchy. The base theme (Default) contains all the necessary files and is the final fallback option. This means you can just copy the files you want to change to the new theme folder (with the same folder structure as the original files and folders) while the others can be left as they are.
This makes it easier to adjust your theme when there is an update of Magento and it also makes it easy to adjust certain parts of your site, for example if you want a seasonal version of your design. You can just override the files needed with a new theme and leave the others alone.
(old comments imported from Petralian v6)
Comment by Mike Yonas | 2010-03-16
Comment by Charles Coleman | 2010-04-20
Please read the warning on this Magento Wiki page about just copying everything from the blank theme to the new theme. Yes, it’s easier to do that, but you will have a harder time upgrading in the future and lose out on theme hierarchy mentioned at the end of the blog you’re currently reading.
Comment by Nathan Petralia | 2010-06-06
You are definitely correct, we also just used blank theme as a guide and starting point combined with the guide you mentioned ~
Thanks for your comment!
Comment by George | 2010-10-06
There are the “layout” and “template”folders inside app/design/frontend/your interface/your theme/. Are they just folders without any content? then from where did you copied the contents?. Please notice the Blank theme contains only 2 folders:
Comment by Nathan Petralia | 2010-10-07
The “layouts” dir inside your appdesignfrontendxxxx has XML files. Those XML files load and position the “templates” PHTML files in this theme xxxx of your Magento website.
The “templates” folder has PHTML files which have the actual app containing the HTML, jQuery, PHP and name it code.
The etc map is used to let Magento know about custom widgets and modules (Google “how to write a module for Magento” for more info).
The locale map is for putting translations of your modules for different locales of your Magento site (if you have more as one language).
Any of the appdesignfrontenddefault folders will be “empty” initially… Magento 1.4 only puts the structure there, up to you to fill it up with extra codes and enhancements…
For example the www.mouyatea.com website has a appdesignfrontendmouyamouya folder where we put the XML and PHTML for many page rearrangements, ajax checkout and many other enhancements that made that site unique.
Best practice is to leave the files in the default dir as they are and copy what you want to change to your new xxxx dir, then load your xx theme in the Magento backend and let Magento fallback on default for the things you did not customize.
Actually as a closer I want to say… if you are a beginner and you don’t make your own modules or need to customize the layout of your Magento website… you might never need to touch any of the appdesignfrontendxxxx directories… what matters most for visual changes to the blank theme is the skinfrontenddefaultblank map… (but as said before, better copy the map and change the name so you have made a “new” theme.)