How to Create Magento Custom Theme

We have already covered the general topic of Magento theme creation in our blog. This time I want to share tips on how to design a non-standard theme for Magento, let’s call it a custom theme. Consider this example to look what I mean.

How to Create Magento Custom Theme

One of the best ways to create themes for Magento is using a method, based on modifying and revising the existing standard theme. I want to remind that Magento offers some pre-installed themes. A good idea for our task will be to use the Blank theme, which contains the minimal set of graphics and css.

In this case we need to create appropriate folders with the name of the future theme in app and skin directories. Then we copy the content of the Blank theme folders into these folders.

The next step is creating a skeleton template for our design. Skeleton templates provide a general page framework for our Magento themes. For instance, we would like to have three different views in our store.

• Three columns
• Two columns with a sidebar on the right
• Two columns with a sidebar on the left

These three different options for our store can be maintained by creating three separate skeleton templates, and also by changing the settings, which assign templates to each module or page within our store. For example, three-column template may look like this:

 



before_body_end – is the content that can be defined in the Control Panel, under Magento Configuration/Design (under the General heading). It may be useful to insert, for example, JavaScript, which is used for our store analytics.

Default.pthml skeleton template should be saved in the app/design/frontend/default/”our_new_theme”/template/page directory of our Magento installation, where default – is Magento interface name and “our_new_theme” – is Magento new theme name.

If this file already exists, it must be overridden, because it is responsible for a page template look by default.

The next step is connecting structural and content blocks. Structural blocks are used to locate content blocks on each store page.

The main structural blocks are:

• Header
• Content
• Footer
• Left column
• Right column

Content blocks are the ones that keep the content within each page of your Magento store.

They include:

• Store navigation
• Store access links
• Page content
• Footer content
• Callout
• Mini cart
• Newsletters

The getChildHtml method is used to insert a structural block. The value, transmitted as a parameter to the getChildHtml method, is the way, in which every structural block is identified in Magento layout files. Let’s take the following example:

Footer value is transferred as a parameter to the getChildHtml method, which refers to footer.phtml template block in the app/design/frontend/default/our new theme/template/page/ html directory.

In order to install our skeleton template to a new theme, we need to change the template value to page/default.phtml in the page.xml file, which is located in the app/design/frontend/default/cheese2/layout directory.

Enabling the display of paths to various Magento theme blocks considerably simplifies the theme creation. To enable the display of paths, we transfer to System|Configuration tab and choose our store from the dropdown list in the upper left corner. Then we select Developer on the left, install Yes for Template Path Hints and save changes.

All further work with a new theme involves applying necessary changes according to structural and content blocks design, as well as css-styling. As long as we create a new theme, based on the existing one, we already have a basic css. This basic css contains a huge number of IDs and classes. Dividing certain css parts into multiple files may simplify the work with cascading tables and often significantly accelerates the development. For example, all classes and IDs that do not belong to the original theme, can be put into a separate file. To combine all these files in one, use css property @import{} that also helps activating all css code via one file.



8 comments

  1. Great work!!Thanks for sharing this valuable post..I have bookmarked it for my future purpose..

  2. I am developing a fully custom theme for a Magento ecommerce webssite. This is my first Magento project. In our website, we have several very different kinds of pages. I want to have several different SKELETAL templates. I dont know how to link a specific page with a specific skeletal template. All the examples I know of explain how to make a SINGLE SKELETAL TEMPLATE FOR A SINGLE STORE VIEW – not SEVERAL templates, each of which you can link certain pages to.
    How do I link different pages in ONE SINGLE STORE VIEW to different skeletal templates?
    I mean:
    I want the home page to have 2 columns.
    I want the product pages to have 3 columns.
    I want category pages to have a different set of 3 columns.
    etc.

    Or is it actually required that a single store view have a SINGLE skeletal template?

    Peter Rosti
    Abex Exhibit Systems, Inc
    North Hollywood, CA
    prosti@abex.com

  3. This is a burning question. I plan to write an article on this topic shortly. Offhand, I can say that Magento allows using 1-column, 2-columns, 3-columns skeleton templates as well as creating your own ones. XML-files, located in layout directory of the theme being edited, are responsible for choosing what theme exactly will be used on the store pages.

    Take, for example, default Magento “modern” theme. On this theme’s product page 2-column template with left sidebar is being used. To place a sidebar on the right, for instance, open the ../app/design/frontend/default/modern/layout/catalog.xml file, find xml block, which is responsible for product page. In our case it starts with the following:





    In this block, replace

    with

    Sidebar will appear on the right hand side after all.

  4. One of the best ways to create themes for Magento is using a method, based on modifying and revising the existing standard theme.Thanks for sharing it.

  5. hello sir,

    Please help me,how can convert the html themes template into magento template.

    Thanks

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *