How to Create a template using magento

I personally thinkDifficulties in creating magento templatesIt is because you do not understand the magento architecture and will not mobilize block. Magento's block transfer relies almost on XML. The following content describes how to perform the operation.

The premise for creating a magento template is: you need to access HTML, div + CSS. Whatever template you want, this is the foundation. To make an exquisite magento, you must be proficient in Div + CSS. Because it involves the compatibility of a browser, it seems perfect when you open your magento Mall in Firefox, but it is completely deformed in IE6, and there are about 50% of Chinese people using ie6.

Before creating a magento template, you must first select a relatively simple template and then do it on this basis. I personally recommend using the blank template. This template is relatively clean, and there are almost no necessary images, and CSS is also very simplified. I used the default template when I first started the magento template. the CSS file of this template is large, and there will be a lot of useless images after the template is complete. When I was working on a project, the CSS file on the website was too large, which gave me quite a headache. There are a lot of nonsense. Now let's get started.

The most important part of the magento template is the homepage. The homepage is complete, and the magento template is about 30% complete. My personal habit is to first change the header and tail, which are available on all pages. All the headers are in APP \ design \ frontend \ Default \ your topic \ template \ Page \ HTML \ header. phtml. Everything at the bottom is in APP \ design \ frontend \ Default \ your topic \ template \ Page \ HTML \ footer. phtml. These two parts are modified by CSS, and there is nothing to say. I will focus on the layout of the middle part.

Magento layout is difficult for beginners. If your English is good, you are advised to go to the official introduction workshop. I personally think that the layout is to place the existing block in the proper place, which is generally transferred in XML. I will introduce catalog. xml. If you don't talk about anything else, the principle is the same, and most of the la s can be implemented in catalog. APP \ design \ frontend \ Default \ your topic \ Layout \ catalog. after entering XML, You Can See comments similar to "Default layout, loads most of the pages". These comments mean where you change the layout, for example: "Default layout, loads most of the pages" is the default website layout. Next, we will see a lot of <reference> labels, which must be defined in page. xml before they can be used here. I will not detail them here. These "names" include "Left", "right", and "Header". Literally, we can see their positions. "Left" refers to the left sidebar, "Right" refers to the right sidebar and "Header" refers to the header. Each <reference> tag contains multiple <block> blocks, which are the functional modules I want to call. For example, some people often ask how to move the left part to the right. This problem is well solved. Find the corresponding block in "Left" and put it on the right side. I think it is very simple. I will talk about this in this article first. I have never written such a tutorial. It may not be detailed. If I do not understand it, I can leave a message.