How to Set Body CSS Class as Page Class Suffix in Your Joomla! Template

In a previous post, I showed you how to set the menu alias as the body CSS class in Joomla!. This works best for me because it is easy to remember (just look at the url), and does not require any extra steps, but there is a better way to do this. For example, you write 50 lines of CSS code to modify the style of a page based on its alias, but you later decide to change the URL for SEO purposes. You would need to go back and edit your CSS file to mirror the new alias. Using the page  suffix would eliminate this issue.

I know, I know… “Just show me the code” right?

Make sure to place the code below inside of the body class. Your body tag should look like this:

<?php
getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
echo "body" . $pageclass; ?>

If this is the only css class you will have in your body tag, your complete tag should look like this:

<body class="<?php
getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
echo "body" . $pageclass; ?>">
Be Sociable, Share!
Tarik Assagai
Tarik (@tarik916) is a web developer and owner of ACS Digital Media, a Sacramento based web development agency specializing in open source CMS systems. If you are looking for support for your current or upcoming projects, visit www.acs-digital.com.

13 Comments

  1. Eli /

    Any ideas on getting the same thing working with Joomla 1.6? Will do a search and comment here if I find anything.

  2. Eli /

    This one is the solution to the problem I was originally having: http://forum.joomla.org/viewtopic.php?p=2440043

    Just wanted page class suffix to show up in the body element.

Trackbacks/Pingbacks

  1. How to Set Custom Body CSS Class in a Joomla 1.5 Template | Slurp it up! I'm talking about the web. - [...] Update: I have written a new post showing you how to set the body tag as the page class …

Leave a Reply