Just like any new concepts, we know that without actually diving in and getting your hand dirty, you can never truly grasp what you’ve been explained in words. So here are a couple of exercises for you to get a feel for working with layouts. In order to work with this exercise, you must have the default Magento theme ready and accessible.

Exercise #1: In the category page, move the “My Cart” box from the right column to the left

1. Turn on the Template Path Hint by going to the admin then navigating to System -> Configuration. When you’re in the configuration page, select the store you’re working in by using the top left website/store selector. Wait for the page to reload, then select the Developer tab. Select ‘Yes’ in the select box for Template Path Hints. Click on Save. Go back to the store front, and reload.
2. When the page reloads, look at the template path of the ‘My Cart’ block- it’ll most likely say ‘frontend/default/default/template/checkout/cart/sidebar.phtml’. By looking at the path, you know this template is being introduced via the ‘checkout’ module. How do you know this? – frontend/default/default/template/checkout/cart/sidebar.phtml. It says so in the template path. The immediate directory name following ‘template’ is the name of the module through which a template is introduced.
3. Open up layout/checkout.xml – because now we know we’re dealing with the checkout module
4. Search for ‘checkout/cart/sidebar.phtml’ (the template name of the My Cart block) in the layout updates. You will find an area that looks like this:
<reference name="right">
<block type="checkout/cart_sidebar" name="cart_sidebar" before="-" template="checkout/cart/sidebar.phtml"/">
</reference">
Change it to say the following instead (Note that all you’re doing is changing the <reference name="right"> to <reference name="left">).
<reference name="left">
<block type="checkout/cart_sidebar" name="cart_sidebar" before="-" template="checkout/cart/sidebar.phtml"/">
</reference">

5. Reload the store front and you will now see the change reflected.

Exercise #2: Separate the SEO links at the footer area – Instead of having the link items to be one list, isolate ‘Advanced Search’ to be in the header instead.

1. You can make a calculated assumption that the SEO links must be assigned somewhere in the layout under the footer block because it’s being pulled through ‘<?=$this->getChildHtml()?>’ of template/page/html/footer.phtml. (You will need the Template Path Hints turned on to see why this is obvious).
2. Open up layout/page.xml and look through the list of children under the footer block in order to locate a block that calls the footer links – You will find <block name=”footer_links”>, which is what calls the SEO links. Now that you know that layout updates reference the SEO links via the name=”footer_links”, now you will do a search in all the xml files for <reference name=”footer_links”>. You will find references for the footer_links block in catalog.xml (which calls ‘Site Map’), catalogsearch.xml(which calls ‘Search Terms’ and ‘Advanced Search’) and contacts.xml (which calls ‘Contact Us’).
3. Now that you’ve located the area of the individual SEO link items, you will now begin the steps to isolate ‘Advanced Search’ from the bunch and make it it’s own thing in the header. First go back to page.xml and create a new block <block type=”page/template_links” name=”header_links” as=”header_links” template=”page/template/links.phtml”/> and nest it inside <block name=”header”>. You’ve made the layout updates to expect this link in header.phtml. Open template/page/html/header.phtml, and type in <?=$this->getChildHtml('header_links')?> where you want the link to reside.
4. Now I go to catalogsearch.xml, and cut this:
<action method="addLink" translate="label title" module="catalogsearch"><label>Advanced Search</label><url helper="catalogsearch/getAdvancedSearchUrl" /><title>Advanced Search</title></action> out from <reference name="footer_links">.
   I create new lines to reference the new header_links block I created, and nest the cut out code inside it like so:
<reference name="header_links">
<action method="addLink" translate="label title" module="catalogsearch"><label>Advanced Search</label><url helper="catalogsearch/getAdvancedSearchUrl" /><title>Advanced Search</title></action>
</reference>
5. Now I have Advanced search in the header instead of the footer.

This marks the end of Designer’s Guide to Magento. Hopefully by now you’re armed with confidence and knowledge about how to approach designing with Magento. We hope to see some of your results up on the forum. Share with us your designs, discuss this documentation and ask lots of questions at the community forum’s ‘HTML, XHTML, CSS, Design Questions’ thread.