Styles de modules et de menus

À propos des feuilles de styles en cascade

Une page de site web générée par Joomla! est constituée de balises HTML avec des attributs de style sous forme de déclarations de classe. Par exemple, un titre dans un article pourrait être <h3 class="special-warning">Attention!</h3>. Ce titre pourrait être affiché dans une police plus grande, avec des couleurs différentes pour le texte et l'arrière-plan, et peut-être une bordure et une icône d'avertissement. Les styles de classe seraient définis dans le fichier user.css du template, comme ceci :

    h3.special-warning {
      color: #900;
      background-color: #fee;
      border: 1px solid #900;
      padding: 1rem;
      font-size: 2rem;
    }

Cela fonctionne car la feuille de style user.css est chargée en dernier et tout style qu'elle contient prend le pas sur les mêmes styles définis dans les fichiers css chargés précédemment. Le style special-warning ne s'applique pas aux autres balises <h3>, uniquement à celles portant cette classe spécifique. Cela fonctionne dans un article car c'est vous-même qui saisissez le nom de la classe.

Mais que faire si vous souhaitez styliser un module ou une page entière ? Par exemple, vous pourriez appliquer des couleurs d'arrière-plan différentes à différents modules ou pages. Ou vous pourriez styliser le titre de votre page d'accueil pour qu'il diffère des titres des autres pages. Tout cela peut être réalisé en ajoutant des noms de classe dans le formulaire d'édition du module ou le formulaire d'édition du lien de menu. Les classes de style sont ensuite saisies dans le fichier user.css.

Styles de modules

Cet exemple simple applique des styles personnalisés au module de connexion et à son titre. La capture d'écran suivante montre les noms de style saisis dans l'onglet Avancé du formulaire d'édition Modules : Connexion. La Classe du module a été définie sur make-me-light-green et la Classe d'en-tête a été définie sur make-me-dark-green. Notez que vous pouvez inclure des traits d'union ou des soulignés dans les noms de classe, mais des espaces séparent les différents noms de classe.

Les déclarations de style suivantes sont utilisées dans le fichier user.css :

    .make-me-light-green {
      background-color: #efe;
      border-color: darkgreen;
    }
    .make-me-dark-green {
      color: darkgreen;
      border-color: #264f71;
    }

Attention au point (.) qui est utilisé en css pour définir une classe portant ce nom. Le point ne doit pas être utilisé dans le formulaire de saisie des données du module. Le résultat dans cet exemple est le suivant :

Le bas de l'image montre le panneau des outils de développement du navigateur avec la balise <div> englobante du module de connexion sélectionnée. Vous pouvez constater que le style de Classe du module personnalisé a été ajouté aux styles déjà définis dans le template du module. La ligne suivante montre la balise <h3> avec également la Classe d'en-tête personnalisée ajoutée aux styles déjà définis.

Vous apprécierez peut-être ce style de module, ou pas ! Mais ceci n'est qu'une leçon sur la façon de procéder, pas sur ce qui constitue un bon jeu de couleurs !

Styles de page

Il existe plusieurs façons de personnaliser l'apparence générale d'une page. Toutes fonctionnent via le formulaire Menus : Éditer le lien :

• L'onglet Détails possède un paramètre Style du template à partir duquel vous pouvez sélectionner un template spécifique à utiliser.
• L'onglet Disposition du blog possède des champs Classe de l'article principal et Classe de l'article dans lesquels vous pouvez saisir un nom de classe.
• L'onglet Paramètres possède un champ Choisir une disposition à partir duquel vous pouvez choisir parmi les dispositions disponibles pour tous les éléments.
• L'onglet Type de lien possède des champs pour une Classe de lien, une Classe d'icône de lien et une Classe d'image.
• L'onglet Affichage de la page possède un champ pour une Classe de page.

C'est ce dernier élément de la liste qui est traité dans cet article. Que se passe-t-il lorsque make-me-aliceblue est saisi dans ce champ ? Et que le code suivant est saisi dans user.css :

    .make-me-aliceblue {
      background-color: aliceblue;
    }

La classe est ajoutée à la balise body de la page :