Ricordiamo che i fogli di stile, utilizzati insieme a SPIP, permettono di adattare il risultato delle scorciatoie tipografiche alla propria impaginazione. Ebbene, ciò è vero anche per i form generati da SPIP: il loro aspetto grafico può essere adattato in maniera da inserirsi perfettamente nel proprio design.
Ancora una volta, non è il caso di passare in rassegna tutti gli stili forniti da SPIP. Tuttavia, bisogna sapere che è possibile cambiare l’aspetto di tutti i form dell’area pubblica: form di risposta ai forum, di ricerca, di firma di petizione... [1] In questa sede ci limitiamo a dare qualche ricetta.
Colori e effetto in rilievo
Una notizia che stupirà i principianti in CSS: è possibile cambiare il colore dei campi e dei pulsanti dei form. [2]
Per esempio, affinché i pulsanti abbiano uno sfondo blu chiaro, aggiungiamo la regola seguente al nostro file CSS (che, se si sono seguite le nostre indicazioni alla lettera si chiama miei_stili.css):
.spip_bouton {
background-color: #b0d0FF;
color: black;
}I pulsanti appaiono ora con uno sfondo blu chiaro (proprietà background-color), e un testo nero. Notiamo che .spip_bouton è lo stile utilizzato dai pulsanti e dai campi dei form di SPIP.
Modifichiamo ora l’aspetto del bordo dei pulsanti. L’effetto in rilievo dei pulsanti HTML è un po’ vecchiotto. Possiamo decidere di appiattire i bordi, e di renderli più spessi in controparte affinché rimangano ben visibili. Per esempio:
.spip_bouton {
background-color: #b0d0FF;
color: black;
border: 2px solid #000060;
}La proprietà border così definita traccia un bordo spesso 2 pixel, con un aspetto piatto ("solid" in linguaggio CSS) e di colore blu scuro intorno ai pulsanti. Possiamo anche modificare il font del pulsante (con le proprietà font-size e font-family come abbiamo visto nelle fasi precedenti di questa iniziazione).
E per i campi? È sufficiente applicare le scelte allo stile .formul invece che a .spip_bouton.
Un po’ di spazio
I fogli di stile permettono non solo di cambiare i colori e i font, ma anche di gestire la posizione relativa degli oggetti nella pagina. Senza andare troppo lontani, mostriamo come dare un po’ di aria ai form:
.formulaire {
background-color: #e8f4ff;
font-family: Verdana, Arial, sans-serif;
font-size: 90%;
font-weight: normal;
border: 1px solid black; padding: 10px;
}In questo esempio modifichiamo la visualizzazione dello stile .formulaire, che è lo stile principale di tutti i form generati da SPIP. Il vantaggio di modificare questo stile è che si può gestire la visualizzazione di tutti i form. Qui gli applichiamo un colore di sfondo, molto chiaro, e un font. Ma soprattutto, modifichiamo lo spazio interno di ogni form preso individualmente. È la proprietà padding che permette questo effetto di "dare aria". È importante notare che questo spazio si produce precisamente all’interno del bordo definito dalla proprietà border: il form è qui considerato come un blocco rettangolare autonomo.
N.B.: i fogli di stile permettono altresì di definire precisamente la disposizione di questi blocchi rettangolari tra loro, senza utilizzare tabelle per l’impaginazione. Tuttavia, è un argomento troppo vasto per essere discusso in questa iniziazione.