Monday , December 11 2017
Home >> All tutorial >> How to make Magento Themes easierly?

How to make Magento Themes easierly?

How to make a  magento theme?

This post will show you how to make a magento theme in a easy way. Building a custom magento theme for a Magento ecommerce site can be an incredibly frustrating task for beginners, but with a basic understanding of the template and layout system you can start skinning a site in no time. To build a basic magento theme, you will need to have a knowledge of three elements of the system – “skins,” “templates,” and “layouts.” These terms may seem interchangable, but you will learn that in Magento each plays a very specific role in how the application builds what is sent to the browser.

The Skin

Skin of a magento theme is simply the collection of images and CSS used by the theme you are editing. In a fresh installation the skins are located in the Magento/skin/ directory (assuming your installation was in the “Magento” directory). The skin that is enabled by default when you install Magento is located in Magento/skin/frontend/default/default/. If you open this directory you will find the images and CSS files you need to modify to style your store.

The Templates

So what if you’ve done all you can do with CSS but you need to make changes to the HTML output to make it fit your design? That’s where Magento templates come in. You can think of template files as puzzle pieces that make up the complete site.

Note: The template file type is .phtml, and can contain both (X)HTML and PHP code.

Template Path Hints

To see how the templates fit together to create each page, log in to the site admin and navigate to System -> Configuration. Then in the upper left column select your store under Current Configuration Scope. Select “Developer” under the Advanced section at the bottom of the left menu. Expand the “Debug” section and uncheck the checkbox next to “Template Path Hints,” then select “Yes” in the dropdown. Save your settings then go to the store frontend and refresh the page. The templates that make up the page will be outlined along with the path to each template. This is a very easy way to see where the markup exists that you want to modify.

Overriding Templates

Once you know where a template is located, modifying it easy with a knowledge of PHP and HTML, but there is one important thing to note– If you modify a template that is in the Magento/app/design/frontend/base directory, you will be overwriting the core installation. This is fine if you don’t plan on updating Magento, but if you do plan to upgrade, any modifications to the base folder will be overwritten so you must copy the file to the Magento/app/design/frontend/default directory and edit it there. You may need to create some directories to do this. For example, Magento/app/design/frontend/base/default/template/catalog/navigation/left.phtml should be copied to Magento/app/design/frontend/default/default

Advanced Theming

Templates give you control of the HTML that is output in a given block on your site, but if you want to control the positions of the templates, you must learn how to customize Magento layouts. Layout files are XML files that tell the Magento system what templates to use and how to display them – how the puzzle fits together, in other words. Since Magento layouts can be a complex topic, we will discuss how to use them in future articles. Even with a basic understanding of Magento templates and skins, you can begin building customized ecommerce sites that fit your needs.

That’s all. After this post, I hope no one search on google : How to make a magento theme  again !^^

We also contribute great content of Magento Download for FREE (all versions)

DON'T MISS THE CHANCE!

magento download

About Champ

Leave a Reply

Your email address will not be published. Required fields are marked *

Heap | Mobile and Web Analytics