Customize your page using CSS tricks based on active menu alias

There are lots of ways to make your page unique in Joomla, and there are interesting ideas on how to make your template even more powerful.

One of tricks not very often used and widespread is relying in one of the tricks I published regarding to available PHP tricks you can use to enhance your template.

The ideea is simple - let's use the trick regarding the detection of active menu alias and use it to customize more the appearance of a Joomla page! How? Simply by adding the menu alias to one of Joomla's existing CSS hooks using template overrides and a bit of PHP trickery. Let's say you want to add some special CSS styles to the right module position when on certain page.

You need to add the following code for example to template's main index file:

<?php 
$active = JFactory::getApplication()->getMenu()->getActive();
?>

This will create a variable which will hold te active menu item's alias. Now, we need to add it cleverly to the certain parts of the template - the simplest option is to add it to the main body class like here:

<body class="<?php echo $active->alias; ?>">

This will add the alias of your active item as a class on your body like:

<body class="home">

The next step is to add an extra CSS rule to your template's CSS file, like this:

body rightcolumn
{
  /* rule for every page */
}
 
body.home rightcolumn
{
 /* different rule for the page with the alias "home" */
}

And you're set. You have endless possibilities to add some advanced effects to your site without hacking in the core or sacrificing upgradeability.