Developing Custom Magento Commerce Themes

Posted by Hariharan Vadivelu on

One of the coolest and strongest features of Magento commerce is the frameworks support for customizing themes and the "fall back" model which always ensures that you only customize what is needed and it continues to inherit rest of the theme from default and core packages.
We can do following customization, and in fact if you master the skill you can literally change layout of complete site without coding in PHP.

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"

Edit skin/frontend/default/my_theme/css/styles.css
body          { background:#fff; font:12px/1.35 Arial, Helvetica, sans-serif; color:#000; text-align:center; }

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


Magento Themes

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

11 comments:

  1. Thanks for nice article. i am new to web programming and disabling cache and using web developer tool for mozilla were helpful tips for me.

    ReplyDelete
  2. I am Magento developer and glad to see some updates daily as learning process never ends.. Nice post

    ReplyDelete
  3. Hi Hariharan,

    Nice post,thanks for sharing this information,Looking forward for more posts like this.







    Magento Developers

    ReplyDelete
  4. The information written in the article is descriptive and well written.It is also simple to read and understand.Good Read.
    Magento Developers

    ReplyDelete
  5. Magento usually an open source ecommerce content management system which happens to be best known for being the most wonderful online shopping cart software that reaches the targets of businesses worldwide.

    ReplyDelete
  6. Great Read! I am impressed on how you make your article easy to understand. I'll come back for more :D

    offshore magento development

    ReplyDelete
  7. It was very nice blog to learn about Selenium.Thanks for sharing new things.selenium training in chennai

    ReplyDelete
  8. well blog Vendorzapp Compnay provides Mobile apps for small business, Ecommerce android apps India, iOS ecommerce apps, Ecommerce website Pune, Ready ecommerce website and apps. Android ecommerce apps then visit now Ecommerce android apps India, iOS ecommerce apps, ecommerce website for small business call us +91-9850889625

    ReplyDelete
  9. Magento eCommerce stage is the best to integrate different arrangements as its heaps of highlights permit execution of custom modules that will customize the clients shopping background, which will grow your online business.
    Outsource magento ecommerce services india
    Outsource ecommerce development services

    ReplyDelete