Quanto sono belli i miei form!

Abbiamo personalizzato l’impaginazione e le regole tipografiche del nostro sito, ma ora sono i form di SPIP che stonano con il resto! Niente panico, anche in questo caso i fogli di stile salveranno la situazione.

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.

Note

[1Nonché i pulsanti di amministrazione mostrati a fondo pagina all’atto della connessione.

[2Da notare tuttavia che alcuni browser impongono i propri pulsanti stilizzati e non vi lasceranno cambiare l’aspetto.

Autore Fausto Barbarito Publié le : Mis à jour : 26/10/12

Traductions : عربي, català, Deutsch, English, Español, français, italiano, Nederlands