Formulus n'écrit presque aucun style : c'est votre template qui habille le formulaire. Quand vous voulez aller plus loin pour un formulaire précis, l'onglet CSS personnalisé, juste après Champs, lui donne sa propre feuille. Il est organisé comme celui d'Opus.
La feuille du formulaire
À gauche, la zone de code, colorée par l'éditeur de Joomla. Ces règles partent dans l'en-tête de la page où le formulaire s'affiche, et elles sont globales : préfixez-les par la classe du formulaire, formulus- suivi de son numéro, pour ne toucher que lui.
.formulus-12 .formulus-groupe-titre {
color: #a02127;
}
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.
Sous la zone, Un exemple complet, commenté montre une classe du début à la fin : couleur, fond, marges, bordure, angles, taille du texte, puis la même chose avec les couleurs de Corpus. Le bouton Insérer dans la feuille l'ajoute à la suite de ce que vous avez écrit.
Les classes produites
À droite, la liste des classes que ce formulaire écrit, et elles seules : ajoutez une rangée titrée, et les classes du groupe apparaissent. Chacune porte un filet de couleur :
- vert, à vous : propre à Formulus, modifiable sans conséquence ailleurs ;
- bleu, Corpus : partagée avec les articles et les modules du site ;
- violet, Bootstrap : livrée par Joomla à tout le site.
Cliquer un nom le copie et montre sa description. Selon la classe, un bouton propose :
- Recopier dans la feuille pour les modifier : les règles que Formulus donne à cette classe sont copiées dans votre feuille, préfixées par le formulaire, et vous n'avez plus qu'à changer les valeurs ;
- Écrire le CSS de cette classe : une règle vide, prête à remplir.
La liste donne aussi la classe de chaque champ, formulus-champ- suivi de son nom : de quoi viser un champ précis sans rien régler.
Vos classes
Pour habiller une rangée ou un champ à part, donnez-lui une classe derrière sa roue dentée (chapitre précédent) :
| Où | Ce qu'elle habille |
|---|---|
| Rangée, Classe | La rangée entière, son titre compris. |
| Champ, Classe d'affichage | Le bloc du champ : libellé, saisie, aide, erreur. |
| Champ, Classe du label | Le libellé seul. |
| Champ, Classe du champ | La zone de saisie seule. |
Une classe nommée s'écrit d'elle-même dans la feuille : sa règle vide, préfixée par le formulaire, s'ajoute à la fin, prête à remplir. Pensez à enregistrer.
Exemple : le titre d'une rangée
- Onglet Champs, roue de la rangée « Vos coordonnées », Classe :
mes-coordonnees. - Onglet CSS personnalisé, dans la règle qui vient d'apparaître :
.formulus-12 .mes-coordonnees .formulus-groupe-titre {
color: #a02127;
font-size: 1.5rem;
padding-bottom: .5rem;
border-bottom: 2px solid #a02127;
}
Enregistrez enfin, et rechargez la page du formulaire. Pour tous les titres de rangée à la fois, retirez .mes-coordonnees ; pour suivre les couleurs du site sous Corpus, écrivez var(--accent) à la place de #a02127.
Ce qui vous prévient
- La pastille de l'onglet compte les règles de la feuille.
- Une ligne habillée (rangée ou champ dont la classe a des règles) porte un contour violet dans l'onglet Champs.
- Les règles qui ne visent plus rien sont signalées sous la zone de code, avec leur liste. Le bouton Retirer ces règles ne retire qu'elles : une règle encore employée n'est jamais proposée.
- Effacer la dernière règle d'une classe posée sur un élément ouvre une question. Oui : la classe est aussi retirée de l'élément, et sa pastille baisse. Non : la feuille revient comme avant.
- Vider la classe d'un élément dont la feuille a des règles pose la même question dans l'autre sens. Oui : ses règles partent aussi. Non : la classe reste.
- Renommer une classe renomme ses règles, sans question : rien ne se perd.
À jour pour Formulus 1.0.237.