1. Please Sign Up if you don't have account. And Login if you have account.

Using the Page Class Suffix in Template Code

Discussion in 'Webmaster Tutorials' started by meto20, Dec 13, 2017.

  1. meto20

    meto20 New Member SN Confirmed Member

    Sometimes web designers need to access a page class suffix from directly within a template. A common reason to do this is to assign unique styles to individual pages linked from a menu (e.g. to change the dominant color on that page). By default Joomla applies the page class suffixes only to limited areas of a page, which often doesn't offer enough flexibility. However, by making some simple changes to your template you can take advantage of the cascading nature of stylesheets to apply unique styles to any element on a page.

    Load Suffix
    First, we need to find out what the page class suffix is for the page we are visiting. To do this, you will need add some code to your template:

    1. Open your template's index.php file (located in /templates/*template-name*/)
    2. Find the <head> tag in the index.php, near the top area of the template
    3. Above this, insert one of the following code blocks (Either of the following options will work fine in most cases. However they work slightly differently, so in certain cases your needs may dictate a specific choice.)
    By Itemid
    To load the page class suffix associated with the current Itemid, add this to the top of the index.php file:

    $itemid = JRequest::getVar('Itemid');
    $menu = &JSite::getMenu();
    $active = $menu->getItem($itemid);
    $params = $menu->getParams( $active->id );
    $pageclass = $params->get( 'pageclass_sfx' );

    By Active Menu Item
    To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)

    $menus = &JSite::getMenu();
    $menu = $menus->getActive();
    $pageclass = "";

    if (is_object( $menu )) :
    $params = new JParameter( $menu->params );
    $pageclass = $params->get( 'pageclass_sfx' );

    (credit: Your post count must be 5 in order to see this link. You currently have 0 post(s))

    The above code will throw an exception in 2.5 and higher. Code below works:

    $app = JFactory::getApplication();
    $menu = $app->getMenu()->getActive();
    $pageclass = '';

    if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');

    You should always use htmlspecialchars() in your code before writing something into an HTML attribute, else you open up an attack vector to inject script code into your page.

    Insert 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"/>

    Using this approach to implement page class suffixes rather than the default approach has several benefits:

    • leaner CSS
    • much greater flexibility in styling any element on the page
    • compliments and simplifies template overrides
    Fishy! likes this.

Share This Page

Turning cookies on makes it easier for you to browse the web. Cookies are files created by websites you’ve visited, which store information, like the language you prefer or profile information. At Scriptznull, we use cookies to improve the quality of our service. Check our Privacy Policy for more information about cookies. Okay More information