Joomla! Documentation™

Introduction

Les templates enfants utilisent tous les fichiers de leurs templates parents, à l'exception de tout fichier portant le même nom que vous placez dans le templates enfant. Les fichiers de template enfant ne sont pas affectés par les mises à jour de Joomla. Ainsi, vous pouvez placer votre propre fichier index.php dans un template enfant et lui faire délivrer quelque chose de tout à fait différent du template par défaut, comme des positions de module supplémentaires ou des remplacements d'extensions alternatifs.

Un exemple de scénario : supposez que vous voulez que certaines de vos pages apparaissent avec un thème bleu, les couleurs par défaut de Cassiopeia, et que d'autres pages apparaissent avec un thème vert. Une façon simple de le faire est d'utiliser un template enfant qui utilise sa propre feuille de style user.css.

Exemple de travail

À partir de Système → Panneau des Templates → Templates de site :

• Sélectionnez Détails et fichiers de Cassiopeia.
• Sélectionnez le bouton Créer un template enfant.
• Remplissez la boîte de dialogue pop-up du template enfant et sélectionnez le bouton Créer un template enfant :

La sélection de Cassiopeia - Default dans le champ Styles de template supplémentaires semble inutile (est-ce un bug ?).

• Sélectionnez Fermer dans la barre d'outils pour fermer le formulaire du template parent.
• Sélectionnez le nouveau template , Détails et fichiers de Cassiopeia_green, dans la liste des template .

À ce stade, il y a une structure de dossier mais seulement un fichier : templateDetails.xml. Ce fichier peut être modifié si vous souhaitez changer des aspects de la configuration du template, par exemple les positions de template à ajouter ou à supprimer.

Créer un fichier user.css

• Sélectionnez le bouton Nouveau fichier dans la barre d'outils.
• Dans le formulaire Créer ou télécharger un nouveau fichier, assurez-vous de sélectionner le dossier css.
• Remplissez le nom de fichier avec user. Ne PAS ajouter de suffixe !
• Sélectionnez le type de fichier .css.
• Sélectionnez le bouton Créer.

Le fichier user.css est vide, prêt pour vous à entrer quelques styles personnalisés. Entrez ce qui suit pour démarrer le thème vert :

.container-header {
  background-color: darkgreen;
  background-image: none;
}
h1, h2, h3, h4, h5, h6 {
  color: darkgreen;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: darkgreen;
}
a, a:hover, a:focus {
  color: darkgreen;
}
.btn-info {
	background-color: darkgreen;
	border-color: #30638d;
	color: #fff;
}
.btn-primary, .btn-primary:focus, .btn-primary:hover {
	background-color: darkgreen;
	border-color: var(--cassiopeia-color-hover);
}

.btn-check:focus + .btn-info, .btn-info:focus, .btn-info:hover {
	background-color: darkgreen;
	border-color: #264f71;
	color: #fff;
}

Vous devrez peut-être revenir à ce fichier user.css pour ajouter plus de styles plus tard.

• Sélectionnez Enregistrer et fermer ou séparément, Enregistrer puis Fermer le fichier.
• Sélectionnez Fermer pour fermer le formulaire personnalisé.

Lien de menu

À ce stade, un lien de menu est nécessaire pour utiliser le template enfant. Une nouvelle installation de Joomla 4 a le Menu principal dans la position de la barre latérale droite avec un élément dedans. Cela semble être un bon endroit pour un nouveau lien de menu.

• Sélectionnez Menus → Menu principal dans le menu de l'administrateur.
• Sélectionnez le bouton Nouveau dans la barre d'outils.
• Entrez un titre approprié, Articles en vedette en vert semble approprié dans ce cas.
• Sélectionnez le bouton Type lien de menu → Sélectionner.
• Sélectionnez un lien de menu dans la boîte de dialogue pop-up lien de menu - Articles en vedette dans cet exemple.
• Sélectionnez cassiopeia_manual - Défaut dans le champ de formulaire Style de Template.

Dans le but de la capture d'écran suivante, la disposition du blog a été réglée sur Articles principaux : 0, Articles d'introduction : 3 et Direction multi-colonne : En travers.

Vue du site

• Sur la page d'accueil de votre site, sélectionnez le nouveau lien de menu créé.

Modifier le style

• Sélectionnez Système → Panneau des Templates → Styles de Template de site dans le menu d'administration.
• Sélectionnez Cassiopeia_green - par défaut dans la liste des styles.
• Changez le nom du style en Cassiopeia Green. Cela ne fait que nettoyer le nom tel qu'il apparaît dans les listes.
• Sélectionnez Enregistrer et fermer.