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.

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:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

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.

Magento Webdesign

Take your online store to the next level with BelVG Magento Webdesign

Visit the page