How to add a new body class to Magento layout

Jignesh — Fri, 11 Dec 2009 13:28:02 +0000

Adding a CSS body class to Magento layouts seems very easy.

In case you want different CSS body class for different module pages on frontend, what you need to do is to find the syntax: $this->loadLayout(); in module controller files and add some new lines just below it.

Example:
I want to set the ‘my-profile’ class to all the customer pages on frontend. So I opened the AccountController.php & edited the function indexAction(). Just below the ‘$this->loadLayout();’ I added few lines. So it will look as below.

        $this->loadLayout();

	    if ($root = $this->getLayout()->getBlock('root')) {
	            $root->addBodyClass('my-profile');
	    }

However above code needed to be altered in the core code. So better to follow the below.

To update it via layout XML,


 my-profile

This will affect in the tag.

getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>>

Adding a new Page Layout to Magento

Jignesh — Mon, 09 Nov 2009 06:19:52 +0000

Adding a new page layout in Magento is very simple. But why someone need to add a new page layout. Page layouts are already there.

Well, that can be needed specially for a Home page. One of my friend faced many issues in managing the Home page with existing layout. As a result, he needed to write other codes as well to maintain the concurrency between other pages. If we do change in current layout, it would affect the other pages as well using the same layout.

So better way it to create a new layout.
[The steps below are updated to make it work with Magento 1.4 as well]

Steps:

1. Open the file: app/etc/modules/Mage_All.xml
Edit the tag to ‘local’ such that it looks like:


          true
          local

2. Copy config.xml
from app/code/core/Mage/Page/etc/config.xml
to app/code/local/Mage/Page/etc/config.xml

3. The file can be edited: app/code/local/Mage/Page/etc/config.xml
Add new lines between .. along with other layouts.


		
.
.
		
			Home
			
			page_home
		
.
.

2. Create new file : template/page/home.phtml along with 1column.phtml, 2columns-left.phtml etc.. You can just copy the existing code of one of the column layout phtml inside the home.phtml. Modify the code inside home.phtml as per your need.

3. On the Admin, Go To CMS -> Manage Pages. Edit the home page. Change the Layout to ‘Home’ under the ‘Design’ Tab.

This will apply the home.phtml to Home page.

Magento Coder » HTML

How to add a new body class to Magento layout

Adding a new Page Layout to Magento