Aller au contenu principal

7 - Le CSS personnalisé

Opus n'écrit aucun style en dur : couleurs, espacements et formes viennent du template. Quand une mise en page demande un réglage fin, l'onglet CSS personnalisé donne une feuille propre au module, et tout ce qu'il faut pour l'écrire juste.

La feuille de ce module

Les règles écrites ici partent dans l'en-tête de la page. Elles sont globales : préfixez-les par une classe propre à ce module pour ne toucher que lui, par exemple celle que vous lui donnez dans l'onglet Avancé.

.accueil-activites .opus__carte { border-color: #ccc; }

N'employez jamais !important : si une règle d'une autre extension l'emporte, retirez sa cause plutôt que d'en ajouter une par-dessus.

Les classes produites

Le panneau Classes produites liste les classes que cette mise en page écrit vraiment, et seulement elles. Un clic sur un nom le copie et montre ses règles. Chaque classe porte sa couleur :

  • À vous : propre au module, modifiable sans conséquence ailleurs ;
  • Corpus : partagée avec les articles et les autres modules. La modifier déplace des choses ailleurs sur le site ;
  • Bootstrap : livrée par Joomla à tout le site. Ne la modifiez pas ici.

Pour habiller une classe partagée sans toucher au reste du site, Copier sous un autre nom en crée une copie à vous. Écrire le CSS pose la règle vide dans la feuille, prête à remplir.

Le catalogue des classes se charge à la première ouverture de l'onglet : il n'alourdit pas l'ouverture du module.

Un exemple complet, commenté s'insère dans la feuille d'un clic : c'est le meilleur point de départ.

Les règles orphelines

Quand une règle de votre feuille vise une classe que le module n'emploie plus, Opus le signale. Ces règles ne gênent pas, mais elles encombrent : Retirer ces règles fait le ménage.

Les classes et les couleurs, ailleurs dans Opus

Avant d'écrire du CSS, regardez les réglages : une rangée, un élément et une ligne de barres portent une Classe derrière leur roue dentée, et les chiffres clés, les barres, les états et les repères de frise ont déjà une couleur au choix, tirée du template. Ces couleurs suivent le mode sombre toutes seules.

La jauge

Joomla range tous les réglages d'un module dans un seul champ, limité à 64 Ko. La jauge de l'onglet indique à combien le module est rempli, en ne comptant que ce qui est vraiment enregistré : Opus n'enregistre ni les réglages vides ni ceux restés à leur valeur par défaut. Textes, réglages et CSS partagent la même place. Quand elle approche du plein, Opus prévient : au-delà, la fin de ce que vous écrivez ne serait pas enregistrée. Raccourcissez alors vos textes, ou séparez la mise en page en deux modules.

Une mise en page complète pèse en général une douzaine de kilo-octets : la jauge sert rarement, mais elle sert.

À jour pour Opus 1.5.930.