Developing Custom Magento Commerce Themes

1. Site page layout

2. Site page content

3. Site look and feel

We have two techniques to create custom theme in Magento

These instructions are only for CE edition, I believe the only difference in PE and EE editions are few additional packages are bundled with the product

Option 1: Start with existing Default package and create a custom theme

Complexity Level: Low

/app/design/frontend/default/my_theme

- This folder should have a default theme

- This folder will have one or more custom themes to override, custom layout, template and locale files

/skin/frontend/default//my_theme

- This folder will have custom css, images and js files

Option 2: Start with a custom design package, create a new default package and multiple new custom themes

Complexity Level: High

/app/design/frontend/my_design/default

/app/design/frontend/my_design/my_theme

- This folder will have custom layout, template and locale files

/skin/frontend/my_design/my_theme

- This folder will have custom css, images and js files

The best approach is to start with the “blank” or “default” them and copy all the content from any one folder to “my_theme” folder.

Magonto themes follow OO model, you only override the layouts, templates or locale files that needs customization in “my_theme” folder,, it will fall back to default theme folder within the custom package if it does not find a match in your custom themes package, the fallback can happen all the way outside the custom package to default package.

Copy all the contents of /skin/frontend/default/blank to /skin/frontend/default/my_theme/

now edit the files in CSS folder to change look and feel of elements , color code etc.

An easy way to find the CSS DIV tags is by using one of the webdeveloper plugins in your favorite browser.

With these steps in mind, we will perform two simple customization.

1. Disable Cache settings for Theme, this will ensure we need not purge the cache to test our theme customization, needless to mention this should be turned off only for dev.


2. Customize the Content displayed in PDP Page
Copy /app/design/frontend/base/default/template/catalog/product/view.phtml
/app/design/frontend/default/my_theme/template/catalog/product

You may now edit view.phtml PHP code and changes should reflect on storefront PDP Page

3. Change the background color of site to "White"


Change background to white and reload the page, you should see background updating to white

Reference:

Magento Themes

http://info.magento.com/rs/magentocommerce/images/MagentoDesignGuide.pdf

Install Magento on Ubuntu

http://davidtsadler.com/archives/2012/06/03/how-to-install-magento-on-ubuntu/