Magento just like any other CMS tool is an open-source content management system used by top organizations for developing e-commerce web sites. This CMS software was originally developed by Varien Inc., a USprivate company, headquartered in Culver City, California. According to the research, Magento is one of the most renowned CMS tool among the topmost 30 popular e-commerce platforms. Magento is designed especially for developing e-Commerce sites.

This advance CMS tool comes with MySQL/MariaDB, RDBMS, PHP programming language and combines ample of features of Zend Framework. It works with object-oriented programming language as well as posses various features of model-view-controller architectures.

Now let,s come to the discussion point of how to create a customized Magento theme? Here you can refer to few advance steps for designing customized Magento themes:

• Step 1 deals with creating several new files and folders

It’s necessary to create few fresh files & folders for developing customized Magento themes. You can apply a file name such as “magento-new-theme”.

Creating new folders:

/app/design/frontend/default/ my-theme /
/app/design/frontend/default/ my-theme /layout
/app/design/frontend/default/ my-theme /templates
/skin/frontend/default/ my-theme / – our new skins folder
/skin/frontend/default/ my-theme /css/
/skin/frontend/default/ my-theme /images/

Creating new files:

/app/design/frontend/default/ my-theme /layout/local.xml
/skin/frontend/default/ my-theme /css/local.css

• Step 2 deals with setting up of new themes in admin section

Go to System > Configuration > Design via the top navigation bar

Press the “Save Config” button in the upper right corner

• Step 3 initiates you to add up various customized  stylesheets and JS libraries

Copy your new CSS and JS files in your created folders properly

1) CSS

Copy your CSS files into skin/frontend/default/my_theme/css/ folder.

In order to link these various files, one can either modify local.xml file to add the new file or can add an import in local.css, like this:

@import URL (‘my_new.css’);

2) Javascript

This step enable developers to create a new folder under /js/named my_theme and copy your files into it. If you are working with javascript libraries, then this is another suitable place to attach numerous number of library files. Any Javascript file can be added to your theme by adding or accessing the following code to local.xml file given below:

<?xml version="1.0" encoding= "UTF-8" ?>
<layout>
     <default>
        <reference name="head">
          <actionmethod="addJs">
            <script>scripts/js.js</script>
      </action>
       </reference>
      </default>
</layout>

• Step 4 lets you work with various fundamental changes that are required for your template sheet

Each and every file that you work with, are used for working with skin templates that are placed in template/page folder. Here is an example of how to process the situation. Now lets have a look:

1column.phtml, 2columns-left.phtml, 2columns-right.phtml, 3columns.phtml, one-column.phtml, dashboard.phtml.

Above shown process is one of the essential HTML skeleton files for templates. We can further set up a new defined look for the Magento page structure by modifying old files. Access the  HTML subfolder placed under template/page from where users can easily modify the footer section, header section and list of link blocks for various templates.

For this, we can apply simple calling function such as (ex. GetChildHtml() ) in order to identify various blocks by searching them in layout XML files .

Here is an example on which you can have look:

<reference name="root">
<action method="setTemplate">
<template>page/3column.phtml</template>
</action>
</reference>

It will show output with 3columns.phtml as a skeleton for your designed  page.

• Step 5 works for calling layout blocks by using several profound Magento functions

There are two ways by which you can call blocks.

<blocktype=”page/html_toplinks”name=”top.left.links”as=”topleftlinks”/>

<?=$thisgetChildHTML('as')?>

This coding part deals with using the block alias “as” from the XML file, you can easily display a block on the designed page that was previously defined in your corresponding XML file.

<?=$thisgetLayout()getBlock('name')toHtml()?>

Next section enable developer to work with block name from the XML file, where you can easily call any block whether it was previously defined or not in your corresponding XML file.

Fall-back hierarchy

Creating any customized Magento theme deals with working with a fallback process to create themes in a much easy way by maintaining them in a sophisticated manner. Fall-back hierarchy further allows developer to edit and maintain frequently needed files for creating profound Magento themes. So, now let’s have a look on a detailed real life example:

Let’s say that a website that has been designed to use package and theme will process the following code:

app/design/frontend/theme_package/my_theme/

skin/frontend/theme_package/my_theme/

But the difficulty arises at the time Magento is incapable of locating these files within the designed Magento theme. In this case, Magento fallback logic is applied to search the next theme in the hierarchy for the files and will continue to explore the theme until it locates the requested files.Here a website will request a template file named as 1column.phtml and a CSS file named as styles.css.

Below given is the following order that demonstrates the Magento fallback logic with a thorough checking process at the time of file searching process. Let’s have a look how it works:

app/design/frontend/theme_package/my_theme/template/page/1column.phtml

app/design/frontend/theme_package/default/template/page/1column.phtml

app/design/frontend/base/default/template/page/1column.phtml

skin/frontend/theme_package/my_theme/css/styles.css

skin/frontend/theme_package/default/css/styles.css

skin/frontend/base/default/css/styles

The above mentioned coding style of fallback logic shows a clean code base style that keeps your created themes in safe mode. One need to only copy the files that are required for modification process to keep your files in safe mode. So, if a case arises when your website requests for specific file and it is incapable of locating files in the designed theme,  then it will be located by following the above logic.