Joomla 4 - Modèle Cassiopeia - un tas de trucs et astuces

Détails
Catégorie : Documents
Également disponible : English (United Kingdom)

Dans cet article, Marc Dechèvre présentera une collection de trucs et astuces liés au template frontal par défaut de Joomla 4 : Cassiopeia.

0. Préambule

0.1. Trop paresseux pour lire ? Regardez (la plupart de) cet article en vidéo

Cet article est une version améliorée de ce qui a été présenté en direct au Joomla User Group New Jersey le 20 janvier 2022.

N'hésitez pas à regarder la vidéo .

0.2. N'oubliez pas : les modèles de dossiers multimédias viennent d'être déplacés avec J !4.1

Comme vous le savez peut-être, avec l'introduction des modèles enfants dans J4.1, le chemin d'accès aux "dossiers de médias de modèles" ( css, images, jset scss) changements

  • à partir de templates/cassiopeia/en J!4.0
  • pour media/templates/site/cassiopeia/en J!4.1+

pour Cassiopeia (et de même pour tous les Templates qui sont/seront compatibles avec les Child Templates).

Bon à savoir : si vous avez créé par exemple un templates/cassiopeia/css/user.cssdans J4.0, une fois que vous mettez à jour vers 4.1, le fichier sera automatiquement déplacé vers media/templates/site/cassiopeia/css/user.css.

Vous n'avez donc pas à vous en soucier, Joomla (Dimitris Grammatikogiannis dans le cas présent) vous couvre ?

1. Ressources

"Debout sur les épaules de géants"

Le but de cette session est d' essayer de donner des trucs et astuces sur Cassiopée qui ne sont pas déjà là .

Mais que se passe-t-il s'il est là-bas et que vous l'avez manqué?

J'aime toujours rassembler toutes les sources disponibles sur un sujet, que ce soit Custom Fields… ou Cassiopeia ?

Voici donc tout ce que je sais ( et n'hésitez pas à me recontacter si j'en ai oublié ):

2. Raisons d'aimer Cassiopée

Il existe de nombreuses bonnes raisons de s'en tenir au modèle natif Cassiopée

  • il est accessible (autant que je sache, ce n'est pas le cas pour les modèles/frameworks classiques)
  • il est de par sa conception super performant (j'ai été surpris d'obtenir 97% sur un Lighthouse/GTMetrix pour un vrai site Web avant même de faire l'optimisation la plus basique comme activer gzip)
  • il utilise les dernières techniques (CSS Grid, CSS Variables, vanilla javascript au lieu de frameworks, …)
    et les derniers outils (Bootstrap5, Font Awesome 5, …)
  • de nouvelles fonctionnalités sont régulièrement ajoutées, comme celles qui accompagnent J4.1 (note : J4.1 RC est sorti le 18 janvier 2022 : https://github.com/joomla/joomla-cms/releases )
    • Modèles enfants
    • Icônes des éléments de menu

Bien sûr, vous pouvez également avoir vos propres (bonnes) raisons d'utiliser un autre modèle/framework.

Mais Cassiopeia est clairement une excellente option pour Joomla 4 (alors que pour Joomla 3, je n'ai jamais envisagé d'utiliser Protostar pour créer un site Web, sauf à test )

3. Première impression de Cassiopée

La première fois que j'ai vu les options du modèle Cassiopeia, j'ai pensé "oh nooon, si peu d'options".

Mais en fait, comme nous le voyons dans cette présentation et dans les autres ressources mentionnées, nous pouvons facilement compenser cela.

Au final, c'est même une bonne chose d'avoir un Template par défaut qui ne soit pas pléthorique car cela signifie

  • meilleure performance
  • plus de stabilité
  • et encore plus de créativité et de flexibilité puisque nous pouvons utiliser/(re)découvrir les fonctionnalités de base de Joomla pour le personnaliser en fonction de nos besoins individuels

4. Trucs et astuces autour de Cassiopée

4.1. Ignorer le favicon

Le chemin des favicons par défaut de Cassiopeia se trouve dans le <head>

<link href="/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
<link href="/media/system/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
<link href="/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">

Si vous souhaitez les remplacer, il vous suffit de créer un remplacement de ces icônes, par exemple

  • /templates/cassiopeia/images/joomla-favicon.svgpour J!4.0
  • /media/templates/site/cassiopeia/images/joomla-favicon.svgà partir de J!4.1

Remarque : la conversion en ligne d'une image en svg/ico est facile, il suffit de la rechercher sur Google

4.2. Polices

4.2.1. Ajouter des polices Google à votre modèle

  • Allez sur https://fonts.google.com/
  • Choisissez la police de votre choix
  • Adaptez simplement et ajoutez le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) : 
/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
body {
    font-family: 'Georama', sans-serif;
}

Source: https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

Remarque : cette méthode devrait être le dernier choix, elle nuit trop aux performances. Voir les options suivantes

4.2.2. Ajoutez Google Fonts localement à votre modèle

En raison des lois sur la confidentialité (comme le RGPD en Europe), vous n'êtes peut-être pas autorisé à appeler une distante (car cela permet au fournisseur de suivre vos visiteurs).

Aucun problème! Vous pouvez facilement télécharger les fichiers nécessaires et ajouter le CSS correspondant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0)

Voir https://google-webfonts-helper.herokuapp.com/fonts

Source : https://blog.astrid-guenther.de/en/cassiopeia-optionen/ > Schéma de polices

4.2.3. Ajoutez n'importe quelle police à votre modèle txs au modèle enfant

Remarque : cela nécessite J4.1+ car il utilise la nouvelle fonctionnalité appelée Child Template . Txs @dgrammatiko pour la fonctionnalité et le conseil !

  1. Créer un enfant et en faire la valeur par défaut
  2. Modifiez le templateDetails.xml de l'enfant et ajoutez une ligne supplémentaire (modifiez essentiellement les noms de police d'une option existante) dans le champ useFontScheme
  3. c'est tout

Voir les captures d'écran :

ajouterlocalfont1

ajouterlocalfont2

4.3. Couleurs

4.3.1. Changer le jeu de couleurs sur tout le site

Ajoutez le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

:root {
  --cassiopeia-color-primary: red;
  --cassiopeia-color-hover: green;
  --cassiopeia-color-link: blue;
}

Adaptez les couleurs bien sûr, ceci n'est qu'un exemple…

4.3.2. Changer le jeu de couleurs sur une page donnée

  • Allez dans Menu > [ votre menu ]
  • Cliquez sur l'élément de menu choisi
  • Sélectionnez l'onglet Affichage de la page
  • Dans l'option Page Class ajouter par exemple colors1
  • Ajoutez le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0)

Exemple de base : 

.colors1 {
  --website-color-1: #5e2688;
  --cassiopeia-color-primary: var(--website-color-1);
}

Exemple plus poussé permettant de jouer avec la transparence (RVBA) car ma variable initiale n'est pas directement exprimée en couleur, mais en valeur RVB (exemple : 37, 143, 167): 

.colors1 {
  --website-color-primary: 37, 143, 167;
  --website-color-hover: 242, 48, 48;
  --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);
  --cassiopeia-color-hover: rgb(var(--website-color-hover));
  --cassiopeia-color-link: rgb(var(--website-color-primary));
}

4.3.3. Ajouter un nouveau jeu de couleurs dans Cassiopeia

Remarque : nécessite Joomla 4.1+

Le modèle frontal par défaut de Joomla, Cassiopeia, est livré avec deux schémas de couleurs : standard et alternatif.

Si vous modifiez un jeu de couleurs, votre modification peut être perdue lors d'une prochaine mise à jour. Dans Joomla 4.1, vous avez maintenant la possibilité d'ajouter des schémas de couleurs supplémentaires :

Créez votre propre fichier CSS sur le media\site\templates\cassiopeia\css\globaldossier avec un nom comme custom_colors_orange.csset vous pouvez ensuite le sélectionner dans le modèle Cassiopée.

Pour plus d'informations, voir https://issues.joomla.org/tracker/joomla-cms/35917

4.3.4. Dark Mode

Il existe de nombreuses bonnes raisons d'avoir le mode sombre sur votre site Web.

Grâce au plugin gratuit Dark Magic de Nicholas Dionysopoulos, vous pouvez très facilement activer et personnaliser le mode sombre

  • sur le back-end (uniquement avec le modèle Atum par défaut)
  • sur le front-end (uniquement avec le modèle Cassiopeia par défaut)

Remarque : pour le moment, le README.md sur https://github.com/nikosdion/DarkMagic ne mentionne que Joomla 3. Mais en fait, le plugin a deux versions, une pour J3 et une pour J4. Cliquez simplement sur Releases dans la colonne de droite

  • v2.x est DarkMagic pour Joomla 4
  • v1.x est DarkMagic pour Joomla 3

Bien sûr, en particulier pour le front-end, vous souhaiterez probablement personnaliser davantage certaines couleurs. Bonne nouvelle : Cassiopeia fait un usage intensif de ce qu'on appelle communément les "Variables CSS" (le vrai nom est "Propriétés personnalisées"), ce qui facilite la personnalisation entre autres des couleurs : elles sont définies une seule fois et sont ensuite utilisées à plus de 100 endroits différents .

Voici un exemple de CSS que j'ai ajouté à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssen J4.0) afin de personnaliser davantage les couleurs du front-end en Dark Mode (pour avoir le header, les boutons, les liens etc avec les couleurs officielles du site) : 

:root {
    --website-color-1: #D95F69;
    --website-color-2: #F29544;
}
@media screen and (prefers-color-scheme: dark) { /* to override the Dark Mode Colors defined in the Dark Magic plugin */
    :root {
        --cassiopeia-color-primary: var(--website-color-1) !important;
        --cassiopeia-color-link: var(--website-color-1) !important;
        --cassiopeia-color-hover: var(--website-color-2) !important;
        --cassiopeia-color-gradient-end: var(--website-color-1) !important;
        --cassiopeia-color-gradient-start: var(--website-color-2) !important;
    }
    .btn-primary {
        background-color: var(--website-color-1) !important;
    }
    .btn-primary:focus, .btn-primary:hover {
        background-color: var(--website-color-2) !important;
    }
    .back-to-top-link {
        color: white !important;
    }
    #cf_1 { /* Convert Forms also uses CSS Variables */
        --background-color: rgba(0, 0, 0, 0.9) !important;
    }
}

4.4. Mise en page

4.4.1. Connaître toutes les positions possibles dans Cassiopée

La présentation la plus complète/précise de tous les postes disponibles que j'ai trouvés jusqu'à présent est la suivante. Txs à son auteur, Pedro Olaia, pour le partager.

Remarque : l'élément html et les classes à la position "MENU" changent en fonction du module à l'intérieur. Donc si le module est en fait le module de menu, ce sera : <nav class="navbar ...">et pas <div class="moduletable module">. Ainsi, certains éléments et classes html peuvent changer en fonction du module, des options sélectionnées et de la taille de la fenêtre

cassiopeia-positions

4.4.2. Comment avoir le Logo sur la même ligne que le Menu

Dans Système > Styles de modèle > Cassiopée > onglet Avancé > option Marque, si elle est définie sur Oui, vous pouvez soit

  • sélectionnez un logo
  • ou tapez un Titre (avec ou sans Slogan)

Cela fonctionne bien sûr, mais étant donné la mise en page de Cassiopée, ce logo ou ce titre se trouvent sur une ligne séparée avant la ligne d'en-tête contenant généralement le menu.

OK pourquoi pas. Il y a probablement une raison à cela que j'ignore mais ce n'est clairement pas la pratique sur 99,9% des sites.

Donc si vous voulez que votre Logo soit sur la même ligne que le Menu, vous pouvez simplement procéder comme suit :

  • Allez dans Contenu > Modules de site
  • Cliquez sur Nouveau
  • Sélectionnez un module de type Personnalisé (HTML)
  • Insérez-y simplement votre Logo (et si vous le souhaitez ajoutez un lien hypertexte vers la page d'accueil, à savoir "/")
  • Sélectionnez le poste Menu
  • Affectez le Module à Toutes les Pages (sauf si vous avez par exemple un logo différent selon la Langue)
  • sauvegarder

Créer le nouveau module approprié

  • Allez dans Contenu > Modules de site ou allez dans Système > Gérer > Modules de site (oui, 2 façons d'y arriver ?)
  • Cliquez sur le bouton Nouveau
  • Sélectionnez le module de type Footer (“Ce module affiche les informations de copyright de Joomla!”).
  • Donnez un titre
  • Sélectionnez le poste Footer
  • Si nécessaire, accédez à l'onglet Affectation du menu et personnalisez
  • sauvegarder

Voir le résultat sur le front-end

  • deux lignes de texte apparaissent dans le pied de page du site. La bonne chose est que l'année et le nom du site sont créés dynamiquement
  • le texte affiché est déterminé par les chaînes de langue natives de Joomla, à savoir
    • MOD_FOOTER_LINE1
      Copyright © %date% %sitename%. All Rights Reserved.
    • MOD_FOOTER_LINE2
      <a href="https://www.joomla.org">Joomla!</a> is Free Software released under the <a href="https://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License.</a>

Personnalisez ces deux chaînes de langue

  • Accédez à Système > Gérer > Remplacement de la langue
  • Sélectionnez la langue frontale de votre choix
  • Cliquez sur Nouveau
  • Recherchez la constante suivante : MOD_FOOTER_LINE1
  • Cliquez sur le résultat correspondant
  • Change the Text by what you want, for example: © %date% %sitename% | <a style="text-decoration: none;" href="/privacy">Privacy</a>
  • Do the equivalent for MOD_FOOTER_LINE1
  • If you have a multilingual website, repeat this for each Language

Si vous voulez avoir les deux textes sur la même ligne sur de grands écrans (ce qui est plus agréable je pense), ajoutez simplement le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  footer div.mod-footer {
    flex-direction: row;
  }
}

Ce n'est pas spécifique à Cassiopeia : ce Footer était déjà là depuis l'époque Mambo j'entends. Mais comme Cassiopeia n'a pas de dizaines/centaines d'options, c'est une façon très élégante d'obtenir un joli pied de page personnalisé.

4.4.4. Personnalisation de la disposition de la vue Blog

Au-delà des options classiques disponibles dans Joomla pour la vue Blog, Cassiopeia a quelques classes pratiques qui peuvent être définies dans l'élément de menu (de type vue Blog) > onglet Mise en page du blog > option Classe d'article :

  • en boîte
  • droit de l'image
  • image-gauche
  • image-alternate (en combinaison avec image-right ou image-left)
  • image-bottom

Pour plus d'informations, voir https://issues.joomla.org/tracker/joomla-cms/18319

D'autres Classes sont également disponibles dans Cassiopée qui permettent par exemple d'avoir un Agencement « Maçonnerie » :

  • colonnes-2
  • colonnes-3
  • colonnes-4
  • maçonnerie-2
  • maçonnerie-3
  • maçonnerie-4

Voir un exemple de masonry-3sur https://cassiopeia.joomla.com/sample-layouts/mansory-layout

Je ne suis pas trop sûr de l'utilisation de columns-Xcar il y a maintenant une Option #Colonnes (qui n'était pas là initialement dans les premières ébauches de J4)

4.4.5. Articles Images – Left, Center or Right

Joomla 4 a changé les options flottantes pour les images : il n'y a plus de boîte de sélection avec « droite », « gauche » ou « aucune », mais un champ pour insérer une classe CSS. Cassiopeia propose les classes « float-start » pour positionner l'image complète à gauche (à droite pour les langages rtl), « float-end » pour positionner l'image complète à droite (à gauche pour les langages rtl) et « float -none" pour ne pas flotter.

Bien sûr, il est également possible de modifier la position de l'image en utilisant ses propres classes CSS. Exemples:

  • float-start
  • float-end
  • float-centerqui serait alors votre propre définition CSS dans le /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans le fichier J4.0) : 
.float-center.item-image {
  text-align: center;
}

Vous pouvez utiliser les classes globalement pour tous les articles, allez dans Contenu -> Options -> Mise en page d'édition et entrez la classe que vous voulez dans le champ "Classe d'image en texte intégral".

Ou vous pouvez utiliser les classes sur chaque article individuel :

Source : Viviana on https://cassiopeia.joomla.com/help

4.4.6. Styles de module – carte ou noCard

  • Allez dans Module> [votre module]> onglet Avancé> option Style de module
  • Là, vous voyez que Cassiopeia est livré avec deux propres styles
    • carte
    • pas de carte

Bien sûr, vous avez toujours les styles de module Joomla standard, à savoir

  • html5
  • rien
  • contour
  • table

4.4.7. Changer la mise en page, c'est-à-dire déplacer les positions

Si vous inspectez un site Web à l'aide de Cassiopée, vous verrez le CSS suivant : 

@supports (display: grid) {
    .site-grid {
        grid-template-areas:
          ". banner banner banner banner ."
          ". top-a top-a top-a top-a ."
          ". top-b top-b top-b top-b ."
          ". comp comp comp comp ."
          ". side-r side-r side-r side-r ."
          ". side-l side-l side-l side-l ."
          ". bot-a bot-a bot-a bot-a ."
          ". bot-b bot-b bot-b bot-b .";
    }
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". banner banner banner banner ."
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-a bot-a ."
              ". bot-b bot-b bot-b bot-b ."
        }
    }
}

C'est la grille CSS. C'est très facile et très visuel comme vous pouvez le voir. Si vous ne connaissez pas ou peu CSS Grid, cela vaut vraiment la peine d'apprendre les bases par exemple sur https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

Donc, si vous souhaitez adapter la mise en page et avoir par exemple sur la vue du bureau

  • la position bannerjuste après la zone des composants
  • et les positions inférieures bot-aet bot-bsur la même ligne cinquante-cinquante

il suffit d'ajouter le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

@supports (display: grid) {
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-b bot-b ."
              ". banner banner banner banner ."
        }
    }
}

En d'autres termes, l'avantage d'avoir un modèle basé sur CSS Grid est que vous pouvez modifier la mise en page avec quelques lignes de CSS, sans avoir à éditer/remplacer/forker un fichier PHP.

4.4.8. Modification de la largeur des zones Gauche / Composant / Droite

4.4.8.1. Cas 1 - lorsque la mise en page de Cassiopée est définie sur Fluide

Ce qui détermine la largeur des colonnes dans ce cas est la ligne CSS suivante (étant CSS Grid) : 

body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] 100px [full-end]
}

Notez la partie au milieu, à savoir repeat(4,minmax(0,25%))Cela équivaut à minmax(0,25%) minmax(0,25%) minmax(0,25%) minmax(0,25%) :

  • La première minmax(0,25%)détermine la largeur de la position gauche
  • Le dernier minmax(0,25%)détermine la largeur de la position droite
  • Et les deux minmax(0,25%)au milieu faire les 50% consacrés à la zone Composant (étant par exemple l'Article sélectionné)

Ainsi, par exemple, si je veux réduire Gauche et Droite de 25% de largeur à 20%, j'ajouterais simplement le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%) [main-end] 100px [full-end]
}
4.4.8.2. Cas 2 - lorsque la mise en page de Cassiopeia est définie sur statique

Dans ce cas, pour un grand écran (rappel : Cassiopeia est Mobile First) ce qui détermine la largeur des colonnes est la ligne CSS suivante (toujours CSS Grid) : 

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end]
    }
  }
}

Notez la partie au milieu, à savoir repeat(4,minmax(0,19.875rem))(rem étant une unité relative) Cela équivaut à minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem) :

  • The first minmax(0,19.875rem)détermine la largeur de la position gauche
  • Le dernier minmax(0,19.875rem)détermine la largeur de la position droite
  • Et les deux minmax(0,19.875rem)au milieu faire les 50% consacrés à la zone Composant (étant par exemple l'Article sélectionné)

Ainsi, par exemple, si je veux réduire Gauche et Droite de 19.875rem à 9.875rem (tout en gardant la même largeur totale), j'ajouterais simplement le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,9.875rem) minmax(0,29.875rem) minmax(0,29.875rem) minmax(0,9.875rem) [main-end] minmax(0,1fr) [full-end]
    }
  }
}

Bien sûr je pourrais aussi très facilement changer la largeur totale en jouant avec la somme de 4*19.875rem

4.5. Bannière

4.5.1. Ajouter une bannière dans Cassiopeia

Voir "Ajouter un en-tête de site" sur https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

4.5.2. Comment personnaliser la hauteur du module de bannière

Adaptez simplement le CSS suivant à vos besoins et ajoutez-le à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

/* CLASSIC BANNER */
.container-banner .banner-overlay {
    height: max(300px, 50vh); /* by default is 50vh in Cassiopeia */
}
@media (min-width: 768px) {
    .container-banner .banner-overlay {
        height: max(300px, 45vh);
    }
}
@media (min-width: 992px) {
    .container-banner .banner-overlay {
        height: max(300px, 40vh);
    }
}
@media (min-width: 1200px) {
    .container-banner .banner-overlay {
        height: max(300px, 35vh);
    }
}

4.5.3. Comment ajouter une superposition au module de bannière

Adaptez simplement le CSS suivant à vos besoins et ajoutez-le à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

/* CLASSIC BANNER */
.container-banner .banner-overlay .overlay {
    background-image: linear-gradient(120deg, rgba(231, 48, 42, 0.7), rgba(234, 174, 2, 0.7));
}

4.5.4. Comment ajouter un module de bannière vidéo

Cassiopeia prévoit un module de bannière ayant une image d'arrière-plan, qui occupe environ 50 % de la hauteur de la fenêtre.

Pour un site que je voulais

  • avoir une vidéo en arrière-plan au lieu d'une image
  • la vidéo pour prendre exactement toute la hauteur du navigateur

Pour faire ça

  • créer un module HTML personnalisé de base sans modifier aucune des options
  • collez le code HTML suivant (à adapter bien sûr avec votre propre vidéo et image)
  • collez le CSS suivant dans /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0)

HTML : 

<div class="video-banner">
  <div class="text">
    <h1 class="display-4 text-thin">Title</h1>
    <p class="lead">Text</p>
    <p><a class="btn btn-primary btn-lg" href="#">Link</a></p>
  </div>
  <video poster="https://assets.codepen.io/6093409/river.jpg" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
   <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4" />
  </video>
</div>

CSS: 

/* VIDEO BANNER - see https://codepen.io/woluweb/pen/rNGROZj */
div.video-banner {
    display: grid;
    grid-template-areas: "hero";
    place-items: center;
    height: max(300px, calc(100vh - 152px)); /* viewport height minus the fixed height of menu header on current website, with a minimum of X pixels */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
div.video-banner > * {
    grid-area: hero; /* stacking all the child elements of the grid - could simply have set 1 / 1 / 2 / 2 instead of naming the area hero */
}
div.video-banner div.text {
    z-index: 1; /* to be sure that this is on top of the video */
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
}
div.video-banner div.overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--cassiopeia-color-link), var(--cassiopeia-color-hover));
    opacity: 0.7;
}
div.video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

4.6. Adding a custom Javascript

4.6.1. Option 1 – directly in user.js

  • Tout comme vous pouvez créer un fichier CSS personnalisé dans /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0)
  • Vous pouvez créer un fichier JS personnalisé dans /media/templates/site/cassiopeia/js/user.jsen J4.1+ (était /templates/cassiopeia/js/user.jsdans J4.0)

Tapez par exemple le code suivant dans user.jset vous aurez une popup apparaissant dans le front-end : 

alert( 'Hello, world!' );

4.6.2. Option 2 - utiliser un modèle enfant

Cela nécessite J4.1 (date de sortie : 15 février 2022)

Voir dans les Ressources les présentations faites par Dimitris.

  • Accédez à Système > Modèles de site > Détails et fichiers de Cassiopée
  • Cliquez sur le bouton Créer un modèle enfant
  • proche
  • Le modèle enfant est prêt
  • Il peut être vu à côté du modèle parent dans Système> Modèles de site
  • Vous pouvez le personnaliser (créez par exemple un fichier index.php à la racine basé sur celui d'origine mais où vous modifiez/ajoutez quelque chose)
  • Accédez à Système > Styles de modèles de site
  • Définissez le modèle enfant par défaut (ou ouvrez-le si vous souhaitez personnaliser les options et/ou les affectations de menu)

4.6.3. Option 3 – adding Options to Cassiopeia with a Child Template

By editing the Child Template XML file, you can easily add new Options to the Template (textarea, radio, …).

Ainsi, vous pouvez personnaliser index.php, obtenir ce paramètre et en faire quelque chose (comme ajouter un script dans la tête)

<?= $this->params->get('myJS'); ?>

4.6.4. Option 4 - utiliser une disposition alternative de module

En fait, avec n'importe quel modèle et avec n'importe quelle version de Joomla, vous pouvez également ajouter très facilement n'importe quel CSS ou JS (en ligne ou externe). L'idée est de créer un Module qui va injecter tout le CSS & JS grâce à une Alternate Layout (Override). L'avantage de cette technique : vous pouvez

  • utiliser toutes les Assignations possibles disponibles dans les Modules pour que le code ne soit pas chargé sur toutes les pages mais uniquement sur les pages où il est nécessaire
  • filtrer sur la langue
  • avoir une date de début/fin de publication
  • …

Voici la procédure

  • Créer un remplacement pour le module Custom HTML(notez que vous pouvez en fait utiliser n'importe quel autre type de module)
    • Accédez à Système > Modèles de site > [votre modèle] Détails et fichiers
    • Sélectionnez l'onglet Créer des remplacements
    • Cliquez sur mod_custom
    • Vous recevez le message de confirmation Override created in /templates/cassiopeia/html/mod_custom
  • Transformer le remplacement en une disposition alternative
    • Sélectionnez l'onglet Éditeur
    • Cliquez sur /templates/cassiopeia > html > mod_custom > default.php
    • Cliquez sur le bouton Renommer le fichier
    • Donnez un nom de votre choix, par exemple add-to-head.php
  • Modifier la mise en page alternative
  • Créer un module HTML personnalisé
    • Allez dans Contenu > Modules de site
    • Cliquez sur Nouveau
    • Sélectionnez Personnalisé
    • Sélectionnez l'onglet Avancé
    • Dans l'option Mise en page, sélectionnez la mise en page alternative que vous avez créée (dans ce cas add-to-head)

Exemple arbitraire de code pour notre mise en page alternative (ajout d'une animation pour .images, h2 et h3) : 

<?php
use Joomla\CMS\Factory;
defined('_JEXEC') or die;
$doc = Factory::getDocument();

// adding some css file - for pure css animation
// either via a local file (to be added manually)
// $doc->addStyleSheet("/templates/cassiopeia/css/animate.css", array('version'=>'auto'));
// either via a distant file - see https://cdnjs.com/libraries/animate.css
$doc->addStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css", [], ["integrity" => "sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==", "crossorigin" => "anonymous" , "referrerpolicy" => "no-referrer" ]);

// adding some script for animation using intersection-observer
// either via a local file (to be added manually)
// $doc->addScript('/templates/cassiopeia/js/animate.js', array('version'=>'auto'));
// either via an inline script
$myAnimation = <<<MYJS
document.addEventListener('DOMContentLoaded', function() {

    let observer = new IntersectionObserver(function (observables) {
      observables.forEach(function (observable) {
        // the element becomes visible
        if (observable.intersectionRatio > 0.5) {
          observable.target.classList.add('mytest')
          // observable.target.classList.remove('not-visible')
          observer.unobserve(observable.target)
        }
      })
    }, {
      threshold: [0.5]
    });

    // we observe the elements
    let items = document.querySelectorAll('.image, h2, h3')
    items.forEach(function (item) {
      observer.observe(item)
    })

});
MYJS;
// add the script
$doc->addScriptDeclaration($myAnimation);

avec l'ajout correspondant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) où toutes les animations seraient définies : 

h2.mytest, h3.mytest, p.mytest {
    animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
}

4.6.5. Option 5 – for Bootstrap 5

Context:

  • Joomla 4 ships with Bootstrap 5
  • But to make your websites a.o. more performant, BS5 Javascript is not loaded by default
  • Instead you can decide yourself in your child templates / overrides / alternate layouts to enable only what you need & where you need it

Supposons que vous ayez besoin d'utiliser des onglets dans un article donné. Copiez-collez le code HTML suivant (tiré des exemples sur https://getbootstrap.com/docs/5.0/components/navs-tabs/ ): 

<div class="bd-example">
  <nav>
    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
      <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
      <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    </div>
  </nav>
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
      <p><strong>Home text</p>
    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
      <p><strong>Profile text</p>
    </div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
      <p><strong>Contact text</p>
    </div>
  </div>
</div>

Voyez le résultat dans le front-end : les onglets apparaissent, mais cliquer sur le 2e ou le 3e onglet ne "fait" rien.

C'est parce que nous devons encore dire à Joomla de charger le Javascript pour les onglets, à savoir via 

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);

Vous pouvez facilement ajouter n'importe quel Bootstrap Javascript à Cassiopeia en suivant la documentation officielle :

https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

Si vous suivez "Approche 3 : Utilisation d'un remplacement de modèle", n'oubliez pas d'ajouter la classe de module bs-tabau module que vous créez, puis les onglets fonctionneront.

4.7. Menu

4.7.1. Comment utiliser le menu avec Cassiopeia dans Joomla 4

  • Menu vertical dans la barre latérale droite
  • Horizontal Menu
  • Déplacement du menu vers le pied de page

Voir https://ltheme.com/use-the-menu-with-cassiopeia/

4.7.2. Ajout d'une icône à un élément de menu - nécessite J4.1

  • Search for an icon on https://fontawesome.com/v5.15/icons. For example fas fa-envelope and far fa-envelope (note: fas stands for Solid and far stands for Regular)
  • Go to Menu > [ your menu ]
  • Click on the chosen Menu Item
  • Open the Link Type tab
  • Fill in the Link Icon Class option with the desired value, for example fas fa-envelope
  • See the result in the front-end

Txs to Christiane Maier-Stadtherr for this new feature added in J4.1

Note: this does not impose Font Awesome: it will work with any icon font the template wants to use (obviously the template would have to support an icon font for it to work)

More information on https://github.com/joomla/joomla-cms/pull/34658

4.7.3. Ajout d'une icône à un élément de menu - avant J4.1

Dans Joomla 4.0, vous pouviez atteindre un résultat similaire de manière manuelle

  • Ajouter à l'élément de menu une classe de lien my-icon-homepar exemple
  • Ajoutez ensuite le CSS suivant à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 
ul.mod-menu a.my-icon-home::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
    margin-right: 4px;
    display: inline-block;
    width: 1.25em !important;
}

En plus de cela, vous pouvez également utiliser uniquement les icônes mappées ici en tant que classes Font Awesome sans plus tarder :

https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media_source/system/scss/_icomoon.scss

4.7.4. Comment avoir un menu hamburger à Cassiopée

Voir "Modifier la disposition du menu" sur https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

4.7.5. Avoir le menu Hamburger avant le logo sur les petits écrans même s'il est après sur les grands écrans

Typiquement sur un site web vous auriez dans le Menu Position les modules suivants dans cet ordre

  1. Logo (module HTML personnalisé)
  2. Menu
  3. Module de changement de langue et/ou module de recherche

Mais sur la vue mobile, c'est ennuyeux car notre menu Hamburger (en supposant que nous utilisons le style déroulant déroulant pour le module de menu) reste "au milieu". Si vous souhaitez modifier la commande et avoir ce menu hamburger en premier, ajoutez simplement ce qui suit à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

@media (max-width: 992px) {
  nav.navbar {order: -1;}
}

4.8. Accessibilité

Il s'agit d'une fonctionnalité J4, pas d'une fonctionnalité Cassiopée en tant que telle. Mais puisque Cassiopée est conçue de toutes pièces pour être Accessible il convient de rappeler ces deux caractéristiques :

  • activer/configurer le plugin d'accessibilité (cela ajoute l'icône du fauteuil roulant en bas à gauche)
    • Allez dans Système> Gérer> Plugins
    • Rechercher accessibility
    • Modifier le System - Additional Accessibility Features plugin
    • Sélectionnez si vous voulez le front-end et/ou le backend
    • Définir le statut sur Activé
    • sauvegarder
  • activer/configurer le plugin SkipTo (appuyez sur Tab lors de l'ouverture d'une page ou appuyez sur Alt+9 à tout moment afin d'avoir des liens générés dynamiquement vers tous les éléments de menu mais aussi tous les titres et modules)
    • Allez dans Système> Gérer> Plugins
    • Rechercher skip
    • Modifier le System - Skip-To Navigation plugin
    • Sélectionnez si vous voulez le front-end et/ou le backend
    • Définir le statut sur Activé
    • sauvegarder

5. Quelques problèmes ou améliorations à venir

J'ai repéré quelques problèmes avec Cassiopée.

5.1. Numéro 1 – le Menu Hamburger sur petits écrans

Sur un site Web, vous auriez généralement dans l'en-tête

  1. le logo
  2. les éléments du menu
  3. le sélecteur de langue et/ou la recherche

Mais sur smartphone (plus généralement sur petits écrans) même en utilisant le menu déroulant déroulant Cassiopeia, cliquer sur le menu Hamburger donne quelque chose de moche :

  • il pousse le reste des éléments d'en-tête. Dans mon exemple sur cette capture d'écran
    • le logo est poussé vers la droite, selon la longueur de l'élément de menu le plus long
    • il n'y a plus de place pour le sélecteur de langue, il vient donc sur une nouvelle ligne
    • et bien sûr le contenu de tout le site est poussé vers le bas
  • au lieu d'avoir par exemple une belle offcanvas

problème1

Il semblerait que le comportement « par défaut » de Boostrap 5 soit bien de pousser le contenu vers le bas : https://getbootstrap.com/docs/5.0/examples/navbars/

Mais il existe aussi une solution offcanvas : https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/

Quelqu'un peut-il s'il vous plaît aider à ajouter une disposition alternative pour le module de menu afin de mettre en œuvre cette solution hors canevas (qui pourrait alors être une nouvelle disposition alternative Cassiopée du module de menu) ? Tx !

Breaking news : Viviana Menzel y travaille actuellement. Essaie!

Voir https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

Il existe deux mises en page alternatives : une pour le menu « par défaut » et une pour le « métismenu » :

  • Les fichiers doivent être copiés dans /templates/cassiopeia/html/mod_menu
  • Il y a quelques lignes de css à ajouter /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0)

N'hésitez pas à tester et à donner votre avis !

5.2. Problème 2 - le bouton Lire la suite partiellement masqué

[ modifier 2022.02.10 - Viviana Menzel a proposé un correctif pour ce problème sur https://issues.joomla.org/tracker/joomla-cms/36998 ]

Sur une vue Blog, selon la longueur du texte et le viewport (vue mobile), le bouton Lire la suite est souvent partiellement voire totalement masqué :

problème2

Viviana Menzel m'a aidé à résoudre le problème, remarquant que la désactivation de la ligne CSS suivante résout le problème sur la vue mobile : 

.image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 0 40%;
}

Étant donné que cette ligne est utile sur un écran large et n'a apparemment d'effet secondaire que sur la vue mobile, nous devrions probablement simplement ajouter une requête multimédia pour la désactiver ou l'adapter.

Par exemple, ajoutez ce qui suit à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

@media (max-width: 992px) {
  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 1 40%;
  }
}

5.3. Problème 3 – Mise en page dans la vue Blog

[ modifier 2022.02.10 - Viviana Menzel a proposé un correctif pour ce problème sur https://issues.joomla.org/tracker/joomla-cms/36998 ]

Lors de l'utilisation de la classe d'articles image-rightpour une Vue Blog (1 colonne par exemple), j'ai remarqué que les Images et l'Introtexte ne s'affichaient pas uniformément : lorsque l'Introtexte est trop court par exemple lorsque l'Image à Droite vient à côté du Texte à Gauche (au lieu d'avoir un 50 % à 50 % de mise en page).

Illustration avec image-right image-alternate boxed(mais j'ai revérifié : image-rightsuffit à créer le problème)

problème3

Je n'ai pas eu beaucoup de temps pour étudier cela, mais comme solution de contournement rapide, j'ai ajouté ce qui suit à /media/templates/site/cassiopeia/css/user.cssen J4.1+ (était /templates/cassiopeia/css/user.cssdans J4.0) 

.image-left .blog-item .item-content, .image-right .blog-item .item-content {
    flex: 1 0 40%;
}

Si vous pouviez enquêter plus avant et corriger Cassiopée pour cela, ce serait très apprécié.

Aucun commentaire

Informations