Tutoriels Joomla 4

Personnaliser Cassiopeia

Il est rare qu'un template natif réponde parfaitement aux attentes de l'utilisateur. Pour savoir comment apporter les premières modifications au template Cassiopeia, c'est ce tutoriel qu'il faut consulter.

Une fois la prise en mains effectuée, vient le moment où l'on chercher à apporter les premières modifications au template. Les paramètres de Cassiopeia étant plutôt succints, vous pouvez néanmoins y changer le logo et choisissant votre fichier via le gestionnaire des médias de Joomla. L'autre possibilité rappellera des souvenirs aux utilisateurs de Protostar puisque avec Cassiopeia, vous pouvez également opter pour un affichage fluid ou pour un affichage static selon votre besoin.

Table des matières

  • Les réglages de base
  • Changer la couleur principale
  • Changer un module de position
  • Modifications avancées

Les réglages de base

Nous allons commencer par passer en revue les options par défaut que vous pouvez utiliser pour modifier l'apparence de Cassiopeia.

Depuis le panneau d'administration, ouvrez Template puis sélectionnez Cassiopeia.

Joomla 4 titre et description template Cassiopeia

Paramètres avancés Cassiopeia

Dans l'onglet Paramètres avancés, vous pouvez modifier :

  • le logo : en important et en choisissant un fichier depuis le gestionnaire des médias de Joomla,
  • le titre : le titre remplace le logo par le texte que vous saisissez ici,
  • la description : la description est le sous-titre (autrement appelé tagline par les designers),

Joomla 4 titre et description template Cassiopeia

Titre et description en situation

  • la mise en page : suivant l'aspect souhaité, vous pouvez opter pour un affichage static (c'est à dire, avec une largeur fixe) ou pour un affichage fluide (avec affichage sur toute la largeur de la page),
  • l'en-tête fixe : ce paramètre vous permet de conserver l'en-tête affichée en parmanence lors du scroll vertical.

Changer la couleur de principale

Vous pouvez également modifier la couleur d'en-tête du template. Pour ce faire, vous devez devoir créer un nouveau fichier CSS dans lequel vous ajouterez votre code personnalisé. Nous allons changer la couleur de fond de Cassiopeia comme dans cet exemple :

Joomla 4 nouveau header Cassiopeia

Exemple d'un nouveau header pour Cassiopeia

Pour l'anecdote, retenez que le code hexadécimal de la couleur primaire du template par défaut est #434178 sur lequel est appliqué un dégragé linéaire.

  • 1. Ouvrez /administrator/index.php?option=com_templates&view=template
  • 2. Sélectionnez Cassiopeia,

Joomla 4 accès aux fichier des Cassiopeia

Accès aux fichiers de Cassiopeia

  • 3. Cliquez sur le bouton Nouveau fichier,

Joomla 4 créer un nouveau fichier dans Cassiopeia

Créer un nouveau fichier dans Cassiopeia

  • 4. Sélectionnez le dossier CSS sur la gauche puis remplissez les champs comme indiqué sur cette capture d'écran :

Joomla 4 titre et description template Cassiopeia

Paramètres avancés Cassiopeia

De la même manière si vous envisagez d'apporter d'autres modifications à votre template, je vous conseille de créer dès maintenant un fichier user.js dans le dossier JS du template.

  • 5. Dans la zone de saisie de code, copiez / collez ce code :
	.container-header {
		position: relative;
		z-index: 10;
		margin-bottom: 20px;
		background: rgb(2,0,36);
		background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(246,19,204,1) 0%, rgba(103,167,189,1) 100%, rgba(0,212,255,1) 100%);
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
	}
	
  • 6. Enregistrez votre saisie.

En rafraichissant la page d'accueil de votre site, vous devez constatez les modifications apportées.
Naturellement, vous adapterez ce code à la charte graphique de votre site.

Changer un module de position

L'édition en frontend et la mobilité des modules sont deux des très grandes forces de Joomla. Pour le démontrer, nous allons déplacer un module depuis le frontend. Naturellement, il faut pour cela être identifié et avoir les droits d'édition appropriés.

  • 1. Une fois identifié, placez le curseur de votre souris sur le coin supérieur droit du module à déplacer (Menu principal, dans notre exemple),
  • 2. Cliquez sur l'icône qui apparait afin d'accéder au menu d'édition,
  • 3. Dans la partie Position, déroulez pour sélectionner la nouvelle position désirée (Menu dans notre exemple),
  • 4. Cliquez sur Enregistrez et Fermer pour valider votre saisie.
  • 5. Un message vous confirme le bon déroulé de l'opération et votre module est bien affiché dans sa nouvelle position.

Joomla 4 changement de position d'un module dans Cassiopeia

Changement de position d'un module dans Cassiopeia

Vous noterez qu'une fois affiché dans cette position, notre module "perd" son intitulé Menu principal.

Si pour des raisons de sécurité vous souhaitiez désactiver cette fonctionnalité d'édition en frontend, ouvrez la configuration générale puis dans l'onglet Site réglez le paramètre Icônes d'édition en ligne sur Aucun.

Joomla 4 icônes d'édition Cassiopeia

Paramètre Icônes d'édition en ligne

Modifications avancées

Dans la dernière partie de ce tutoriel, je vais vous montrer comment modifier l'apparence du template Cassiopeia.

Cette modification va s'appliquer à toute la colonne de droite mais on pourrait très bien décider de ne l'appliquer qu'à une seule position de module.

  • 1. Ouvrez /administrator/index.php?option=com_templates&view=template
  • 2. Sélectionnez Cassiopeia,

Joomla 4 accès aux fichier des Cassiopeia

Accès aux fichiers de Cassiopeia

  • 3. Dans la liste affiché à gauche, repérez et ouvrez le fichier index.php
  • La colonne de droite du template Cassiopeia est située pécisément à cet endroit du fichier :

    Joomla 4 modifier l'apparence d'un élément du template Cassiopeia

    Colonne de droite du template Cassiopeia

  • 4. Modifiez la ligne 158:
  • <div class="grid-child container-sidebar-right">

    comme ceci :

    <div class="grid-child container-sidebar-right alert alert-secondary">
  • 5. Enregistrez votre saisie.

Maintenant, votre colonne de droite doit ressembler à cela :

Joomla 4 modifier l'apparence d'un élément du template Cassiopeia

Nouvelle colonne de droite du template Cassiopeia

Puisque Cassiopeia est basé sur la framework Bootstrap 4, j'ai utilisé la classe CSS alert alert-secondary de Bootstrap 4 pour cet exemple. L'avantage est que cela simplifie le travail de modification. A contrario, le résultat est plus standardisé.

Les différentes classes alert de Bootstrap sont disponibles à cette adresse et ressemblent à ça :

Joomla 4 modifier l'apparence d'un élément du template Cassiopeia

Classes alert de Boostrap 4

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.

A consulter également

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum vulputate interdum.

Si vous voulez changer la font par défaut de Cassiopeia, ce tutoriel vous montre comment faire.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum vulputate interdum.

Tout ce qu'il faut savoir à propos du nouveau template natif de Joomla 4 est dans ce tutoriel.

Les positions du template Cassiopeia n'auront plus de secrets pour vous grâce à ce tutoriel.