Magento bodyclass

Magento lets us build a well-developed, complex e-commerce project with custom design. To create good-looking Magento project we have to style a lot of pages. However, we can make our work easier by grouping pages using Magento BodyClass.

It’s a very useful piece of code to style My account pages, categories, subcategories and many more. Let’s take a look at those two examples:

1. My account BodyClass

My account section includes over ten pages, which generally have the same or highly similar design. It could take a lot of time to style each page separately. Fortunately we can use Magento BodyClass to group them by adding one class to all of them.

To do that, add the following code to local.xml file of your theme (app/design/frontend/[yourtheme]/default/layout/local.xml):

<customer_account>
    <reference name="root">
        <action method="addBodyClass"><classname>customer-my-account-section</classname></action>
    </reference>
</customer_account>

After the implementation check the code of each My account page. Except standard Magento classes like customer-account-index, sales-order-history etc. there is also the added customer-my-account-section class. Now we can use this class in our css or js files to style the whole My account section.

2. Category BodyClass

Using this Magento functionality we can easily style categories and subcategories. All default Magento categories have one shared class: catalog-category-view. Additionally, each category has different body class based on its name. What if we would like to style one particular category and its subcategories?

Use Magento BodyClass:

Go to parent category in Magento admin panel (Catalog → Manage categories ) , open Custom design tab and in Custom layout Update field and add this code:[?

<reference name="root">
    <action method="addBodyClass"><classname>parent-catgeory-test</classname></action>
</reference>

In subcategories and also in the Custom design tab, set Use Parent Category Setting to “Yes”.

This is it! Now, the chosen category with all its subcategories, have a class parent-category-test, which we can use in our css and js files to style it all.Enjoy!