Creating an totally unique and custom one can be a difficult process, easpecially taking into consideration number of different interfaces we have. This is why many Magento developers choose to use the CSS from one of mentioned Magento themes that come with default installation and style those up. This is not a bad choice at all as it speeds up the process and those default themes are very good. But, for those of you who wish to make an extra effort, I suggest that you to take a look at Magento Blank Theme for a head start.
Before we go any further, I want to emphasize that one primary difference you’ll realize with Magento is that there are many many pages you or your client may decide to potentially theme individually. (e.g. front page (2 col), catalog pages (3 col), product pages (2 col), about pages (1 col), my cart, checkout–even the email templates are individually themed) Not only that, but there are over 270 unique XHTML template files as well as the CSS for each content block (e.g. my cart, compare products, newsletter, advertisements, etc.) which come with the stock installation of Magento.
Custom Templates & Layouts
To create your own theme inside the default package, you simply insert your new directory, with the subdirectories layout and template.
The same logic applies to the skin directory of your new theme. You will need to end up with:
Adding Custom Theme Files
Any files that differ from the base/default theme should be created within your new theme structure. Remember to ONLY put modified files in your new theme. For example if I wanted to modify the shopping cart, I would add in the following file:
As soon as you add a file with the same names as one in the base theme, Magento will use the one in your specified theme.
Using Custom XML Layouts
Rather than duplicating XML files, Magento would also prefer you to use a single file for all of your layout edits. The filename is local.xml and the path to this file would be:
The following code shows a good boilerplate, plus an example of a custom layout modification:
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <remove name="right.poll"/> <remove name="right.permanent.callout"/> <remove name="left.permanent.callout"/> <!-- add the local stylesheet --> <reference name="head"> <action method="addCss"> <stylesheet>css/local.css</stylesheet> </action> </reference> </default> <!-- Custom Theme Edits --> <catalog_category_default translate="label"> <reference name="left"> <block type="core/template" name="helloworld" after="catalog.compare.sidebar" template="callouts/helloworld.phtml" /> </reference> </catalog_category_default> </layout>
Using Custom CSS
Much like the custom XML file you need to create a new CSS file in your new theme folder:
Modifying Existing Themes
Magento doesn’t like you duplicating its existing themes, but there are so many styles in Magento that if you wanted to have a custom theme you’d be sitting there coding CSS forever, so my advice is that you can do it, but be careful. My personal favourite theme is the modern theme, so if I was doing this I would simply copy across the template files, CSS and images. I would leave all layout modifications to local.xml.
And rename to:
As with creating your own custom theme, only add files where there is a modification in place. There should be no exact duplicates among theme files. If you use this method however, there may be issues with an upgrade – but if you don’t plan to upgrade then I don’t see any major problem.
Applying Theme in Admin
In order to apply your theme to your store, simply go to System > Configuration > Design -> Themes and enter your theme details. You can obviously change the configuration scope to apply a different theme to each store on the installation if you wish.