Templates enfants

Introduction

Les templates enfants utilisent tous les fichiers de leur template parent, sauf les fichiers de même nom que vous placez dans le template enfant. Les fichiers du template enfant ne sont pas affectés par les mises à jour de Joomla. Vous pourriez ainsi 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 modules supplémentaires ou des surcharges d'extensions alternatives.

Un exemple de scénario : supposons que vous souhaitiez 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. Un moyen simple d'y parvenir est d'utiliser un template enfant qui utilise sa propre feuille de style user.css,

Exemple pratique

Créer un Template Enfant

En partant de Système → Panneau Templates → Templates du Site

• Sélectionner Détails et fichiers de Cassiopeia.
• Sélectionner le bouton Créer un Template Enfant.
• Remplir le formulaire et sélectionner le bouton Créer un Template Enfant :
  • Nom : Green
  • Styles de template supplémentaires : Laisser vide.

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

À ce stade, il existe une structure de dossiers mais un seul fichier : templateDetails.xml. Ce fichier peut être modifié si vous souhaitez changer certains aspects de la configuration du template, par exemple ajouter ou supprimer des positions de template.

Créer un fichier user.css

• Sélectionner le bouton Nouveau fichier dans la barre d'outils.
• Dans le formulaire Créer ou envoyer un nouveau fichier, veillez à sélectionner le dossier css
• Remplir le nom de fichier avec user. N'ajoutez PAS de suffixe !
• Sélectionner le type de fichier .css.
• Sélectionner le bouton Créer.

Le fichier user.css est vide, prêt à recevoir vos styles personnalisés. Saisissez 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;
    }

Il peut être nécessaire de revenir à ce fichier user.css pour ajouter d'autres styles ultérieurement.

• Sélectionner Enregistrer & Fermer.
• Sélectionner Fermer pour fermer le formulaire de personnalisation.

Ajouter un Lien de menu utilisant le Template Enfant

À ce stade, il faut créer un lien de menu pour utiliser le Template Enfant. Une nouvelle installation de Joomla possède le menu principal dans la position de la colonne de droite, avec un lien dedans. Cela semble être un bon endroit pour un nouveau lien de menu.

• Sélectionner Menus → Menu Principal depuis le menu de l'Administration.
• Sélectionner le bouton Nouveau de la barre d'outils.
• Saisir un titre approprié, Green Featured Articles semble adapté dans ce cas.
• Sélectionner le bouton Type de lien de menu → Sélectionner.
• Sélectionner un type de lien de menu dans la fenêtre modale Type de lien de menu - Articles à la une dans cet exemple.
• Sélectionner cassiopeia_green - Par Défaut dans le champ de formulaire Style du template.

Vue du Site

• Dans la page d'accueil de votre site, sélectionner le lien de menu nouvellement créé.

Modifier le Style

• Sélectionner Système → Panneau Templates → Styles de Templates du Site depuis le menu de l'Administration.
• Sélectionner Cassiopeia_green - Par Défaut dans la liste des styles.
• Changer le nom du style en Cassiopeia Green. Cela permet simplement d'ordonner le nom tel qu'il apparaît dans les listes.
• Sélectionner Enregistrer et fermer.