I like to add an id to the body tag in all my custom templates. I find it useful if you want to change the CSS layout for one or more pages on my site.
There are many uses for this, but say, for example, I'm using a 2 column layout in my stylesheet, with the first column displaying the main Joomla article and the second column displaying one or more modules. I might be using the following stylesheet settings for my columns:
.leftcol {
width: 68%;
padding: 1%;
float: left;
}
.rightcol {
width: 28%;
padding: 1%;
float: right;
}
However, on some pages I don't have any modules set to the right column position, so I want to make my left column full width. In this case I can target the settings for that page with the body id.
First I have to have this set up in my template index.php. If you are using a professionally built Joomla template you may find the developer has already provided a superior option for this.
Just after the closing head tag I insert this code between opening and closing php tags:
$menu = JFactory::getApplication()->getMenu();
$active = $menu->getActive();
Then add an id to the body tag, again between opening and closing php tags:
print $active->alias;
So my template index.php looks like this:
This will result in Joomla adding the menu alias as the body id. Verify by viewing output in browser source:
You can now change the layout just for this page as required, for example:
body#joomla .leftcol {
width: 100%;
float: none;
}
There will doubtless be a more elegant way to achieve this but I find this works just fine for me.
