The Page Class Suffix is a parameter in Joomla! content Menu Items. It is set in the Menu Item: [Edit] screen under the "Parameters (Advanced)" section. This will cause Joomla! to either add a new CSS class or modify the existing CSS class for elements in this specific Menu Item layout.
When Joomla! generates a page, it automatically creates pre-defined CSS classes to allow styling of the page. There is no general rule, how it is used, this is a decision made by the author of the active template. For example, a page might have the element
<div class="componentheading">
Basically, by using the Page Class Suffix you can do one of following tricks:
Create a new class while preserving the original one
to do this, enter the parameter with a leading space. For example, entering a space plus "myClass" will create a new CSS class called "myClass" and it will be inserted as a class for elements in the page referenced by that Menu Item. In this case the example above will be changed to
<div class="componentheading myClass">
Change the name of an existing class
The trick is similar, but instead entering a space before "myClass" you can add for example an underscore "_" or any other character allowed by the CSS naming standards. In this case the output will look like:
<div class="componentheading_myClass">
Using the above trick you obviously can add page specific styling. Generally, it is recommended to use a leading space to create a new class. This way, CSS styling for this component that uses the standard class names will continue to work. You can use the new class name to add any desired styling to the component without needing to re-create all of the existing CSS code. Note that, if you create a new class name, make sure it has a unique name and doesn't conflict with any existing class names.
The big question is
How to insert the needed code in template?
There are two steps required: first of all you need to figure out the suffix for the page, then you need to insert it in the needed spot in your template.
Load the suffix
For this you need to insert some extra code in the template's <head> section or somewhere else in the template - obviously before the place you want to use the Page Class Suffix:
<?php
$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
?>
Insert the suffix
The next step is to use the page class suffix somewhere in the template.
In the Body Tag
The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:
<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">
To Load a Page-Specific Stylesheet
The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/<?php echo htmlspecialchars($pageclass) ?>.css" type="text/css"/>
The third method is to change ANY standard page element, like above
Let's say I want to change how the component heading - a standard Joomla page element looks like. For that most probably I need to look for it in the template overrides - the "html" subdirectory of my template - to locate the occurrences of
<div class="componentheading">
and to replace them with
<div class="componentheading<?php echo htmlspecialchars($pageclass) ?>">
Of course more ways to use the Page Class suffix can be imagined - and implemented. I hope I succeeded to unleash your imagination!
