Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Magento customized themes

In this post I will talk about creating custom themes, overwriting a template for your theme and activating template path hints.


The creation of a unique look for your store is an essential part of making your products stand out from the competition, however the application of a custom theme to a shop to give it that one off look need not be an epic struggle.

Below are some techniques you can apply to your Magento store to give it that unique look and feel. I will cover how to create and set up a custom theme, make customizations to standard Magento templates and how to display Template Path Hints to aid in editing these templates.

Note: this guide provides instruction on creating a new Enterprise Edition theme, tested on 1.13.

How to create a new theme:

1.When creating a new theme we start by navigating to app/design/frontend. There you will find base and enterprise folders; this is the standard, core design that comes prepackaged with Magento Enterprise.

2.In here create a folder that will serve as your namespace (also sometimes referred to as interface by some instructional materials) and is usually your company’s name, so in our case we will call it invent.

3.Now create a folder for your custom theme. For the purpose of this tutorial I will name our folder edison. This will serve as the home of our new theme.

4.Next, from the enterprise folder, copy the default folder to your namespace folder (invent). This will serve as a fallback on your own theme. At this point any custom template or layout modifications that are not picked up will be directed back to this folder. This folder can also be Symlinked instead of copying.

5.Inside the new folder create the three standard theme folders:

         1.Layout - this will contain your custom layout xml files.

         2.Locale - this contains any translations for different regions.

         3.Template - this will contain your entire custom template.

 

By now your project should look something like this:

1.Next we will set up the folders for custom css and the images. Navigate to the root of your project, skin/frontend. This folder will reflect the folders found in app/design/frontend and again contain the base and enterprise folders.

2.Now follow the same process as in step two, three and four: create a namespace folder (invent) and inside that a folder for your theme (edison). Then copy the default folder from the enterprise folder to your newly created one.

3.In edison create the 3 standard skin folders, which are:

1.css - this will contain your new custom css files

2.Images - images used specifically for your theme

3.js - theme specific javascript






Does yours look like this yet?

Now that the folder structure is set up in your new theme the following additions need to be applied to the Magento backend:

1.Navigate your browser to http://localhost/yourproject/admin and login using your admin credentials.

2.Navigate to System > Configuration

3.On the left hand navigation, click on Design, which can be found under the General heading.

4.Under Themes you will find Translations, Templates, Skin and Layout. Add the name of your theme folder into the text fields in order to ensure that your store looks in your theme for the appropriate layout xml, templates and translations. If this is not found it will fall back to the default folder, which is the standard Magento design.

 

 

Congratulations! You have just created and set up a custom theme in Magento Enterprise. To see this in action let’s make an edit to the standard header and do a test. To do this follow the instructions below:

1.In invent/edison/template, create a page folder, and inside that create the html folder (note: this structure needs to mirror that of the default folder).

2.In invent’s default folder navigate to template/page/html/ copy header.html and paste it in your newly created folder.

  

3.Inside header.phtml make an edit to the header tag. Let's change it's background  color orange, refresh your homepage and you should see it reflect.          

<div id="header" style="background-color: #ff9900;">

 

The following technique can be used to overwrite any of the standard Magento templates and is a quick way of customising your store.

Now that you are able to edit your templates knowing which templates are displaying on a specific page is as easy as toggling the template path hintson and off. This displays the name and file path to a specific template location. By following the below these can be customisedfor your theme.

To achieve this:

    1.Navigate to System > Configuration in the Magento backend.

    2.Under the Advanced heading on the left hand navigation, click on Developer.

3.Enabling path hints only works on a specific store view, so in the top left Current Configuration Scope dropdown select the store you want to see the path hints for. In our example I will be selecting my Default Store View.

4.Under the Debug heading select YES on the Template Path Hints dropdown.

5.Refreshing your project should now give you the template paths displayed in red blocks. Now use this to modify the templates as needed.

 

And that’s it! Have fun turning those standard Magento installations into a work of e-commerce gold.

Feel free to post any comments or suggestions in the space below.