Magento - How can I move the Navigation Block to be in the right column?

Question

I've been editing Magento's default CSS to change the look and have come to a point where I want to move around some content blocks.

I've killed off the left column through CSS

.col-left { display: none; }

And then increased the width of the main content part to create a 'two column layout'. What I want to do now is move the navigation for the categories into the right column. I just have no idea how...

How do I move content blocks around in Magento? :/

Answer 1

Making large moves like that in Magento is best accomplished by modifying the layout XML files, rather than hacking through CSS. In the file catalog.xml, here are the relevant lines:

    <reference name="top.menu">
        <block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
    </reference>
    <reference name="left">
        <!--<block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
            <action method="setImgSrc"><src>images/media/col_left_callout.jpg</src></action>
            <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>
            <action method="setLinkUrl"><url>checkout/cart</url></action>
        </block>-->
    </reference>
    <reference name="right">
        <!--<block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>-->
        <!--<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>-->
    </reference>

To render the topnav, move that catalog/navigation line into the left or right column blocks and the navigation will be rendered as such.

Hope that helps!

Thanks, Joe

Answer 2

Magento has four "standard" layouts: 1col, 3col, 2col-left and 2col-right, but you can add more if you like. You'll want to change the layout used on the page your editing instead hacking around with CSS. That's definitely the wrong way to do it.

As Joseph points out, Magento's templating system is comprised of blocks, or templates, which are positioned by layout files. Templates are standard php, though are prefixed with .phtml, and layouts are xml. You'll find large groups of these files in app/design/frontend/$interface/$theme/(template|layout).

Magento is pretty renown for it's poor documentation, but you may want to checkout their Designer's Guide which covers the concept of templates and layouts in a little detail, including how to move blocks around.

The syntax of a layout file is far from straightforward but, pretty much, all you're going to need to know at this stage is that in order to reference blocks in the right hand, left hand and content columns look out for:

<reference name="(right|left|content)"></reference>

Moving the <block /> declarations from one to another with cause the blocks to move.

Another key one to remember is to look out for:

<reference name="root">
    <action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>

Using the setTemplate action when referencing the root container will allow you to switch templates to 1column, 2columns-left, 2columns-right or 3columns easily. The layout templates themselves can be found in template/page/.