A l’espai públic s’utilitzen diversos formularis, pel motor de cerca interna, la redacció dels missatges dels fòrums, les inscripcions a l’espai privat, etc. Serveix igual per aquests formularis SPIP com per la resta: el seu aspecte gràfic es pot modificar per mitjà del CSS per tal d’inserir-se sense problemes al vostre disseny.
Per treure profit d’aquest article, és millor conèixer les etiquetes HTML pròpies als formularis.
A cada formulari el seu estil
Tots els formularis SPIP que s’utilitzen a l’espai públic estan continguts ens una div dotada d’una mateixa estil, .formulaire_spip, que permet aplicar fàcilment una modificació abans d’afectar el conjunt d’aquests formularis.
Per exemple, per posar en negreta totes les descripcions dels camps d’entrada de dades (<label>) dels vostre formularis, podem posar aquest estil:
.formulaire_spip label {
font-weight: bold;
}A partir d’ SPIP 1.9, cada formulari està dotat, a més a més, d’un estil que li és propi. Aquest permet, inversament, modificar l’aparença de certs formularis en particular, sense interferir als altres.
_Cadascun d’aquests estils s’anomena igual que l’etiqueta que crida al formulari i la seva plantilla. Per exemple, el fitxer HTML del formulari de cerca és formulaire_recherche.html; aquest s’insereix a les plantilles gràcies a l’etiqueta #FORMULAIRE_RECHECHE; i l’estil que se li associa és per tant .formulaire_recherche.
A partir d’SPIP 1.9.2, els esquelets dels formularis s’han desplaçat i anomenat d’aquesta manera: dist/formulaires/recherche.html.
Estils dels camps d’entrada de dades
L’estil .forml s’aplica als camps d’entrada de dades dels formularis. Permet, inversament, definir el color de fons i l’amplada de les caixes, però també la seva mida i la font dels caràcters. Per exemple:
.forml {
width: 99%;
padding: 1px;
border: 1px solid #666;
font-family: Verdana;
font-size: 11px;
}Aquest estil és particularment útil per homogeneïtzar el conjunt dels camps d’entrada de dades, siguin quines siguin les etiquetes que reben, com <input> i <textarea>, ambdues presents al formulari de fòrum.
A partir d’SPIP 1.9, cada camp d’entrada de dades està etiquetat amb un terme explicatiu, inclòs en una etiqueta HTML <label>. L’aparença d’aquestes etiquetes es modificarà mitjançant aquesta definició d’estil: .formulaire_spip label.
Els estils CSS permeten no només canviar els colors i les fonts de caràcters, sinó també gestionar la posició relativa dels objectes a la pàgina. Permeten, també, definir de forma precisa la disposició dels elements entre ells (per exemple: <input>, <textarea> i <label>), sense utilitzar taules per configurar la pàgina.
Botons del color que vulgueu
Una novetat que farà feliç a aquells que comencen en CSS: es pot canviar el color dels camps però també dels botons dels formularis [1]. L’estil .spip_bouton és el que s’utilitza pels botons dels formularis SPIP.
Per exemple, per aconseguir que els botons tinguin un fons blau clar, i un contorn suficientment visible (gruixut en relleu i de color blau fosc), heu de modificar la següent regla al vostre full d’estil:
.spip_bouton {
background-color: #b0d0FF;
border: 2px outset #000060;
color: black;
}A partir d’SPIP 1.7, SPIP 1.7.2 , el formulari del fòrum proposa una barra de dreceres tipogràfiques. L’aparença d’aquesta està controlada per l’estil .spip_barre. D’aquesta manera, per a modificar l’aparença de les icones que la componen i, per exemple, distingir aquestes que les que aparèixen quan se’ls passa el ratolí pel damunt, haureu de definir els estils per .spip_barre a img i després per .spip_barre a:hover img.
Organitzar aquests elements de manera visiblement lògica
A partir d’SPIP 1.9, els diferents elements d’un formulari es reagrupen més rigorosament en «blocs lògics» gràcies a les etiquetes HTML dedicades <fieldset> i <legend>. La seva aparença és, per tant, controlable per .formulaire_spip fieldset i .formulaire_spip legend, simplement (això antigament era realitzat amb .spip_encadrer). Útil per emmarcar cada part d’una vora, i airejar els vostres formularis tot espaiant aquests blocs entre ells, per exemple.
Alguns estils complementaris permeten afinar encara més la presentació dels vostres formularis:
- L’aparença dels missatges d’erro i altres respostes reenviades pels formularis es pot personalitzar per l’estil .reponse_formulaire.
- Certs formularis permeten fer una vista prèvia de les dades entrades abans d’enviar-les. A partir d’SPIP 1.9, l’aparença d’aquesta vista prèvia està controlada per l’estil .previsu.
- Finalment, aquest darrer estil no s’utilitza en els formularis, però està relacionat amb el formulari de cerca interna del lloc Web: .spip_surligne permet posar en evidència els temes de la cerca a les pàgines dels resultats.