Différents formulaires sont utilisés dans le site public, pour le moteur de recherche interne, la rédaction des messages des forums, les inscriptions à l’espace privé, etc. Il en va pour ces formulaires SPIP comme pour le reste : leur aspect graphique peut être modifié via CSS afin de s’insérer sans hiatus dans votre design.
Pour tirer profit de cet article, mieux vaut connaître les balises HTML propres aux formulaires.
À chaque formulaire son style
Tous les formulaires SPIP utilisés dans le site public sont contenus dans une div dotée du même style, .formulaire_spip, qui permet d’appliquer facilement une modification devant concerner l’ensemble de ces formulaires.
Par exemple, pour mettre en gras tous les descriptifs des champs de saisie (<label>) de vos formulaires, vous stylerez ainsi :
.formulaire_spip label {
font-weight: bold;
}
Depuis SPIP 1.9, chaque formulaire est, de plus, doté d’un style qui lui est propre. Celui-ci permet, inversemment, de modifier l’apparence de certains formulaires en particulier, sans interférer sur les autres.
Chacun de ces styles est nommé de même que la balise appelant le formulaire et son squelette. Par exemple, le fichier HTML du formulaire de recherche est formulaire_recherche.html ; celui-ci est inséré dans les squelettes grâce à la balise #FORMULAIRE_RECHERCHE ; et le style qui lui est associé est donc .formulaire_recherche.
Depuis SPIP 1.9.2, les squelettes des formulaires sont déplacés et ainsi renommés : dist/formulaires/recherche.html.
Styles des champs de saisie
Le style .forml est appliqué aux champs de saisie des formulaires. Il permet de définir la couleur du fond et la largeur des champs de saisie, mais aussi leur taille et police de caractère. Par exemple :
.forml {
width: 99%;
padding: 1px;
border: 1px solid #666;
font-family: Verdana;
font-size: 11px;
}
Ce style est particulièrement utile pour homogénéiser l’ensemble des champs de saisie, quelques soient les balises qui le reçoivent, telles que <input> et <textarea>, toutes deux présentes dans le formulaire de forum.
Depuis SPIP 1.9, chaque champ de saisie est étiqueté d’un terme explicatif, enveloppé dans une balise HTML <label>. On modifiera l’apparence de ces étiquettes par cette définition de style : .formulaire_spip label.
Les styles CSS permettent non seulement de changer les couleurs et les polices de caractères, mais aussi de gérer le positionnement relatif des objets dans la page. Ils permettent même de définir précisément la disposition des éléments entre eux (par exemple : <input>, <textarea> et <label>), sans utiliser de <table>
pour la mise en page.
Des boutons à vos couleurs
Une nouvelle qui ravira les débutant-e-s en CSS : on peut changer la couleur des champs mais aussi des boutons des formulaires [1]. Le style .spip_bouton est celui utilisé pour les boutons des formulaires SPIP.
Par exemple, pour que les boutons aient un fond bleu clair, et une bordure suffisemment visible (épaisse, en relief et bleue foncée), modifiez la règle suivante dans votre feuille de style :
.spip_bouton {
background-color: #b0d0FF;
border: 2px outset #000060;
color: black;
}
Depuis SPIP 1.7, SPIP 1.7.2, le formulaire de forum propose une barre de raccourcis typographiques. L’apparence de celle-ci est contrôlée par le style .spip_barre. Ainsi, pour modifier l’apparence des icônes qui la composent, et, par exemple, distinguer celles-ci au survol de la souris, vous définirez les styles pour .spip_barre a img puis .spip_barre a:hover img.
Organiser ces éléments de façon visiblement logique
Depuis SPIP 1.9, les différents éléments d’un formulaire sont plus rigoureusement regroupés en « blocs logiques » grâce aux balises HTML dédiées <fieldset> et <legend>. Leur apparence est donc contrôlée par .formulaire_spip fieldset et .formulaire_spip legend, tout simplement (ceci était autrefois réalisé avec .spip_encadrer). Utile pour encadrer chaque partie d’une bordure, et aérer vos formulaires en espaçant ces blocs les uns des autres, par exemple.
Quelques styles complémentaires permettent d’affiner encore la présentation de vos formulaires :
- L’apparence des messages d’erreur et autres réponses renvoyées par les formulaires peut être personnalisée par le style .reponse_formulaire.
- Certains formulaires permettent de prévisualiser les informations saisies avant de les envoyer. Depuis SPIP 1.9, l’apparence de cette prévisualisation est contrôlée par le style .previsu.
- Enfin, ce dernier style n’est pas utilisé dans les formulaires, mais est lié au formulaire de recherche interne au site : .spip_surligne permet de mettre en évidence les termes recherchés dans les pages de résultats.