Personnalisation de Cassiopeia

Introduction

Cassiopeia est le template de site fourni avec Joomla 4 et les versions supérieures. C'est un excellent template polyvalent, accessible et adaptatif (responsive). Il peut être personnalisé via les paramètres du template et le fichier user.css par des utilisateurs ayant quelques connaissances en HTML et CSS.

L'illustration suivante montre l'apparence d'un site Joomla 4 avec un article et quelques liens de menu créés.

Templates : Modifier le style

Vous pouvez expérimenter l'apparence du site en ouvrant le formulaire Modifier le style. Allez dans Système → Templates → Styles de template de site et sélectionnez le titre du template dans la colonne Style, Cassiopeia - Par défaut. L'onglet Avancé contient des paramètres que vous pouvez ajuster :

Pour essayer les paramètres, ouvrez un onglet ou une fenêtre de navigateur avec l'interface d'Administration et un second onglet ou fenêtre avec l'interface du Site, et basculez entre les deux après chaque modification enregistrée.

Marque

• Oui le réglage par défaut. La barre de logo Cassiopeia contenant un logo ou un nom de marque est affichée avec un fond sombre, bleu par défaut.
• Non La barre de logo n'est pas affichée. Les paramètres permettant de sélectionner un logo, un titre et un slogan disparaissent.

L'image de marque par défaut est le mot Cassiopeia sous forme d'image dans un fichier SVG. C'est ce qui est affiché dans la première illustration ci-dessus.

Vous pourriez régler Marque sur Non si vous souhaitez fournir une identité visuelle dans un module HTML personnalisé.

Logo

• Aucun Le logo image par défaut de Cassiopeia sera utilisé sauf si un titre est défini.
• Image du logo Le logo sélectionné apparaîtra à la place du logo Cassiopeia même si un titre est défini.

Titre (alternative au logo)

• Nom de ma marque S'il est présent et que vous n'avez pas sélectionné d'image de logo, les mots du champ Titre apparaîtront mais soulignés dans la barre supérieure bleue.

Slogan

• Toujours à votre service S'il est présent, le texte du champ slogan apparaîtra dans une petite taille de police sous l'image du logo ou le nom de la marque.

Jeu de polices

• Aucun le réglage par défaut. La famille de polices spécifiée dans la feuille de style du template est utilisée, ce qui signifie généralement que le site utilisera les polices familières disponibles sur votre propre ordinateur.
• Autres Une famille de polices située dans la hiérarchie des dossiers du template ou téléchargée depuis le web sera utilisée. Vous pouvez voir l'apparence modifiée du texte sur une page en rechargeant le site après avoir changé ce paramètre.

Thème de couleur

• Standard Une couleur de fond bleu foncé pour la barre de marque et d'autres éléments tels que le bouton de connexion.
• Alternatif Une couleur de fond bordeaux à la place du bleu foncé.

Mise en page

• Statique le réglage par défaut. La largeur maximale est fixée à 1320px. Sur les écrans plus larges, la marge s'élargit simplement.
• Fluide Il n'y a pas de largeur maximale.

La vue sur un appareil mobile à écran étroit :

En-tête collante

• Non la valeur par défaut. Les éléments de l'en-tête et le contenu défilent vers le haut en sortant de la zone visible.
• Oui Sauf sur les écrans étroits, les éléments de l'en-tête restent fixés en haut de la zone visible pendant que les éléments de contenu défilent vers le haut. Cela n'est visible que lorsque le contenu de la page est plus haut que la zone visible.

Lien de retour en haut de page

• Non la valeur par défaut. Il n'y a pas de lien de retour en haut de page.
• Oui Lorsque le contenu est plus haut que la zone visible, un bouton marqué d'un chevron vers le haut apparaît en bas à droite de la page. Le sélectionner pour revenir en haut de la page.

Positions du template Cassiopeia

Lorsque vous construisez un site avec Cassiopeia, il devient très utile de connaître les emplacements des positions que vous pouvez utiliser pour les modules. Certaines sont descriptives, comme menu et bottom-a, mais il n'est pas évident de savoir où elles se trouvent tant qu'on ne les a pas utilisées. Cette illustration devrait aider :

Essayez ce qui suit :

Déplacer le module Menu vers la position menu

Un site Joomla 4 nouvellement installé a un menu dans la position sidebar-right, visible sur la première illustration ci-dessus. Pour ce tutoriel, des liens de menu ont été ajoutés, dont l'un est un parent avec deux liens enfants. Pour déplacer ce menu vers la position menu, aller dans Contenu → Modules 'Site' (frontal) dans le menu d'Administration. Dans la liste, il y a trois modules dont le Menu principal. Le sélectionner pour ouvrir le formulaire d'édition Modules : Menu.

Dans l'onglet Module, changer le champ Position à droite pour Menu [menu]. Enregistrer et observer le résultat dans l'affichage du site. Le menu semble correct mais les liens enfants ne sont pas présents.

Dans le formulaire d'édition du menu, sélectionner l'onglet Avancé et faire défiler jusqu'au champ Disposition. C'est une liste déroulante avec quatre options. --Du module-- / Par défaut est sélectionné par défaut. Essayer les autres options et observer le résultat. (Se rappeler d'Enregistrer dans le formulaire d'édition et de recharger la vue du site.) Aucune des options --Du module-- n'affiche les liens de menu enfants, mais les deux options --Du template Cassiopeia-- le font.

Alors quelle différence fait Repliable ?

• Menu déroulant repliable : sur les écrans étroits des appareils mobiles, le menu se replie en une icône hamburger jusqu'à sa sélection. Lors de la sélection, il se déploie pour afficher une liste verticale.
• Menu déroulant : le menu apparaît toujours sous forme de liste verticale.

Déplacer le module Menu vers la position topbar

Dans l'onglet Module du formulaire de modification, définir la Position sur Barre supérieure [topbar] et observer le résultat. Il y a un inconvénient - le menu est positionné plus à gauche que lorsqu'il était dans la position menu. Cela s'explique par le fait que la position menu et l'emplacement du logo ont une classe CSS grid-child, mais pas la topbar. Cela peut être corrigé par une entrée dans le fichier user.css, qui sera abordée plus loin.

Personnaliser Cassiopeia

Que faire si la couleur de fond bleu foncé de l'en-tête ne vous convient pas ? Supposons que vous préfériez un thème vert foncé. Pour cela, il vous faut un peu de connaissances en CSS. Aller dans Système → Templates de site → Détails et fichiers de Cassiopeia pour ouvrir le formulaire Template : Personnaliser (Cassiopeia).

L'illustration ci-dessous montre deux groupes de dossiers. Le premier groupe est constitué des dossiers et fichiers du template que vous ne devez pas modifier mais auxquels vous pouvez ajouter des éléments. En particulier, vous pouvez ajouter des fichiers HTML de surcharge de template dans le dossier html. Le second groupe contient les fichiers multimédia du template que vous ne devez pas modifier. Cependant, vous pouvez ajouter un fichier user.css dans le dossier css et/ou un fichier user.js dans le dossier js. Vous procéderiez ainsi si vous souhaitiez apporter quelques modifications simples à l'apparence du site.

Notez qu'il n'y a pas de fichier user.css présent dans le dossier css. C'est un fichier que vous créez vous-même afin de pouvoir surcharger les styles précédemment définis. S'il n'est pas présent, créez-le maintenant en sélectionnant le dossier css puis le bouton Nouveau. Dans la fenêtre modale Nouveau fichier, sélectionner le dossier css, sinon le nouveau fichier apparaîtra au mauvais endroit. Saisir user (en minuscule et sans .css) dans le champ Nom du fichier et sélectionner .css dans le champ Type de fichier. Sélectionner le bouton Créer pour créer le fichier. Si user.css est déjà présent, le sélectionner pour ouvrir le formulaire de modification.

Titres

Pour commencer simplement, changez la couleur des titres en vert foncé. Les titres sont des balises comprises entre h1, h2, h3, h4, h5 et h6. Dans le fichier user.css, saisir la définition de style :

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

Enregistrer et recharger le site pour voir le résultat. Le titre de la page ou de l'article devrait être vert foncé. Si ce n'est pas le cas, vérifiez ce que vous avez saisi. La langue officielle de la documentation Joomla est l'anglais britannique, donc colour plutôt que color comme en anglais américain. Mais en CSS, il faut écrire color. La ponctuation est-elle correcte ?

Ce qui est moins évident, c'est que certaines balises autres que les titres peuvent être stylisées pour ressembler à des titres. Ajoutez donc ceci :

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

Notez ici que le point (.) en début de ligne est un sélecteur de classe, par exemple Dummy H1 - il y a donc un point dans le fichier CSS mais pas dans le nom de la classe.

Fond de l'en-tête

Dans l'onglet du navigateur contenant le site, ouvrez les outils de développement de votre navigateur, Firefox dans cet exemple, et sélectionnez la balise header.

Cela montre les styles utilisés. Le style container-header est l'endroit où sont définis background-color et background-image. Ils doivent être surchargés dans le fichier user.css. Essayez ceci :

    .container-header {
      background-color: darkgreen;
      background-image: none;
    }

Style de la topbar

Vous souvenez-vous de cette remarque sur le menu trop à gauche dans la topbar ? Cela est dû au fait qu'il n'a pas de largeur maximale ni de marges appropriées définies. Placez ceci dans le fichier user.css pour corriger cela :

    .container-topbar {
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
    }

Voici le thème vert fonctionnel :

Accessibilité

Notez qu'il doit y avoir un contraste suffisant entre les couleurs de fond et de premier plan pour répondre aux normes d'accessibilité web. Vous pouvez vérifier votre contraste avec le WebAIM Contrast Checker. Le vert foncé est #006400.

Surcharges

L'onglet Créer des surcharges du formulaire Templates : Personnaliser (Cassiopeia) affiche la liste des extensions pour lesquelles vous pouvez créer une surcharge. Notez les différents symboles : sélectionnez un symbole de dossier pour afficher la liste des dossiers et fichiers qu'il contient ; sélectionnez un symbole multi-fichiers pour créer immédiatement une surcharge pour cette extension - l'élément créé disparaît de la liste - sélectionnez l'onglet Éditeur et repérez la surcharge créée dans le dossier html. Il se peut que plusieurs fichiers soient créés - les fichiers créés sont copiés depuis l'extension d'origine, prêts à être modifiés. Pour cela, vous devez connaître un peu de HTML et de PHP !

Voici l'onglet Créer des surcharges :

Si vous faites simplement des essais et ne souhaitez pas réellement créer de surcharge, vous pouvez Fermer le formulaire d'édition, sélectionner le bouton Gérer les dossiers dans la barre d'outils, puis sélectionner le bouton Supprimer en bas du formulaire modal Gérer les dossiers.

Les surcharges concernent surtout la personnalisation des extensions plutôt que celle du template Cassiopeia, et c'est une autre histoire.

Templates enfants

Si vous souhaitez apporter des modifications plus importantes à l'apparence du site, vous pouvez créer un template enfant. Celui-ci ne copie qu'une petite sélection de dossiers et de fichiers à modifier ou à compléter, tout en continuant par ailleurs à utiliser les dossiers et fichiers du template parent. En utilisant des templates enfants, vous pourriez avoir certaines pages avec une couleur de thème et d'autres pages avec une deuxième couleur de thème. Les templates enfants sont traités ailleurs. Voici une illustration de la structure de fichiers d'un enfant de Cassiopeia :