Notions de base sur les templates

Introduction

Dans Joomla!, un template est un ensemble de fichiers qui définissent ensemble l'apparence du site. Joomla propose deux templates : Atum est le template d'Administration utilisé pour la gestion du site ; et Cassiopeia est le template du Site utilisé par les visiteurs du site. De nombreux autres templates de site sont disponibles auprès de fournisseurs indépendants, gratuitement ou moyennant un coût modeste. Il existe en effet toute une industrie basée sur la fourniture de templates de site spécialisés.

Un template de site typique contient des fichiers PHP pour mettre en page le contenu et des fichiers CSS pour styliser le contenu. Il y a souvent des fichiers supplémentaires tels que des images utilisées dans la mise en page et des fichiers JavaScript utilisés pour interagir avec les fonctionnalités du site telles que les liens et les boutons. La capture d'écran suivante montre les dossiers et fichiers du template Cassiopeia dans une nouvelle installation de Joomla :

Notez que les fichiers php se trouvent dans le dossier /templates du site et que les fichiers multimédias se trouvent dans le dossier /media du site.

Positions du template

Le template du site définit les positions du contenu principal, par exemple un article individuel ou une mise en page de blog d'articles épinglés, et de tous les modules à afficher au-dessus, en dessous, à gauche ou à droite du contenu principal. L'illustration suivante montre les positions disponibles dans Cassiopeia :

Vous pouvez également voir les positions du template dans n'importe quel template en réglant Prévisualiser les positions des modules sur Activé dans le formulaire Template : Paramètres, puis en ajoutant ?tp=1 à l'url. Si une chaîne de requête est déjà ajoutée à l'url, ajoutez plutôt &tp=1.

Style utilisateur

Cassiopeia dispose de quelques paramètres que vous pouvez modifier pour changer l'apparence du site (il existe un article séparé sur la personnalisation de Cassiopeia). Cela peut ne pas suffire à vos besoins. Vous pouvez apporter vos propres modifications à l'apparence avec une feuille de style user.css. Vous devez la créer vous-même dans le formulaire Templates : Personnaliser. Sélectionnez simplement Nouveau fichier et saisissez Nom de fichier : user, sélectionnez Type de fichier : .css, et sélectionnez css dans la liste des dossiers. Ensuite, sélectionnez le fichier user.css nouvellement créé dans le formulaire Modifier et saisissez quelques styles, par exemple, pour rendre les titres vert foncé :

    h1, h2, h3, h4, h5, h6 {
      color: darkgreen;
    }

Surcharges de template

En plus de la mise en page globale définie par le template du site, chaque composant ou module dispose d'un template pour définir son apparence au sein de la mise en page globale. Ces templates se trouvent dans un dossier tmpl au sein du composant ou du module. Certains plugins disposent également de templates. Et il existe des mises en page qui peuvent être appelées depuis n'importe quel type d'extension.

Parfois, l'un de ces templates d'extension ne vous convient pas tout à fait. Dans ce cas, vous pouvez créer une surcharge de template. Il s'agit d'une copie du code utilisé pour générer la mise en page de l'extension, que vous pouvez modifier selon vos propres besoins. La capture d'écran suivante montre le formulaire Template : Personnaliser Créer des surcharges :

Cassiopeia dispose déjà de certaines surcharges installées. Cela peut sembler poser problème. Si vous modifiez l'un des fichiers par défaut de Cassiopeia, vos modifications seront écrasées (donc perdues) lors de la prochaine mise à jour de Joomla!. La solution consiste à utiliser des templates enfants.

Affichages alternatifs

Un template, ou une surcharge de template, définit l'apparence d'une extension dans un fichier spécifique, tel que default.php. Dans certains cas, vous pouvez souhaiter choisir entre la mise en page par défaut et une mise en page alternative. Par exemple, un menu en position supérieure a généralement besoin d'une mise en page différente du même menu en position latérale. Dans un module de menu, un paramètre Mise en page se trouve dans l'onglet Avancé du formulaire d'édition du module, qui permet de sélectionner parmi les mises en page alternatives disponibles. Il existe un tutoriel distinct sur les mises en page alternatives de template.

Templates enfants

Un template enfant utilise les fichiers de son template parent, à l'exception de tout fichier présent dans le template enfant. Par exemple, vous pourriez avoir des fichiers user.css différents dans le parent et l'enfant, afin que différentes pages puissent avoir des jeux de couleurs différents. Vous pourriez également copier le fichier index.php du parent vers l'enfant et modifier ce dernier pour produire une mise en page différente de celle du parent. Il existe un tutoriel distinct sur les templates enfants.