Set a custom page suffix

This tutorial explains how to set a custom page suffix to add a custom css class to single pages in a template based on the Warp framework.

Preparing the template.php

Open the file \layouts\template.php and have a look at the body tag. It should look like:

<body id="page" class="yoopage <?php echo $this->warp->config->get('leftcolumn'); ?> <?php echo $this->warp->config->get('rightcolumn'); ?>">

Just put the following code into the class="....":

<?php echo $this->warp->config->get('yourparameter'); ?>

So in our example the body tag will look like:

<body id="page" class="yoopage <?php echo $this->warp->config->get('leftcolumn'); ?> <?php echo $this->warp->config->get('rightcolumn'); ?> <?php echo $this->warp->config->get('yourparameter'); ?>">

Adding the suffix to a menuitem

Go to your Joomla administration, go to menus and open the menu of your choice. Edit a menu item which should get the new class.

Open the Parameters(System) on the right and enter your parameter you defined in the template.php together with the class you want to have in the template.

For example type in: yourparameter-customcolor

After clicking on Save and reloading the frontend of your site, the class customcolor will be added to the body tag of this page.

The body tag

The string behind the key-term yourparameter gets inserted as a class in the <BODY> tag. Note: The class is only inserted on the page of the menu item for which the page class suffix is set, as we only want to style the page our menu item links to.

<body class="customcolor">

This CSS class makes a totally different styling for this specific page possible.

For example to access the CSS style of the first menu-item you can add the following code to the css:

.customcolor #menu .item1 { your css changes; }

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!