Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Use Mobile Web Templates in Joomla

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: microsoft2 (29 Oct 2009)
Last edited: hamishwillee (20 Aug 2013)



This article will describe how to mobilize your web site using Joomla and Nokia's Mobile Web Templates. All you need to do is install our Mobiletag plugin and our Mobileweb template and then check and customize your site. If you are familiar with Joomla! and WURFL you can go directly to #Before you start.

What is Joomla!

Joomla! is a free, open source content management system used to create websites. It is written using PHP and uses MySQL as a database provider. For more information visit

Joomla! template

A Joomla! template controls the overall look and layout of your site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for the site. Basically we need two templates - a version for desktop computers and for mobile devices.
Our Nokia Developer Mobile template was designed to support top menu, latest news, breadcrumbs and footer modules plus article and category views. You will most probably need to modify our template in order to fit your design goals. If you are not familiar with creating and modifying templates, please continue to!_templates

Joomla! plugin

Joomla plugins allows you to add extra functionality to your Joomla! site. We have created a 'Mobiletag' plugin that will install WURFL php api to your site and add a 'mobile' html tag to your articles in order to help you mobilize your content.

What is WURLF

WURFL is a free open source project that provides a comprehensive resource of device information and contains more than 10 000 device variants. WURFL provides the device database in XML format and interface for parsing it in several languages (PHP, Perl, Ruby, Java, Python, C++, dotNET).
We will use wurfl only to detect if a mobile device is hitting our site. But the wurfl API allows you to greatly customize your content and show only the appropriate sis files, screen-shots and description based on the device information. You can easily get the Symbian version of the device for example.
For more information visit
You may also be interested in How to serve different web templates and resources using WURFL

Before you start

The mobiletag plugin and the Nokia Developer Mobile template are still in experimental stage, they are only recommended for web developers!
You can install only the plugin or only the template - there is no dependency between them.
Please update your Joomla! installation to the latest version. The recommended minimum is 1.5.14.
Make sure your memory limit in php.ini is at least 32M.

Mobiletag plugin


With this plugin you will be able to choose a template which will be active only if a mobile browser is detected. This way you will have one template for desktop computers and one template that is specially optimized for mobile devives.
As a bonus you will also be able to add a special 'mobile' tag in your articles. If you have content that you don't want to show in mobile devices you would add code like this:

<mtag device="desktop">
<img src="mybigpicture.jpeg"/>
Other text that you will show only on desktop browsers.

To specify a mobile only html section. Use the following code:

<mtag device="mobile">
<img src="mysmallpicture.jpeg"/>
Special content and formatting visible only to mobile browsers.


You can download and install the plugin from here:
After the installation

  • Set the permissions of /plugins/system/wurfphp/cache to 777 or change the WURFL cache folder to some other place from /plugins/system/wurfphp/resources/wurfl-config.xml
  • Enable the plugin from the plugins list.
  • Reload your site and wait for a few minutes. During this time WURFL will creates its cache. This will happen only once.

Source code and future work

The plugin source is hosted at If you feel excited please contribute to the project. For example it would be very convenient if you could type something like this

<mtag device="symbian 9.1" images="scale">
special download link for symbian 9.1 devices
<mtag device="low-range" images="hide" >
do not use slideshow.

Nokia Developer Mobile template

This template came as a result of our effort to mobilize our site ( which is a typical store site. We choose to use High-End Mobile Web Templates since most of our traffic comes from such devices. Future work will include combining the three different templates from Nokia into one using the technique described in How to serve different web templates and resources using WURFL
Lets start and look what's in the template:


This is the main layout of the theme. We will discuss the different sections of the template below. This template use the original Nokia Web Template for High End devices. The few customization we made are in /templates/forumnokiamobile/css/high_end_devices_v1_2_en/resources/styles/modifications.css
Joomla template overview2.png

Nothing new here, after installing the template you just need to modify the img-logo.png file.

		<div id="header">
<div class="branding">
<a href="">
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/high_end_devices_v1_2_en/resources/images/img-logo.png" alt="Logo" />
<p>Company name</p>
<p>Company tagline</p>

Top menu

To use the four buttons top menu we use the following code

	<jdoc:include type="modules" name="top" style="4buttons" />

notice the style="4buttons" part - this custom style is called Custom module chrome and the real work is done in the function called modChrome_4buttons found in mymodules.php

function modChrome_4buttons( $module, &$params, &$attribs )
preg_match_all( "/\<a[^\<]+\<span\>.[^\<]+\<\/span\><\/a\>/", "$module->content", $array);
foreach ($array as $val) {
echo "matched: " . $val[0] . "\n";
echo "part 1: " . $val[1] . "\n";
echo "part 2: " . $val[2] . "\n";
echo "part 3: " . $val[3] . "\n";
echo "part 4: " . $val[4] . "\n\n";
echo "<ul class=\"nav-horizontal-flat stack\">";
$ind = 0;
foreach ($array[0] as $item)
if( $ind == 0 )
$class = "first four-piece";
else if( $ind == sizeof( $array[0] ) )
$class = "last four-piece";
$class = "four-piece";
echo "<li class=\"$class\">" . $item . "</li>\n";
echo "</ul>";

We basically take the spans from the menu module output and replace them will styled ul element in order to get the top 4 buttons. You will need to change the code in order to get the three buttons version. Also make sure that the menu module parameter is set to List - see screenshot


To use Nokia'a styled breadcrumbs we need to override the breadcrumbs module output. This is generally discussed in How to override the output from the Joomla! core. Basically we need to have file name forum_nokia_mobile/html/mod_breadcrumbs/default.php in our template folder.

<?php // no direct access
defined('_JEXEC') or die('Restricted access');
<ul class="breadcrumbs">
for ($i = 0; $i < $count; $i ++) :
// If not the last item in the breadcrumbs add the separator
if ($i < $count -1)
echo "<li>";
echo '<a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a>';
echo '$list[$i]->name';
echo ' '.$separator.' </li>';
else if ($params->get('showLast', 1) )
{ // when $i == $count -1 and 'showLast' is true and we don't want to add a link
echo "<li>".$list[$i]->name."</li>";


Once you have installed the theme you will be able to add different UI components in your article. For a full list visit with the UI components download the Mobile Web Templates for Smartphones and associated examples.


To use this cool UI component all you need to do is add similar code to your article.

<mtag device="mobile">
<dl id="accordion" class="list-accordion">
<dt class="expanded"><span></span>Remind Me</dt>
{include_content_item 1 readmore=1 br=1}
<dt class="expanded"><span></span>Smart Settings</dt>
{include_content_item 2 readmore=1}
<dt class="expanded"><span></span>AgendaSaver</dt>
{include_content_item 3 readmore=1}

In Joomla a category is a list of articles. In our case the category News will contain all the news articles. What we want here is use the table with alternative row colors. To override the category layout, we need to add several files in forumnokiamobile/html/com_content/category/. This code is more complex than we want to, so what we did is copy the layout from the built-in beez template and modify default_items.php. All we need to do is add class="odd" for the rows with odd numbering.

<?php foreach ($this->items as $item) : ?>
<tr class="<?php if( $item->odd % 2 ) echo "odd " ; echo $this->escape($this->params->get('pageclass_sfx')); ?>">

Joomla template category list.png
Everything looks great, so lets continue with the


The slideshow component is very easy to use, just add to your article similar code

<div id="slideshow" class="slideshow">
<a class="preview">
<img src="images/remindme/mainscreen.png" alt="loading" />
<ul class="controls nav-horizontal-rounded stack">
<li class="first two-piece"><a class="previous">previous</a></li>
<li class="last two-piece"><a class="next">next</a></li>
<ol class="data">
<a href="images/remindme/mainscreen.png">
<img src="images/remindme/mainscreen.png" alt="Main screen" />
<a href="images/remindme/settings1.png">
<img src="images/remindme/settings1.png" alt="Alarm settings 1" />
<a href="images/remindme/settings3.png">
<img src="images/remindme/settings3.png" alt="Alarm settings 2" />
Contacts form

There are a lot of 'Contact us' forms extensions for Joomla, what we used is a free plugin called ALFcontact. We needed to modify it and remove the tables from their design.
The final result looks like this:
Joomla template contactus.png

Latest news

We will use the same technique to override the latestnews module output in order to get the styled list for the latest news.

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<ul class="list-graphical-inline stack latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php foreach ($list as $item) :  ?>
<li class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php echo $item->text; ?></a>
<?php endforeach; ?>


Warning.pngWarning: Link provided for footer below was broken. This section is therefore untested. Please update if an alternative extension is found to replace this

If you want to add html code in your footer you may consider the Custom Footer Module for Joomla!. It is a free extension and very useful in my opinion. You can also modify the template index.php file and add your footer html code there. This is how you insert the footer module in index.php.

<jdoc:include type="modules" name="footer" />

And this is a typical footer html code, that will be shown only to mobile devices, if you have installed Mobiletag plugin.

<mtag device="mobile">
<div id="footer">
<ul class="nav-footer">
<a href="">Home</a>
<a href="products">Products</a>
<a href="services">Services</a>
<a href="news">News</a>
<a href="contactus">Contact</a>
<p>My Company</p>
<div class="stack"></div>


You can download and install the theme from here


I encourage you to use the template and improve it. Nokia templates saved us a lot of work, mobilizing our web site. I hope that this Joomla! template will save a few days of your development time.

If you feel that you added some useful code, update this article and the zip file.


To see the Nokia Developer Mobile template and Mobiletag plugin in action you can visit our site from your mobile.

You can also install User Agent switcher. With this add-on for Firefox you can easily change the UA string of your browser and test if your site shows the proper content.

This page was last modified on 20 August 2013, at 06:09.
355 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.