Thursday, April 29, 2010

How to add a block above the 3 columns in 3 columns layout

Problem: Adding on home page a block above the 3 columns

Possible solution:
Here is how i did it.
Edit app/design/frontend/{interface}/{theme}/layout/page.xml
In the <default> tag add this
<block type="core/text_list" name="top" as="top" translate="label">
<label>Top Row</label>
Now go to admin panel: Cms->Pages and edit the homepage.
I've created a new phtml file in which I placed the content I want on top
Let's say it's app/design/frontend/{interface}/{theme}/template/callouts/top_callout.phtml
In the design tab for 'Layout Update XML' I put this:

<reference name="top">
<block type="core/template" name="top.callout" template="callouts/top_callout.phtml" />
You can put every block you want here. I just used this as an example. Just put it inside
<reference name="top">
Now edit app/design/frontend/{interface}/{theme}/template/page/3columns.phtml
and add this line
<?php echo $this->getChildHtml('top') ?>
right under
<?php echo $this->getChildHtml('header') ?>
Save all files you edited and clear the contents of 'var/cache/'

I attached an image to see how it looks like.

View full size image

No comments:

Post a Comment