Magento Custom Theme Creation

To Create a new theme first we have to understand the Magento Directory Structure

1. /app – Here all the php codes of applications resides.
2. /lib -The external code library.
3. /skin -Here the css,js and images resides.

Now we take a short brief of /app and /skin directory for theme creation. First we start with /app directory, it consists of:

1. /app/etc -Global configuration
2. /app/code -Here all modules resides
3. /app/design – it contains template files and layout files

Lets take an overview of /design directory. layout, template are the core directories that contain the files that make up your themes.

1. /adminhtml -Admin panel designs
2. /frontend – Front End designs

/”custom_package”/”custom_theme”/default -theme customizations

1. / layout – .xml files ,it define block structure

layouts are saved as per module basis therefore you can easily locate the layout file to modify with the help of the Template Hints. First, enable Template Hints,
1. Admin->System->Configuration.
2. Select the store from current configuration scope eg Main Website
3.Advance->Developer.
4.Debug->Template Path Hints->yes.
5.Add Block Names to Hint->Yes click on save configuration.

Reload the the page, and look at the path of the template file that the Template Hints will provide you with. If you want to (for instance) move the mini cart, reference the template path (ex:app/design/frontend/default/default/checkout/cart/sidebar.phtml) and use the first folder name inside the theme folder (indicated in bold, which is the module name) to find the according layout file. So in the case of the mini cart, you know to look in ‘checkout.xml’ to modify the mini cart positioning. Each layout file(should it be necessary) further sections into per-page basis layout command. Each area of per-page layout is clearly marked with comments reflecting its usage, but the application itself recognizes the layout separation by the handles of each layout.

2. / template – .phtml templates

After listing is complete, you will create the phtml markups for each structure type and save them as skeleton templates into app/design/frontend/custom_package/custom_theme/template/page/.The getChildHtml method is used to insert the structural block for instance
[php]<?php echo $this->getChildHtml(‘header’) ?> [/php]
Here Header value is passed as a parameter which refer to header.phtml

In /skin/ we find CSS, images, JavaScript and any other resource files that relate specifically to templates in the system.

1. /frontend – frontend styles directory
2. /default – Our default interface

/skin/frontend/custom_package/custom_theme/default -css customization

1. /default -our default theme
1. /default/css -contains .css files

Any external stylesheet files (css) that you want to include in your custom theme must be also
copied to css folders.we must include this file in the page.xml located in app/design/frontend/custom_package/custom_theme/default/layout.for instance
[php]
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
[/php]
we can also customise the css as per our requirement by using (for instance)firebug and then save the changes.

2. /default/images -contains images

Any images that you want to add in your custom theme must be copied to the images folder

3. /default/js -contains js

Any external javasript libraries (js) that you want to include in your custom theme must be also
copied to js folders.

set the new package

1. Admin->System->Configuration
2. then on the left upper set the Current Configuration Scope
3. Design->Package->”new_theme_name” click on Save Config

Disable Cache

1. Admin->System->Cache Management
2. In the Cache Storage Management section forall cache type select action disable and clickon submit button.

Regards
Akash Sethi
akash@intelligrape.com