Le template enfant utilise tous les fichiers de leurs templates parents, sauf ceux que l'on met dans le dossier template enfant. Les mises à jour ne l'affecteront pas et il pourra être mis à jour assez facilement.

Le template enfant utilise tous les fichiers de leurs templates parents, sauf ceux que l'on met dans le dossier template enfant. Les mises à jour ne l'affecteront pas et il pourra être mis à jour assez facilement, via l'admin.

Pourquoi utiliser un template enfant au lieu d'un autre template ?

Souvent, quand on fait un autre template, on ne remet jamais à jour le template par rapport aux mises à jour de Joomla. Le fait de garder le template d'origine et de lui mettre un template enfant. On bénéficiera des mises à jour régulières du template avec les mises à jour de Joomla.

Il faut savoir que seul le template parent sera mis à jour. Le template enfant ne sera pas mis à jour.

Mais quand des pages du template parent qui sont utilisées dans le template enfant doivent être modifiées, vous serez prévenu. Le site retrouvera des bouts de code à modifier et vous proposera des changements.


PS : pas d'exemple pour mieux l'expliquer. Car il n'y a pas de modification de template pour l'instant de Cassiopeia. Mais il y en a eu au début de Joomla 5, et c'était assez facile à faire, les changements dans le template enfant.



Comment créer un template parent de Cassiopeia



1 – Il faut aller dans "Système" -> "Templates du site" -> "Cassiopeia".


2 – Cliquer sur le bouton "Créer un template enfant", en haut de la page.
Puis indiquer le nom du template enfant. Et cliquer sur "Créer un template enfant".





3 – Vous êtes toujours dans le dossier de Cassiopeia, donc sortez. Là, on voit dans Templates (site) qu'il y a maintenant un template enfant de Cassiopeia.
En allant dedans, on peut voir qu'il n'y a qu'un fichier qui est "templateDetails.xml".


template enfant 2


4 – Allez dans "Système" -> "Styles des templates du site". Valider le template enfant, comme par défaut.


template enfant 3


5 – Plus qu'à créer vos fichiers, ou copier-coller les fichiers du dossier parent et les mettre dans ce dossier enfant pour pouvoir les modifier.

Le fait de pouvoir modifier les fichiers directement via l'admin est pratique et rapide. MAIS attention, car pas de bouton retour en arrière. Donc pensez bien à faire des sauvegardes.


*********************************************************************

Exemple : modifier le CSS du site grâce au template enfant.

Il existe 2 solutions :

– soit prendre le fichier CSS du dossier parent pour le mettre dans le dossier enfant.

– soit faire un fichier CSS et rajouter le lien sur le template.

J'ai utilisé ces 2 méthodes. La 1re méthode sur mon site KlondikeAstuces.com, car le design est très différent de Cassiopeia. La 2ᵉ méthode sur Code Série Gratuit.fr, car le design était assez basique.

Pour la 1ʳᵉ méthode : prendre le fichier CSS du dossier parent pour le mettre dans le dossier enfant.


2 méthodes possibles :


– En passant par le FTP : Allez dans le template parent pour copier le fichier CSS et le coller dans le template enfant. Après, on peut aller dans l'admin, pour modifier le fichier CSS du template enfant.


– En passant par l'admin :

— Soit vous avez le fichier CSS : Allez dans le template enfant, cliquez sur créer un "nouveau fichier". Envoyez le fichier, en cliquant bien sur le dossier CSS pour être sûr de l'envoyer au bon endroit. Après, plus qu'à modifier le fichier du template enfant.



– Soit vous n'avez pas le fichier : Allez dans le dossier css du template, copiez tout le dossier (clic droit "tout sélectionner", puis copier). Allez dans le template enfant, pour créer un "nouveau fichier". Mettez exactement le même nom dans le dossier css. Puis copier ce qui était dans le template parent. Après, plus qu'à modifier le fichier du template enfant.


Exemple : pour le fichier template.min.css. Notez le nom de fichier template.min et le type de fichier .css. N'oubliez pas de cliquer sur le dossier CSS à gauche, sinon il ira à la racine du template.


template enfant



Note : le fichier principal CSS à modifier est template.min.css, qui se trouve dans /media/templates/site/*nom du template*/css.


Pour la 2ᵉ méthode : faire un fichier CSS et rajouter le lien dans index.php.

1 – Dans le template enfant, créer un fichier css, dans le dossier css du template enfant. Attention, à mettre un nom qui n'existe pas dans le dossier parent. Dedans, vous pouvez y mettre tous les codes que vous voulez rajouter.


Exemple : pour le fichier css.css sur un de mes sites.

template enfant


2 – Pour qu'il soit lu, il faut l'indiquer sur le template. J'ai choisi de rajouter le lien entre les head dans le fichier index. Pour cela, il faudra donc copier la page index du dossier parent pour la mettre dans le dossier enfant (pour copier-coller le fichier, voir la méthode 1, ci-dessus).

Exemple : j'ai rajouté la ligne "<link href="/media/templates/site/cassiopeia_csg/css/css.css" rel="stylesheet">" entre les head dans mon fichier index.php.

template enfant 6