Skip to content

Month: July 2011

Using the Page Class Suffix in Joomla templates and components

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: Page Class Suffix in template code)


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

For more info:

Joomfish language code tricks

Of course Joom!Fish has no competitors in providing multilanguage solutions for Joomla! But what we always wanted to achieve is to give more and more power to the administrators. And these people care about design, images, language dependents modules and such stuff.

We had some nice tricks with Joom!Fish 1.8.x, but I will provide you now some nice advanced features in respect to the design posibilities with Joom!Fish in terms of different visualisation of your web site in different languages.

As usual, there is no other alternative in the Joomla! multilanguage world to what we offer. Check out our design tricks coming with Joomla! 1.5 and Joom!Fish 2.0.

Note: these tricks require intermediate knowledge in Joomla! and might not be easy to implement for a new users.


Load different CSS file, based on the language.

Place this instead of the default load of a CSS file:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->language ?>.css" type="text/css" />

Now name your CSS files like en-GB.css or bg-BG.css or de-DE.css or whatever language you use.


Want to display certain module position only into one language?

Add this to the correct place in you template:

 if ($this->language=="de-de") {
 <jdoc:include type="modules" name="germanmoduleposition" />
<?php } ?>

Now you should place the modules that you want to appear only into the template position named germanmoduleposition.


Load different image with the different languages.

Lets imagine you have an image named logo.gif that is the logo of your site. But you want to use different logo for each language.<br /><br />On default the logo will be called with the following command in your template (if it is not called via the CSS):

<img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.gif" width="260" height="180" alt="Logo" />

Or at least it should be something similar.
Now in order your logo to change with the languages, you need to do replace the following code with:

<img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/<?php echo $this->language ?>.gif" width="260" height="180" alt="_?php echo JText::_('Logo'); ?>" />

What else you have to do is to name your logo images for the different languages en-GB.gif, bg-BG.gif etc.
You also need to add the language definition of the alt text. Lets imagine your template is named nice_template. If it is 1.5 compatible should have a language file under language/en-GB/en-GB.tpl_nice_template.ini

Add at the bottom of this file:

Add the same line for the translation file of each language you use (i.e.
language/de-DE/de-DE.tpl_nice_template.ini : LOGO=Logo German)

For more info: