Créer un template Joomla, mais c'est facile mais ce n'est pas facile. Ca peut être déroutant quand la théorie n'est pas associée tout de suite à la pratique. C'est pourquoi ce tutoriel se veut simple et pratique. Nous allons tenter d'intégrer le template de 3 colonnes de l'article précédent dans Joomla.

Structure des fichiers

Notre template va s'appeler basic. Alors, tous les fichiers du template doivent se trouver dans un dossier nommé basic.

• basic/
  • css/
    • style.css
  • index.php
  • templateDetails.xml

Un template Joomla peut avoir encore plus de fichiers, mais nous n'avons besoin que de trois fichiers pour l'instant.

Le fichier templateDetails.xml

Le fichier XML contient des informations concernant le template (nom de l'auteur, email de l'auteur, description, fichiers utilisés...). Sans lui, il est impossible pour votre template d'exister.

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
 "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
    <name>basic</name>
    <creationDate>September 2010</creationDate>
    <author>Tomsy Web</author>
    <authorEmail>tomsyweb@example.com</authorEmail>
    <authorUrl>http://www.example.com</authorUrl>
    <copyright>Tomsy Web 2010</copyright>
    <license>GNU/GPL</license>
    <version>1.0.0</version>
    <description>Description du template</description>
    <files>
       <filename>index.php</filename>
       <filename>templateDetails.xml</filename>
       <filename>css/style.css</filename>
    </files>
    <positions>
       <position>top</position>
       <position>left</position>
       <position>right</position>
       <position>footer</position>
    </positions>
</install>

Certaines balises sont assez parlantes et ne nécessitent pas d'explication: nom du template, date de création, auteur, email de l'auteur, site Web de l'auteur, copyright, licence, version du template.

La ligne <install version="1.5" type="template"> indique que l'extension est un template compatible avec les versions 1.5.x de Joomla. Le template peut être installé sur Joomla 1.5.5, Joomla 1.5.15 ou encore Joomla 1.5.20 par exemple.

Entre les balises <files> et </files>, on liste tous les fichiers du template.

Et enfin, entre les balises <positions> et </positions>, les positions utilisées par le template. Les modules activés seront affichés à ces endroits selon leur position. La notion de position est fondamentale. Si vous comprenez leur utilisation, alors vous serez à l'aise dans la création de templates Joomla.

Le fichier index.php

Le fichier index.php est construit comme toute autre page HTML, mais les parties où on doit afficher du contenu sont remplacées par du code PHP. C'est dans ce fichier que nous allons inclure les modules dans les différentes positions.

Comparons le fichier index.html au fichier PHP du template Joomla.

La ligne <jdoc:include type="head" /> évite qu'on puisse accéder à votre code directement par l'URL. Considérons que vous avez installé le template basic sur le site example.com. Si vous tapez http://www.example.com/templates/basic/index.php, le message "Accès restreint" s'affichera.

<jdoc:include type="head" /> permet d'inclure des données d'en-tête spécifiques à Joomla dans votre page. Ces données comprennent les balises META, le titre de la page et des liens vers d'autres fichiers. Concrètement, cette ligne équivaut à:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title></title>
<link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>

Ensuite, vient l'inclusion des fichiers CSS. On inclut d'abord les feuilles de style de Joomla, system.css et general.css. Puis, la feuille de style de notre template, style.css.

$this->baseurl représente le chemin du dossier dans lequel Joomla est installé.
Si votre site est example.com et que vous avez installé Joomla à la racine, la valeur de $this->baseurl est "/".
Si, par contre, Joomla est installé dans un dossier "joomla", la valeur de $this->baseurl est "/joomla".

$this->template représente le nom du template.

Joomla possède plusieurs variables comme celles-ci que vous pouvez utiliser dans votre template. $this fait référence à un objet de type "JDocument" et possède plusieurs propriétés et méthodes que vous pouvez utiliser dans votre template.

Les modules sont affichés en utilisant les déclarations jdoc.

<jdoc:include type="modules" name="nom_de_la_position" style="nom_du_style" />

Tous les modules activés ayant pour position "top", seront affichés entre les balises <div id="top"> et </div>. Les autres déclarations jdoc de type "modules" suivent le même principe.

L'attribut style permet de définir la manière dont les modules sont affichés. Sans rentrer dans les détails, grâce à cet attribut, vous pouvez afficher le contenu du module entre des balises DIV, des balises UL ou des balises TABLE.
Le style xhtml affiche le contenu des modules entre des balise DIV.

Pour afficher les articles et le contenu généré par certains composants, on utilise l'instruction <jdoc:include type="component" />.

Le fichier style.css

#container {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1 {
margin: 0;
padding: 0;
}

#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p {
margin: 0 0 1em 0;
}

#content h2, #footer p {
margin: 0 0 .5em 0;
}

La feuille de style ne contient aucune modification. Mais, vous pouvez avoir besoin de modifier le style de certains éléments. Ce qui n'est pas facile lorsqu'on débute dans la création de templates Joomla. En effet, on ne sait pas quel sélecteur CSS correspond à tel élément. Dans ce cas, une extension comme Firebug ou Web Developer est indispensable.

Voici une liste de quelques sélecteurs CSS avec les éléments Joomla associés:

• .componentheading Titre de la page
• .contentheading Titre de l'article
• .buttonheading Boutons PDF, Imprimer et Envoyer
• .createdate Date de création de l'article
• .modifydate Date de modification de l'article
• .moduletable h3 Titre du module
• #form-login Formulaire de connexion
• .blog_more Bloc "Plus d'articles..."

Après avoir créé les différents fichiers de notre template, il ne reste plus qu'à le compresser pour l'installer. Télécharger le template.