Starting a New Design Package and Theme in Magento

So you’ve bagged a cool Magento project and came up with a great design. You’re itching to start slicing your png/psd and dicing up the Modern theme in app/design/frontend/default/modern/ because it’s already got the right layout for the most part and you want to re-use some of the design areas such as My Account pages…

This is the time to hold your horses and plan your design file structure cos, here’s what thoughts might be flying through your head:

• “Should I just edit the files in /default/modern?”
• “I could copy the /default/modern directory to /default/mytheme, then edit the files.”
• “What if I create my own package/theme?”
• “( . )( . )”

Let’s have a look at Magento’s theme file structure:

Default frontend design template

Default skin folders

Let’s look closer at the default Magento design folder structure. Since Magento 1.4 the front end design has a base folder which implements all the layouts and phtml templates of a default Magento site. The next sibling folder is default. This contains the customized designs that implement the various themes that are shipped with Magento such as the default, blank and modern themes and the iphone theme.

If you look at the theme folder contents closer, you’ll notice that some have very few layout and template files, why?

That’s because everything is “inherited” from the base theme and our default sub-folders contain only theme overrides. Layout files and template files placed here will override the ones in the same location under the base folder. Also, every time you update Magento, chances are that some of the default shipped theme files have changed also.

With that in mind and the fact that most times you will want to use one of these themes as the starting point for your own theme, how can you leverage off the theme override mechanism and keep your site upgradable with as little hassle as possible?

Custom frontend design template

Custom skin folders

Here I chose to create my own design package called mypackage and copy the theme I want to base my design on into the default sub-folder. Then I created a master folder. This is where I’ll be putting my own theme overrides under master/layout and master/template. The same applies for files in the skin folders in which case the overrides are the css, js and image files. Bare in mind that if you copy the skin.css from your default folder, you will need to copy all the images as well since the CSS will have relative image paths. A better approach is to add your own mytheme.css file and keep the original in its place.

Why copy the starting design into default you ask?

Well, we need it so that this can be our starting design, otherwise our theme falls back straight to the base design. Also, come update day, and the theme you started from had updates, you can simply re-copy the whole theme into your default theme folder and have potentially most of the theme updates applied to your theme also. Of course, if you have a lot of overrides, then you’d have to compare those files with the original ones and merge in any updates if they are important.

You can see that this approach gives you a lot of flexibility and keeps your site more upgradable. Of course, you still have to run a comprehensive file comparison between upgraded and your custom theme files but it’s a great deal easier when there’s only the files you overrode.

Originally published on magebase.com. Copyright © 2010 Magebase - All Rights Reserved.