<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dx3webs &#187; left hand</title>
	<atom:link href="http://dx3webs.com/front/tag/left-hand/feed/" rel="self" type="application/rss+xml" />
	<link>http://dx3webs.com/front</link>
	<description>Magento: fast.. supported.. managed</description>
	<lastBuildDate>Wed, 16 May 2012 14:02:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Create a left hand navigation / vertical category in Magento</title>
		<link>http://dx3webs.com/front/2009/12/verticle/</link>
		<comments>http://dx3webs.com/front/2009/12/verticle/#comments</comments>
		<pubDate>Sat, 05 Dec 2009 20:00:11 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Magento]]></category>
		<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[left hand]]></category>
		<category><![CDATA[modern theme]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[verticle]]></category>

		<guid isPermaLink="false">http://dx3webs.com/front/?p=1</guid>
		<description><![CDATA[Using the modern theme to create a menu like http://www.cl-floraldesigns.co.uk]]></description>
			<content:encoded><![CDATA[<p>Using the modern theme to create a menu like <a href="http://www.cl-floraldesigns.co.uk">http://www.cl-floraldesigns.co.uk </a></p>
<p><span id="more-1"></span></p>
<p>1)</p>
<p>Create vert_nav.phtml in  app / design / frontend / default / default / template / catalog / navigation</p>
<pre>
<code>
<div class="vertical-nav-container box base-mini">
<div class="vertical-nav">
<div class="head">
<h4><?php echo $this->__('Categories') ?></h4>
</div>
<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
</div>

<?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

</code>
</pre>
<p>2)</p>
<p>in app / design / frontend / default / modern / layout / catalog.xml</p>
<p>add</p>
<pre>
<code>
<block type="core/template" name="right.latest.news" template="callouts/latest_news.phtml"/>
</code>
</pre>
<p>so it looks like this:</p>
<pre>
<code>
<!--
Category default layout
-->

    <catalog_category_default>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
        </reference>
        <reference name="left">
            <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
            <block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/>
            <block type="core/template" name="right.latest.news" template="callouts/latest_news.phtml"/>

</reference>
</code>
</pre>
<p>3) in   skin/frontend/default/modern/css/menu.css</p>
<pre>
<code>

    /**********************************************Vertical Nav ****************************************/

    #nav_vert { padding:0 20px; font-size:1em; z-index:999; width:180px; background-color: #F6F6F6; }

    /************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */

    #nav_vert li {

    width:200px;

    list-style:none;

    position:relative;

    text-align:left;

    background-color: #F6F6F6;

    border-bottom-width: thin;

    border-bottom-style: solid;

    border-bottom-color: #CCCCCC;

    }

    #nav_vert li.over { z-index:999; }

    #nav_vert li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */

    #nav_vert a { line-height:1.3em; }

    #nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }

    #nav_vert span { display:block; cursor:pointer; color: #000; }

    /************ 1ST LEVEL ***************/

    #nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%; height:30px; margin-right:1px; }

    #nav_vert li.active a { color:#4c6a16; }

    #nav_vert a {

    float:left;

    padding:5px 12px 6px 8px;

    color:#4c6a16;

    font-weight:bold;

    font-family:Trebuchet MS;

    font-size:13px;}

    #nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; }

    /************ 1ST LEVEL RESET ************/

    #nav_vert ul li, #nav_vert ul li.active {

    float:none;

    height:auto;

    background:none;

    margin:0;

    }

    #nav_vert ul a, #nav_vert ul a:hover {

    float:none;

    padding:0;

    background:none;

    }

    #nav_vert ul li a { font-weight:normal !important; }

    /************ 2ND LEVEL ***********/

    #nav_vert ul {

    position: absolute;

    width:200px;

    margin-left:180px;

    top:0px;

    left:-10000px;

    border:1px solid #666666;

    }

    /* Show menu */

    #nav_vert li.over ul { left:0; }

    #nav_vert li.over ul ul { left:-10000px; }

    #nav_vert li.over ul li.over ul { left:100px; }

    #nav_vert ul li a { background:#FFFFFF/*#ecf3f6*/; }

    #nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ }

    #nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }

    #nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }

    #nav_vert ul span, #nav_vert ul li.last li span { padding:6px 15px 6px 15px; }

    #nav_vert ul li.last span { background:none; }

    /************ 3RD+ LEVEL ************/

    #nav_vert ul ul { top:5px;}

    #nav_vert ul ul ul { left:-10000px;}

    #nav_vert li.over ul li.over ul ul { left:-10000px;}

    #nav_vert li.over ul li.over ul li.over ul { left:100px; }

    /* Fix for the IE bug */

    #nav_vert iframe {

    position: absolute;

    left: -1px;

    top: 0;

    z-index: -1;

    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

    } 

</code>
</pre>
<p>Display on home page</p>
<p>add</p>
<pre>
<code>

<reference name="content">

<!-- <block type="catalog/product_new" before="-" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="cms_page"><action method="addPriceBlockType"><type>bundle</type><block>bundle/catalog_product_price</block><template>bundle/catalog/product/price.phtml</template></action></block> -->
<block type="reports/product_viewed" name="home.reports.product.viewed" alias="product_viewed" template="reports/home_product_viewed.phtml" after="product_new"><action method="addPriceBlockType"><type>bundle</type><block>bundle/catalog_product_price</block><template>bundle/catalog/product/price.phtml</template></action></block>
<block type="reports/product_compared" name="home.reports.product.compared" template="reports/home_product_compared.phtml" after="product_viewed"><action method="addPriceBlockType"><type>bundle</type><block>bundle/catalog_product_price</block><template>bundle/catalog/product/price.phtml</template></action></block>
</reference>
<reference name="left">
<block type="catalog/navigation" before="-" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml"/>
<action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
<action method="unsetChild"><alias>right.reports.product.compared</alias></action>

</reference>

</code>
</pre>
<p>tweak to meet your needs.</p>
<div>to CMS home page in admin</div>
]]></content:encoded>
			<wfw:commentRss>http://dx3webs.com/front/2009/12/verticle/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

