Créer un template Joomla 1.5 pas à pas

logo-joomla

 

 

On a l’impression que la création d’un template Joomla 1.5 est difficile et que ce n’est pas réalisable par un débutant. Pourtant, un template Joomla 1.5 n’a besoin que de quelques éléments de base, mais le plus gros du travail sera la personnalisation avec le CSS. C’est pourquoi, les templates Joomla sont plus lourds à charger que d’autres CMS. Le fait est que même un template de base possède déjà des règles CSS existantes ce qui peut surcharger le système. On va créer un template Joomla 1.5 à partir de zéro, et je suppose que vous avez des connaissances en CSS et quelques rudiments en PHP. Ces derniers vont servir à créer la page index.php qui est la base d’un template.

Vous n’avez pas besoin de connaitre le CSS à fond, car le navigateur Firefox possède des extensions pratiques qui vous permettront d’identifier la plupart des styles. Tout le monde parle de Firebug pour le développement web, mais je le trouve trop puissant et il n’est pas facile à utiliser. Au lieu, je vous conseille d’utiliser l’extension Web Developer pour Firefox qui est aussi puissant, mais également beaucoup plus maniable. Une fois installé dans Firefox, sa barre d’outils ressemble :

creer-template-joomla-1-5

 

Comme on peut le voir, on peut accéder à de nombreuses informations sur une page web. On peut idenfier le style CSS d’un élément, l’ID de l’élément, les couleurs utilisés par la page, une règle de mesure, etc. Cet outil simple cache une complexité phénoménale, et je l’utilise pour créer tous mes templates Joomla 1.5 .

 

Créer un modèle de base pour votre template Joomla 1.5

 

 

Il est important de créer un template de base pour éviter de récreer tous les fichiers à chaque fois qu’on conçoit un nouveau template. Dans sa forme basique, un template Joomla 1.5 possède la structure suivante :

  • Un répertoire appelé css (dans lequel on créera le fichier style.css).
  • Un répertoire appelé images
  • Un fichier appelé index.php
  • Un fichier appelé component.php
  • Un fichier appelé templateDetails.xml

creer-template-joomla-1-5 1

 

Vous allez mettre le code suivant dans le fichier index.php :

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>

<jdoc:include type=”head” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css” type=”text/css” />
</head>

<body>
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”bottom” />
</body>

</html>

La première partie est l’en-tête et elle contient des informations sur la norme HTM utilisée, le langage et le chemin pour le fichier de style CSS. Comme vous pouvez le voir, le chemin correspond au fichier style.css que nous avons crée dans notre répertoire css .

Pour le moment, il n’est pas nécessaire de mettre du code dans le fichier component.php, car il sert surtout à personnaliser le template en fonction de certains composants. Dans le fichiers templateDetails.xml , vous allez mettre le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>Template_ManiacGeek</name>
<creationDate>2011</creationDate>
<author>Sam Ganegie</author>
<authorEmail>sameganegie@gmail.com</authorEmail>
<authorUrl>http://www.graphismologie.com</authorUrl>
<copyright>Sam Ganegie 2011</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Template Maniac Geek</description>

<files>
<filename>index.php</filename>
<filename>component.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/style.css</filename>
</files>

<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>

</install>

Vous n’avez qu’à remplacer les noms de l’auteur et du template par les votres, mais respectez bien les balises filename et position . Nous verrons qu’elles seront très importantes pour que le template fonctionne correctement.

Dans ce fichier templateDetails.xml, j’ai mis Template_ManiacGeek dans la balise name et Template Maniac Geek dans la balise description. N’oubliez pas le tiret (_) dans la balise name , car cela pourrait causer des erreurs. Maintenant que nous avons créer les fichiers de base, nous allons compresser ce template et l’installer dans Joomla. Il suffit de sélectionner tous les fichiers de votre répertoire de base et créer une archive ZIP.

creer-template-joomla-1-5 2

 

 

Ensuite, connectez-vous à l’administration de votre Joomla et installez notre template Joomla comme vous le feriez avec n’importe quel template.

creer-template-joomla-1-5 3

 

creer-template-joomla-1-5 4

Une fois que vous l’avez installé, vous pourrez le retrouver dans le Gestionnaire des Templates .

creer-template-joomla-1-5 5

 

Vous pouvez voir qu’il adopte le nom que nous avons donné dans la balise Name du fichier templateDetails.xml et si vous cliquez dessus. vous verrez que la description correspond également à la balise description du fichier templateDetails.xml .

creer-template-joomla-1-5 6

 

Ce Template Joomla 1.5 est fonctionnel, et vous pouvez le tester pour voir :

creer-template-joomla-1-5 7

 

Evidemment, cela ressemble à un site datant de 1985, mais c’est parce que nous n’avons pas encore commencé la personnalisation. Vous avez besoin uniquement des fichiers index.php et style.css à partir de maintenant pour créer un template Joomla 1.5… sans oublier l’outil Web Developer .

 

Créer les principales parties d’un template Joomla 1.5

 

 

 

Commencez par ouvrir le fichier index.php et tentez de comprendre les différents lignes de code. La ligne la plus importante est :

<jdoc:include type="component" />

Car elle contient le composant de votre site Joomla, c’est à dire tout vos articles. Je précise que l’exemple que j’utilise est un vrai site avec ses articles, ses menus, ses bannières, etc. Mais quand je prévisualise mon template, je ne vois pas les menus ou la bannière, car justement, le template ne sait pas encore les afficher. Vous ne devez pas être rebuté par l’apparence de complexité de ce template, car c’est très facile à comprendre.

Dans notre fichier index.php, nous avons le code suivant entre les balises body :

<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Donc, nous allons d’abord créer une balise DIV qui contiendra tous les éléments de la page. Certains préfèrent créer les éléments en se servant de la balise Body comme point de départ. Mais je préfère la méthode de DIV, car cela offre plus de souplesse dans le design. Attention, la balise fermante de cette première balise doit se trouver à la la fin de la page, car elle est censée englober tous les éléments de la page.

creer-template-joomla-1-5 8

 

Un petit oubli : utilisez l’éditeur Notepad++ parce qu’il permet une coloration syntaxique selon le code utilisé. Cela permet d’identifier des erreurs possibles.

Maintenant à l’intérieur de notre balise container , nous allons créer une bannière comme dans le code suivant :

<div id="container">
<div id="header"></div>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />

Chaque balise possède un ID qui permet de l’identifier pour l’utiliser avec le CSS. Voilà pour le moment pour le fichier index.php. Maintenant, ouvrons le fichier style.css dans le répertoire css de notre template joomla 1.5 et ajoutez les lignes suivantes :

#container {

margin:auto;
padding:0px;
width:950px;

}

#header {

width:950px;
height:200px;
background-color:#000;

}

J’ai déjà averti que vous devez connaitre le CSS pour suivre ce tutoriel… Donc, j’ai mis une largeur de 950 pixels pour le conteneur et idem pour la bannière. Et j’ai utilisé le style margin:auto pour centrer automatiquement l’élément sur la page, et si on affiche de nouveau notre template, cela donne :

creer-template-joomla-1-5 9

Comme vous le voyez, le contenu est centré et une bannière de 950 pixels a été crée avec la couleur noire. Maintenant, on va ajouter une balise DIV appelée top pour mettre notre moteur de recherche. Mettez le code suivant dans le fichier index.php après la balise div header :

<?php if ($this->countModules( 'top' )) : ?>
<div id="top">
<jdoc:include type="modules" name="top" style="rounded" />
</div>
<?php endif; ?>

Ce code est légèrement compliqué que le précédent, mais le principe est le même. Nous avons fait en sorte qu’on puisse mettre un module Joomla dans cette partie. Cette formulation permet de créer ce qu’on appelle le dépliage des colonnes d’un template Joomla ou Collapsing Colonn … Vous ignorez totalement de quoi je veux parler hein, alors une petite explication s’impose.

 

Le dépliage de colonne dans un template pour Joomla 1.5

 

 

Le dépliage des colonnes permet d’afficher le module en fonction du contexte et s’il n’est pas affiché, alors la place laissée par cette désactivation devient libre. Par exemple, vous utilisez le module Articles Similaires, mais ce module ne s’affichera que pour certains articles. Maintenant, imaginons que vous avez une partie de votre site qui contient plusieurs modules à la suite, mais que le module Articles Similaires est le premier. Ce dernier ne s’affichera pas pour la page d’accueil, car cette dernière est unique, aussi les modules suivants dans la partie prendront la première place. Sinon, la place serait quand même préservée par Joomla, mais le design serait catastrophique. Si vous utilisez la formulation suivante pour intégrer un module :

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

Alors le dépliage des colonnes n’est pas possible, c’est pourquoi on doit privilégier la première formulation même si elle est plus complexe. En fait, vous n’avez qu’à la copier pour toutes les parties du site en changeant simplement le nom des positions.

Revenons à notre design, une fois que vous avez inséré le code de la partie TOP, ouvrez votre fichier style.css et mettez le code suivant :

#top {

background-color:#ccc;

}

La balise n’a pas besoin de régle spécifiques, sauf que j’ai mis une couleur grise pour la distinguer plus facilement. Le résultat :

creer-template-joomla-1-5 10

 

Je n’ai mis qu’un seul module dans la balise DIV TOP dans mon site, donc il n’affiche que la recherche personnalisée. On va passer à la création des menus de notre site.

 

Créer les menus d’un template Joomla 1.5

 

 

Les menus de navigation que vous créez dans votre site Joomla ne sont que des modules. Donc, on peut les afficher comme on l’a fait lorsqu’on a créer la balise. Vous copiez le code de toute la balise div top et le coller juste en dessous, ensuite, vous changez toutes les occurences TOP par LEFT comme dans le cide suivant :

<?php if ($this->countModules( 'left' )) : ?>
<div id="left">
<jdoc:include type="modules" name="left" style="rounded" />
</div>
<?php endif; ?>

Ensuite, dans le fichier style.css, ajoutez le code suivant :

#left {

float:left;
width:180px;
background-color:#f5f5f5;

}

Cette règle CSS stipule que la partie gauche sera alignée à gauche, elle aura une couleur grise claire et sa largeur sera de 180 pixels. Et vous savez quoi ? C’est la même chose pour créer toutes les parties de votre site. Balise DIV et insertion de module, ensuite la personnalisation de ces derniers avec CSS. On teste le résultat de notre dernière modification :

creer-template-joomla-1-5 11

 

On pourrait utiliser les balises DIV pour aligner les autres éléments, mais ce serait difficile, car nous devrons créer des dizaines de règles CSS pour créer notre site. Mon design possède 3 parties centrales, le menu à gauche, le contenu central qui contient les articles et le menu à droite. Donc, un tableau est la meilleure solution, aussi effacez la partie left et insérez le code suivant à la place :

<table id="maincontent" border="0" colspacing="0" cellpadding="0">
<tr>
<?php if ($this->countModules( 'left' )) : ?>
<td class="left">
<jdoc:include type="modules" name="left" style="rounded" />
</td>
<?php endif; ?>

<div id=”content”>
<td class=”tablecontent”>
<jdoc:include type=”component” />
</td>
</div>

<?php if ($this->countModules( ‘right’ )) : ?>
<td class=”right”>
<jdoc:include type=”modules” name=”right” style=”rounded” />
</td>

<?php endif; ?>

Ce ne sont que trois parties de code qui se répètent avec le changement de nom correspondant aux différentes position.

creer-template-joomla-1-5 12

 

Ensuite, mettez le code suivant dans le fichier style.css :

#maincontent {

margin:auto;
width:950px;

}

td.left, td.tablecontent, td.right {

vertical-align:top;

}

La règle maincontent stipule la largeur et que le contenu soit centré. Nous voyons dans notre code que nous avons mis des classe CSS à chaque cellule de tableau (td.left, td.tablecontent, td.right). Le problème est que si nous n’avions pas ces classes, voici le résultat de l’affichage :

creer-template-joomla-1-5 13

 

Le menu serait complètement en bas à cause de la dilatation des cellules puisque ce ne sont que 3 cellules d’un tableau HTML qui contiennent notre site. De ce fait, la règle :

td.left, td.tablecontent, td.right {

vertical-align:top;

}

force l’alignement de tous les élémements sur la partie centrale supérieure de la cellule. Voici le résultat :

creer-template-joomla-1-5 14

 

C’est beaucoup mieux non ! Remarquez le menu à droite qui affiche les articles similaires, mais si j’affiche la page d’accueil :

creer-template-joomla-1-5 15

 

Et voilà le dépliage de colonnes des templates Joomla en action ! Puisque la page d’accueil ne peut pas avoir d’articles similaires, le menu à gauche disparait et permet à cette page d’accueil d’occuper toute la place disponible.

 

Du CSS, du CSS et encore du CSS !

 

 

Je vous ai aidé à créer les parties principales de votre site, maintenant à vous de régler le reste avec le CSS. On peut encore modifier le fichier index.php pour intégrer un fil d’ariane pour intégrer le module breadcrumbs ou encore la mention de copyright de votre template. La seule limite est votre imagination. Je vous donne quelques exemples de personnalisation, on va modifier les liens dans le menu de navigation, et c’est maintenant qu’on va maintenant utiliser l’extension Web Developer.

Dans la barre d’outil Web Developper, cliquez sur CSS et sélectionner Style Information :

creer-template-joomla-1-5 16

 

Votre curseur va se transformer en rectangle de sélection, et vous pouvez l’utiliser pour identifier n’importe quel élément de la page, ainsi utilisez-le sur la bannière :

creer-template-joomla-1-5 17

 

Une petite fenêtre va s’ouvrir en bas et elle va vous afficher le style correspondant. Etant donné que nous avons déjà créer le style, il affiche le chemin du fichier (css/style.css), mais également le numéro de ligne où nous avons écrit la règle, pas mal non ! C’est idéal pour trouver des erreurs.

On va utiliser le même principe pour idenfifier les liens du menu de navigation.

creer-template-joomla-1-5 18

 

La petite fenêtre s’ouvre toujours, mais elle n’affiche aucun style, et pour cause, puisque nous n’en avons pas encore défini dans le fichier style.css. Au lieu, la barre d’adresse de Web Developper affiche un autre style indiqué par la flèche rouge… Mais d’où sort-il si nous n’en avons pas défini ? Rappelez-vous quand nous avons crée notre fichier index.php dans notre template de base, nous y avons insérer les lignes suivantes :

<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css” type=”text/css” />

Elle signifie que le template Joomla va utiliser plusieurs fichiers de style selon différentes situations. En premier lieu, il va vérifier dans le fichier personnalisé que nous avons crée, et s’il ne trouve pas de règle définie, alors il va passer au fichier general.css, system.css, etc. C’est pourquoi il est si facile de créer un template pour Joomla 1.5, car tous les éléments possèdent déjà leurs styles et qu’il suffit de les modifier dans le fichier personnalisé.

Donc, dans notre barre d’adresse Web Developer, nous voyons que la règle de notre menu de navigation s’appelle ul.menu, alors on va créer la règle suivante dans le fichier style.css :

ul.menu {

margin:0px;
padding:0px;

background-color:#ccc;

}

Et le résultat :

creer-template-joomla-1-5 19

 

Le menu devient gris correspond à notre règle. Cliquez sur les liens avec notre outil Style Information de Web Developper et identifiez sa règle. Il y a beaucoup de cascades, mais la règle est (ul.menu li a), c’est à dire le lien (a) qui se trouve dans une list (li) à l’intérieur de l’élément (ul). Donc la règle pour le lien dans le menu de navigation serait :

ul.menu li {
list-style-type:none;

}

ul.menu li a {

font-size:11px;
text-decoration:none;

}

Il s’agit en fait de deux styles, le premier pour enlever la décoration de puce pour la liste, et la deuxième pour réduire la taille de police des liens et son soulignement.

creer-template-joomla-1-5 20

 

Et vous n’avez qu’à continuer de cette manière. Identifier précisément le style (et il y en a des centaines pour créer un template Joomla ) et créez la règle correspondante. On pourrait dire que puisqu’on a configurer les liens des menus de navigation, tous les liens auront cette apparence, alors voyons si c’est le cas :

creer-template-joomla-1-5 21

 

Ouhhh, le menu de droite n’a pas du tout changé… Mais pourquoi donc puisque ce sont aussi des liens à l’intérieur d’une liste. Utilisez l’outil Style Information et vous aurez la réponse :

creer-template-joomla-1-5 22

 

Lorsque nous avons identifié le menu de gauche, le style indiquait ul.menu alors que cette fois, il indique ul.relateditems. Et c’est le principal problème pour créer des templates pour Joomla 1.5, car le moindre petit élément possède son propre style, et il faut beaucoup de temps pour créer un template Joomla 1.5 si le site est particulièrement chargé de différents modules. Afin que les deux menus correspondent, ajoutez simplement la règle ul.relateditems à notre style existant ul.menu comme ceci :

ul.menu, ul.relateditems {

margin:0px;
padding:0px;
background-color:#ccc;

}

ul.menu li, ul.relateditems li {
list-style-type:none;

}

ul.menu li a, ul.relateditems li a {

font-size:11px;
text-decoration:none;

}

Et le résultat :

creer-template-joomla-1-5 23

 

Bon je pense que c’est tout même mieux s’il reste beaucoup de choses à faire, on va compresser notre template Joomla fait maison et on va le réinstaller pour voir s’il fonctionne correctement. Faites une capture d’écran de votre template au format PNG avec les dimensions 206×306 ou proche pour qu’on puisse le prévisualiser dans l’Administration de Joomla. Le nom de cette image miniature doit être template_thumbnail et on doit aussi le déclarer dans le fichier templateDetails.xml pour que Joomla puisse le trouver. En fait, vous devez déclarer tous les fichiers et les positions que vous utilisez dans ce fichier XML sinon elle ne seront pas affichées si on compressez le template pour le distribuer sur le Web.

creer-template-joomla-1-5 24

 

Maintenant, vous pouvez prévisulalisez le template dans la partie Administration :

creer-template-joomla-1-5 25

 

Au début, vous trouverez toutes ces étapes très difficiles, mais aujourd’hui, je peux créer un template Joomla 1.5 en quelques jours. Il faut s’entrainer sans cesse en modifiant son approche pour différents effets de votre site. Voici quelques exemples de Template pour Joomla 1.5 que j’ai crée :

creer-template-joomla-1-5 26

 

creer-template-joomla-1-5 27

 

creer-template-joomla-1-5 28

 

creer-template-joomla-1-5 29

 

creer-template-joomla-1-5 30

 

creer-template-joomla-1-5 31

 

Malgré la différence de Design, tous ces templates Joomla utilisent les principes que nous avons vus dans ce tutoriel. Si vous avez des questions, contactez-moi directement ou laissez un commentaire.

Une réflexion sur “ Créer un template Joomla 1.5 pas à pas ”

  1. Vous allez mettre le code suivant dans le fichier index.php :

    [...]

    Attention, les double-guillemets à utiliser sont ” ” et non pas ceux indiqués dans cette partie (ce problème est corrigé quelques lignes plus tard, mais lors de l’installation le template ne va pas fonctionner !).

    1. (dans le traitement de texte c’est les bons mais lors de la publication ça modifie automatiquement, voilà donc d’où vient l’erreur, c’est dans la première partie [puisque le code n'a pas passé] du fichier index.php, il faut se référer à http://docs.joomla.org/Creating_a_basic_Joomla!_template et la partie “Main body”).

      Désolé d’avoir été peut-être incompréhensible, mais l’auteur a cependant du comprendre ce que je voulais dire !

  2. Bonjour,
    J’essaie de créer un site joomla en ligne, j’ai déjà créer le répertoire de mon template et tous les fichiers et répertoire qu’il doit contenir, j’y ai inséré le code cité dans le tuto, modifié le nom du template dans le fichier .xml… Compresser le répertoire du template et installé dans joomla. Je l’ai aussi désigné par defaut. Seulement lorsque je prévisualise mon site je n’ai rien d’autre qu’une page blanche et cela même après avoir insérer la div container et la div header ainsi que leurs propriétés css.
    Que dois je faire ?

    1. Bonjour, c’est parce que les guillements ne sont pas bons dans son code c’est des guillements italiques alors qu’il faut des ” normaux.

      Merci Maniac pour tes explications :-)

  3. Bonjour,
    J’avais trouvé la solution il s’agissait bien des guillemets mais merci quand même Loran. Alors autre soucis maintenant, j’ai créé mon template joomla sur la base d’une maquette Photoshop en 1024 x 768px, comment puis-je faire pour que mon template s’adapte au contenu de mon site ?

  4. Bonjour, je n’arrive pas à afficher mon template après l’avoir installé sur joomla. Le template m’affiche un bout de page de la page d’acceuil actuel de mon site. J’ai corrigé les guillemets, mai je ne comprends pas le début du tuto. Doit on créer les dossiers nous même avec component.php et style.css (vide)? Comment fait on pour retoucher la feuille index par exemple puis pour la revisualiser directement sous joomla? Car moi a chaque fois je la modifie et je rearchive/reinstall.

    Merci d’avance pour votre aide!!!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>