Styles de module

Concepts de style

Le formulaire de saisie des données d'un module comporte un onglet Paramètres avancés. Ses champs varient selon le type de module et vous pouvez le constater par vous-même en sélectionnant un module Menu et en le comparant avec un module Connexion ou un module Fil de navigation. Vous verrez les trois champs de formulaire suivants liés au style :

• Classe du module est un champ texte qui permet d'ajouter votre propre classe CSS à la balise conteneur du module, généralement une <div>.
• Classe de l'en-tête est un champ texte qui permet d'ajouter votre propre classe CSS à la balise d'en-tête, par défaut une balise <h3>.
• Style du module est une liste qui permet de sélectionner un style parmi un certain nombre de styles standards. La liste contient none, html5, outline, table, card et noCard. La valeur par défaut est card, issue des styles du template Cassiopeia.

Vous pouvez essayer les paramètres de Style du module en modifiant un module et en changeant la valeur pour voir l'effet sur l'affichage du site.

• html5 donne <div class="moduletable ">
• none supprime complètement la <div> extérieure ainsi que la balise <h3> du module.
• outline donne <div class="mod_preview_info">, avec les informations de position et de style remplaçant la balise <h3> du module.
• Table donne une mise en page en tableau commençant par <table class="moduletable ">, l'ancienne balise h3 devenant une balise <th>.
• card donne <div class="sidebar-right card ">, la valeur par défaut.
• noCard donne <div class="sidebar-right no-card ">

La classe du module

À ce stade, vous devez connaître un peu les feuilles de style en cascade ou CSS. Si vous saisissez un seul mot dans le champ Classe du module, disons green car les classes CSS sont par convention toutes en minuscules, et avec le Style du module réglé sur inherited, le résultat contient <div class="sidebar-right card green">.

Il n'y a aucun changement visible dans l'apparence du site car la classe green n'est pas définie. Pour la définir, créez une entrée dans le fichier user.css du template.

Depuis le menu Administration :

• Sélectionner Système / Templates du site / Templates et fichiers Cassiopeia.
• Sélectionner Nouveau fichier dans la Barre d'outils
• Sélectionner css dans la colonne de gauche, la destination du nouveau fichier.
• Taper user dans le champ Nom du fichier.
• Sélectionner css dans la liste Type de fichier.
• Sélectionner le bouton Créer.

Vous pouvez maintenant ouvrir le dossier css pour trouver et ouvrir le fichier user.css afin de le modifier. Saisir ces déclarations de style et remarquer l'orthographe américaine de color :

.sidebar-right.card.green {
    background-color: #ddffdd;
}
.sidebar-right.card.green .card-body {
    background-color: #eeffee;
}

Le style aurait pu n'utiliser que .green, mais cela aurait pu affecter d'autres balises ayant ce style sur d'autres pages.

La classe de l'en-tête

Retournez au formulaire de modification du module et ajoutez blue dans le champ Classe de l'en-tête. Le module n'affiche aucun changement visible sur le site, mais l'en-tête s'affiche désormais comme <h3 class="card-header blue">. Retournez modifier le fichier user.css pour ajouter une entrée pour le style de l'en-tête :

.card-header.blue {
    color: navy;
}

Le titre du module est maintenant en bleu foncé. Il existe plusieurs façons de spécifier une couleur en CSS. Les plus courantes sont les couleurs hexadécimales et les noms de couleurs standard. Pour en savoir plus, consultez une documentation spécialisée !

Défi CSS

• Changer la couleur de la bordure du module en bleu marine !
• Changer également la bordure inférieure du titre.
• Appliquer ce style à plusieurs modules à la fois plutôt qu'un par un