Theming Magento
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
Contents |
[edit] Theming tasks
The easiest way to get a grip on Magento theming is to undertake some tasks to change your theme. What you learn from these tasks can be applied to similar situations in other areas of theming your Magento store. To this end, we'll look at the following:
- Customizing our theme's product page
- Customizing navigation in our store
- Creating a custom "page not found" error page
- Using a layout to adapt our Magento theme further
After looking at how these changes are achieved using Magento's layout and template files, you'll have a better understanding of how Magento themes and their files work together to produce what you see on the screen.
[edit] Customizing the product page
First and perhaps the most obvious task that we can undertake is to change our theme's product page. At the moment, the default content area looks like the following image:
Product pages currently look like this without any styling applied to their various elements:
With basic styling inherited from the Blank theme's styles.css file (located in skin/frontend/default/cheese2/css directory), our product page looks much more presentable:
We can continue to edit the CSS attributes, which are related to how products are displayed to our desire. Great improvements to your store's look and feel can be made simply by manipulating the CSS provided in the Blank theme to suit your store's color scheme. This can be incredibly time-consuming for Magento theme designers.
[edit] Improving content hierarchy for better search engine results
The product view page template for our theme is located in the app/design/frontend/default/cheese2/template/catalog/product directory, and is called view.phtml. Our primary motivation behind editing this template is to improve the hierarchy of the content within our store's product page, which can lead to improved search engine results for your store's products.
Within view.phtml, locate the following snippet of code, which inserts the short description for the product:
<h4><?php echo $this->__('Quick Overview') ?></h4>
<div class="short-description">
<?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
</div>
By adding the name of the product into the (<h4>) heading element (for which the code is highlighted below), we can instantly make it obvious about what the Quick Overview relates to:
<h4>
<?php echo $this->__('Quick Overview for ') ?>
<?php echo $_helper->productAttribute($_product, $this->htmlEscape($_product->getName()), 'name') ?>
</h4>
<div class="short-description">
<?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
</div>
Not only does this change group related information together in a more logical way, but it also helps to give search engines crawling your Magento store a better idea of what the purpose of the page is, helping you to attract customers looking for products sold on your store.
|
Experiment with what works best for your store's design and layout, by making use of Magento's non-default theme feature. |
[edit] Customizing Magento's navigation
Navigation is an important element of your Magento store, allowing your customers to find what they're looking for more easily. In some circumstances, your store's navigation may not be displayed in your theme, which we can address now.
[edit] Displaying Navigation in Magento
If your store's navigation isn't displayed yet, log in to your store's administration panel and ensure each category that you want to show in the navigation is a sub-category of the root category.
By default, this root category is called Default Category. Make sure that the IsActive setting on this root category is set to Yes.
Select the category from the Catalog | Manage Categories option in the administration panel to set the root category as the parent of another category in your store.
[edit] Creating a new root category
If your store does not have a root category, then you'll need to create one to assign your other categories to, or else your store's navigation won't be displayed. To create a new root category, you select the Add Root Category option within the Catalog | Manage Categories in your administration panel.
Once you have completed the fields, you'll be able to add categories beneath this root category, which can then be displayed in the theme's navigation.
[edit] Editing the navigation
If you want to edit your store's navigation, then you can find the template file called top.phtml in the app/design/frontend/default/cheese2/template/catalog/navigation directory of your Magento store's installation by adding CSS to our theme's styles.css file in the skin/frontend/default/cheese2/css directory.
[edit] Styling the navigation
The CSS we've added has already styled the navigation, and after refreshing the page we should see some of our store's product categories appear, as shown in the following image:
We can also customize how our store's navigation looks further by editing the skin/frontend/default/cheese2/css/styles.css file.
[edit] Creating a custom "not found" page
You can easily create your own "not found" error page to be displayed when a customer encounters a 404 error on your store. In your store's administration panel, select Manage Pages from under the CMS option, and for the SEF URL Identifier field, be sure to enter a value of no-route, which tells Magento that the page is to be used as your custom "not found" error page:
Before saving the page, ensure that the Status is set to Enabled: your custom 404 error page is complete!
[edit] Creating a "not found" page using templates
An alternative error page for your Magento store can be created using your theme's templates. This can be done using the no-route.phtml template in the app/design/frontend/default/cheese2/template/cms/default directory. This template is displayed if no 404 (not found) page exists in the Magento CMS.
[edit] Advanced layouts in Magento
Layouts for our new theme are stored in the app/design/frontend/default/cheese2/layout directory. While editing templates allows changes to our theme's functionality and appearance on a smaller basis, changing a theme's layout files can have a wider effect upon your store's appearance. Magento recognizes two types of layouts:
- Default layouts
- Layout updates
[edit] Default layouts
A default layout does exactly what you would expect it to it provides the layout that is used by default in Magento. That is, unless you specify a page or module-specific layout for any particular view within your store, the default layout will be used.
[edit] Layout updates
Layout updates are used by Magento to update the layout from its default to an alternative layout. Layout updates can also be used to specify CSS or JavaScript files that you no longer need loaded for each page.
<!-- omitted layout --> <reference name="root"> <action method="setTemplate"> <template>page/update-layout-template.phtml</template> </action> </reference> <!-- omitted layout -->
It's the <action> element that allows the template to be referenced and the page's layout to be updated.
|
The |
With all of the style for our new theme in one CSS file, styles.css, in the skin/frontend/default/cheese2/css directory, we no longer need to reference other CSS files that form part of the default Magento theme.
[edit] How Magento layouts work
The Magento layouts allow great flexibility in themes through a small number of XML elements.
[edit] Handles in layout
The layout handles help Magento to determine where to apply the instructions within it. There are two primary types of handles in Magento default and non-default. If a handle is set as <default>, then the layout within the handle is applied to the page before any page-specific layout instruction.
If the handle is not <default>, then the layout is imposed upon the relevant page. For example, if the handle is <sendfriend_product_send> in sendfriend.xml, the layout update applies only to the send to a friend form feature.
[edit] Layout blocks
If you remember, there are two types of blocks in Magento structural blocks and content blocks, which can now be distinguished in the layout files. In the layout files, the structural blocks contain the as attribute, and assign the relevant Magento templates to the right area of the skeleton template within our theme. The <block> element has a number of attributes that can be used within it, including:
-
action -
afterandbefore -
as -
name -
type
The action attribute
The action attribute is used to load skin files such as JavaScript and CSS in to the <head> element of your Magento store. For example, the following code would load the JavaScript file jquery.min.js in the jquery directory of your theme's skin directory:
<action method="addJs"> <script>jquery/jquery.min.js</script> </action>
The as attribute
The as attribute in a Magento layout is the name assigned to a block by a template. For example, where you see <block as "header"> within a layout file, the block known as header in your theme's skeleton template is what it references.
The after and before attributes
The after and before attributes are used to specify whether a block within layout should appear after or before a structural block, respectively.
The type attribute
The type attribute identifies the module such as Catalog Search or the Newsletter module, which the layout refers to. It defines what the block does, so if you're unfamiliar with this, it's best to leave it as it appears within the layout files.
Layout references
Magento layout files also make use of <reference> elements, which are used to make references to another block. In contrast with the type attribute, the reference element in a Magento layout affects the page layout on a small basis, allowing blocks from within modules (like the mini-cart feature of the shopping cart module) to be placed within other modules of your store.
[edit] addJS in layout
References to JavaScript files can be added using the addJS action. The references are given relative to the path of your Magento installation. The following code from the layout above adds the effects.js file located in the scriptaculous directory of our Magento store's installation:
<action method="addJs"> <script>scriptaculous/effects.js</script> </action>
[edit] addCss in layout
The addCss action in a Magento layout file ensures that a CSS file is loaded in to the <head> element of your store. The following layout instruction, taken from the previous code snippet, adds a CSS file named style.css in the skin/frontend/default/'cheese2'/css directory, where cheese2 is the name of the current Magento theme.
<action method="addCss"> <stylesheet>css/style.css</stylesheet> </action>
This method allows specific CSS files to be loaded in to the page for particular features, if necessary.
[edit] as in layout
The as attribute allows Magento to know which areas of the skeleton template(s) to replace with which templates. The layout code below tells Magento that the header.phtml file in the theme's template directory is to be inserted wherever getChildHtml('header') is found in our skeleton template.
<block type="page/html_header" name="header" as="header">
When we were creating the skeleton template for our theme, we kept references to the content blocks consistent, calling them content, right, and left. Although we can change these values by making use of the as attribute, it's much easier to keep them consistent with other Magento themes, as it will help to prevent a lot of changes being needed in our theme's layout files.
[edit] Removing a layout
As well as adding information to specific pages with a layout, Magento allows you to remove references to blocks and other information, which a layout doesn't require.
For example, take this layout from catalogsearch.xml in the app/design/frontend/default/cheese2/layout directory, which references the 1column.phtml skeleton template:
<catalogsearch_term_popular> <remove name="right"/> <remove name="left"/> <reference name="root"> <action method="setTemplate"> <template>page/1column.phtml</template> </action> </reference> <reference name="content"> <block type="catalogsearch/term" name="seo.searchterm" template="catalogsearch/term.phtml"/> </reference> </catalogsearch_term_popular>
Here, we can delete the <remove> elements from the XML so that the right and left columns appear in our page for the list of most popular search terms used on our store. The final layout for this block looks like this:
<catalogsearch_term_popular> <reference name="content"> <block type="catalogsearch/term" name="seo.searchterm" template="catalogsearch/term.phtml"/> </reference> </catalogsearch_term_popular>
Don't see any changes?</blockquote> If the changes to your layout files don't seem to be working, then check if every element is either self-closed or closed by a matching close tag, and be sure that your store's cache is disabled. |
[edit] Source
The source of this content is Chapter 7: Theming Magento of Magento 1.3 Theme Design by Richard Carter (Packt Publishing, 2009). Logo Designby ThemesWiki.org Kevin Josh 2010
Executive Editor Sean Lopez own : SEO Company and provider of Link Building Services and SEO Services
And Like Costumes and Halloween Costumes and criar sites
And Like The Global Information Network and Global Information Network
[edit] Source
The source of this content is Chapter 7: Theming Magento of Magento 1.3 Theme Design by Richard Carter (Packt Publishing, 2009). Logo Designby ThemesWiki.org Kevin Josh 2010
Executive Editor Sean Lopez own : SEO Company and provider of Link Building Services and SEO Services
And Like Costumes and Halloween Costumes
And Like The Global Information Network and Global Information Network