Developing Custom Magento Commerce Themes
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/
Blogger | Freelancer |Operations Manager | Marketing and Sales Manager | Lancer Evo 4 Community.
Indonesian Bloggers Who Become Bloggers Because of Hobby.
Feel free to connect with me on Social Media Instagram @alberandesko
0 Response to "Developing Custom Magento Commerce Themes"
Post a Comment