Monday, 25 October 2010 19:12

Going Big with the Joomla! Page Class Suffix

Written by 

joomlaJoomla!'s· "Page Suffix" makes it possible to change the look of fonts, headings and other in-content styles for a given web site page.

It works nicely, but can't modify larger considerations by default - for example, you won't be able to modify your template design (background image, layout, etc) with a normal page class suffix.

However, it is possible to do just that! Here's how we modified the page suffix function to change the background of our new 'Code Labs' page.

Step One: Adding the Page Class

To be placed above the <head> of your template's index.php file:

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

Step Two: Reference the CSS in Index.php

We want to modify quite a bit of the template (not just what's inside the <BODY> tag), so we'll add the following code just after the reference to any other stylesheets (CSS) in our template's index.php:

<link rel="stylesheet" href="/templates/yourtemplatename/css/<?php echo $pageclass ?>.css" type="text/css"/>

What we're doing here is telling Joomla! to look for a CSS file that matches the page class that we specify for a given menu item. Tricky, huh? Note that you may need to remove the / from the template location, e.g. =templates/yourtemplatename/css/..

Step Three: Create a Matching CSS File

Finally, we need to specify the page suffix for the menu item in the Joomla! administrator area, and create a corresponding CSS file.

codelabs_pageclasssuffix

For example, for this code labs page we specified 'codelabs' as seen in the image above.

Now we need to create a corresponding CSS file, e.g. "codelabs.css".· That CSS file can then override whatever your default CSS styles already in place are, if you choose.

In the example above, you would place 'codelabs.css' in the yourtemplatename/css directory.· Here's the CSS we used to change the design on this page from our normal CartaNova background of an orange farm and windmills to the mountains, sky and lake you see here.  We also changed the default site background color.

body {background: #353513 url(images/alpine_farm.jpg) top center; background-repeat: no-repeat;}

It's as simple as overriding one line of CSS! Use this method sparingly though - consistency in visual web site design cannot be undervalued.

For more information and a few alternative methods for modifying your template display through the Joomla! Page Class function, be sure to check out Using the Page Class Suffix in Template Code at the Joomla! Documentation Wiki.

Published in Joomla! Web Design
Tagged under

Related items

More in this category: How to Disable Templating While Developing Your Joomla! Extension »

2 comments

  • Comment Link Andrew J. Holden Saturday, 27 August 2011 14:59 posted by Andrew J. Holden

    Thanks! I think there's one or two extensions out there that can help with this too now, but this is probably just as fast..

  • Comment Link Corey Wednesday, 24 August 2011 18:58 posted by Corey

    This was the best and easiest tutorial I saw on this subject! Thank you so much for writing this, saved me so much time!

Leave a comment

back to top

A Quote for your Consideration:

"What's missing most from business today?
Not sales. Not service. Not technology.
Answer: A point of view."

Source: Jason Fried, Founder of 37signals.