Creating a Custom Theme in Magento 1.5

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.

app/design/frontend/default/<yourtheme>/
app/design/frontend/default/<yourtheme>/layout
app/design/frontend/default/<yourtheme>/template

Custom Skins

The same logic applies to the skin directory of your new theme. You will need to end up with:

skin/frontend/default/<yourtheme>/
skin/frontend/default/<yourtheme>/css
skin/frontend/default/<yourtheme>/images

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:

app/design/frontend/default/<yourtheme>/template/checkout/cart.phtml

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:

app/design/frontend/default/<yourtheme>/layout/local.xml

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:

skin/frontend/default/<yourtheme>/css/local.css

Notice in the local.xml file that I added above, I linked up this new CSS file? Once this file exists in your new theme, it will overwrite any design modifications that you want. You can also do exact same thing with JavaScript files.

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.

Therefore duplicate:

a) app/design/frontend/default/modern
b) skin/frontend/default/modern

And rename to:

a) app/design/frontend/default/<yourtheme>
b) skin/frontend/default/<yourtheme>

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s