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
• 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body>
<div id="wrapper">
<?=$this->getChildHtml('header')?>
</div>
<div id="main">
<div id="content">
<?=$this->getChildHtml('content')?>
<div id="footer">
<?=$this->getChildHtml('footer')?>
</div>
<!--/footer-->
</div>
<!--/content-->
<div id="left">
<?=$this->getChildHtml('left')?>
</div>
<!--/promo-->
<div id="right">
<?=$this->getChildHtml('right')?>
</div>
<!--/column-->
</div>
<!--/main-->
<?php echo $this->getChildHtml('before_body_end') ?>
</div><!--/wrapper-->
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
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 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:
<?=$this->getChildHtml('footer')?>
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.
Note: Only a member of this blog may post a comment.