Question

I am trying to split up the 2-columns-left template on the category pages.

Right now it looks like this:

_________________________________
|          |                    |
|          | Page Title         |
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|

I need the category name and description to move up over the left menu, and fill the width 100% like this:

_________________________________
|                               |
| Page Title                    |
|_______________________________|
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|

I cant figure out where to start. When I look in the XML it seems to not be a separate part that I can place elsewhere.

Answer 1

First update the catalog layout to use the single column template. Then copy the catalog.leftnav block into the category.products block.

<!-- {THEME_PATH}/design/layout/catalog.xml -->
<catalog_category_default translate="label">

    <!-- Update the layout to use the single column template -->
    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    </reference>

    <reference name="content">
        <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
            <!-- Move the catalog navigation block into the category view block -->
            <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
        </block>
    </reference>

</catalog_category_default>

Once the catalog.leftnav block is a child of the category.products block, you can use the getChildHtml() method to display it in the category.products view template.

<!-- {THEME_PATH}/design/template/catalog/category/view.phtml -->
<div class="category-view">

    <div class="page-header">
        ...
    </div>

    <div class="category-nav">
        <?php echo $this->getChildHtml('catalog.leftnav'); ?>
    </div>

    <div class="category-content">
        ...
        <?php echo $this->getProductListHtml(); ?>
        ...
    </div>

</div>

Style to your liking. Hope that helps.