Créer son template Joomla

Ce tutoriel, listant toutes les étapes de fabrication d'un template Joomla, s'adresse aux connaisseurs de HTML et CSS.
Si ces normes ne vous sont pas familières, consultez la rubrique XHTML / CSS.


Télécharger le tutoriel "Créer un template Joomla"

1. Créer son interface dans Photoshop (ou tout autre logiciel image).

Lorsque l’interface est finalisée, créer un fichier d’aperçu de 220px par 160px. Ce fichier png (8 de préférence) doit être nommé template_thumbnail.png

2. Imaginer le découpage en zones.

3. Préparer l'arborescence du dossier template.

Le dossier css contient les feuilles de style utilisées par le template (feuille de style l'affichage, feuille de style d'impression...).

• La feuille de style par défaut doit être nommée template_css.css.
• Le dossier images comprend toutes les images utilisées par la feuille de style (images d'arrière-plan de zones, puces,...).
• 
  Le fichier index.htm n'est pas un fichier indispensable. Il permet de visualiser facilement le template au cours de son développement.
• 
  template_thumbnail.png est un aperçu image du template. Cet aperçu est visible dans la partie administration de Joomla.
• 
  Enfin, le fichier templateDetails.xml sert lors de l'installation du template dans Joomla.
  Ce fichier consigne les informations relatives à l'auteur, la date, la version du template et liste les fichiers joints (css et images).

Télécharger un exemple de dossier template pour Joomla

4. Créer le fichier index.htm

Déclarer et identifier les div (conteneurs) correspondants aux zones listées à l'étape 2.
ATTENTION : les positions, dimensions, couleurs, bordure,.... ne doivent pas apparaître dans le htm.
Exemple de fichier index.htm
La page ci-dessus contient deux zones principales identifiées « general » et « pied ».
general contient elle-même trois zones (gauche, centre, droite).
Chaque div représente une zone.
La propriété id permet d'identifier de manière unique un conteneur.

5. Personnalier le fichier template_css.css

A partir du fichier template_css.css fourni, ajouter les styles correspondant aux zones définies dans index.htm.
Pour visualiser son travail : lier la page index.htm avec la feuille de style. Pour ce faire, il suffit d'ajouter la ligne suivante dans le HEAD de l'index.htm
<link href= « css/template_css.css » rel= « stylesheet » type= « text/css »>
Pour plus d'informations sur les CSS, voir Propriétés css courantes. Exemple de styles correspondants au fichier index.htm vu précédemment.

Télécharger un exemple de fichier css pour Joomla

6. "Joomlatisation" du fichier index

Lorsque la feuille de style est correctement renseignée, que l'interface correspond au design voulu, il s'agit d'identifier les zones de travail de Joomla.
Si vous utilisez Dreamweaver pour la conception du template, il existe une extension pour l'application Macromedia.
Cette extension ajoute une barre d'outil spécifique à Joomla. Elle permet d'insérer très facilement les codes d'identification des zones utilisées par le CMS.
Sans Dreamweaver, il faudra donc intégrer « à la main » ces codes. Reportez vous à la page Codes Joomla qui vous concerne : Template Joomla 1.0.x - Codes PHP ou Template Joomla 1.5 - Codes PHP.
Une fois les codes insérés dans le corps de la page, enregistrer le fichier sous "index.php".

7. Créer le fichier templateDetails.xml

A partir du fichier templateDetails.xml joint, modifier les champs auteur, e-mail de l’auteur, url de l’auteur (site de l’auteur), date, version, description selon vos envies.
Les lignes comprises entre les balises <filename> doivent être soigneusement remplies.
Elles recensent les fichiers du dossier template.
Les fichiers thumbnail, template_css, index.php, templateDetails étant toujours nommés de la même manière, il suffit de lister les images utilisées dans le template entre les balises <images>

Télécharger un exemple de fichier xml pour Joomla

8. Création du fichier ZIP

Il suffit de zipper l’ensemble du dossier template (avec WInZip, WinRar ou Créer une archive).
Le fichier .zip est alors prêt à être installé sur Joomla.
Rappel : Pour installer un template de site Joomla
Administration / Installation / Template du site / Installer