Joomla! Documentation™

À propos des feuilles de style en cascade

Une page web générée par Joomla! se compose 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 modèle, comme ceci :

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

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

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

Styles de module

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 entrés dans l'onglet Avancé du formulaire d'édition du module de connexion. La classe du module a été définie sur make-me-light-green et la classe de l'en-tête a été définie sur make-me-dark-green. Notez que vous pouvez inclure des tirets ou des soulignements dans les noms de classe, mais les espaces séparent 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 avec 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> du module de connexion sélectionnée. Vous pouvez voir que le style de classe du module personnalisé a été ajouté aux styles déjà définis dans le modèle du module. La ligne suivante montre la balise <h3> également avec la classe d'en-tête personnalisée ajoutée aux styles déjà définis.

Vous pouvez aimer ou ne pas aimer ce style de module ! Mais ceci est juste une leçon sur comment faire, pas sur ce qui constitue un bon schéma 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 d'édition de l'élément de menu :

• L'onglet Détails dispose d'une option de style de modèle à partir de laquelle vous pouvez sélectionner un modèle spécifique à utiliser.
• L'onglet Mise en page du blog dispose de champs Classe de l'article principal et Classe de l'article dans lesquels vous pouvez saisir un nom de classe.
• L'onglet Options dispose d'un champ Choisir une mise en page à partir duquel vous pouvez choisir parmi les mises en page disponibles pour tous les éléments.
• L'onglet Type de lien dispose de champs pour une classe de lien, une classe d'icône de lien et une classe d'image.
• L'onglet Affichage de la page dispose de champs pour une classe de page.

C'est le dernier élément de cette liste qui est abordé dans cet article. Que se passe-t-il avec make-me-aliceblue entré dans ce champ ? Et ce qui suit est entré dans user.css :

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

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

CQFD !