Tempo di Lettura: 2 minuti
Dopo aver introdotto nei commenti il captcha matematico e aver inserito una facility per lo user-uman, ho pensato di dare un tocco grafico al campo anti-spam inserendovi un immagine di un un lucchetto che rendesse immediato e chiaro lo scopo di questa casella di testo.
Per fare questo ho sfruttato la proprietà Background dei CSS, con cui è possibile controllare lo sfondo degli elementi, sia per quanto riguarda i colori che per quanto riguarda le immagini.
Nel nostro caso ci interessa usare la seconda possibilità ed in particolare mi soffermerò sulla modifica del campo antispam proposto nel Math Comment Spam Protection Plugin, ma deve essere chiaro questa procedura è valida per qualsiasi casella di testo.
Inserire nel foglio di stile del proprio tema questa proprietà:
Come si vede, il codice CSS, non fa altro che assegnare certi parametri a tutte le caselle di testo di tipo INPUT (quindi si escludono, per esempio, le textarea) che hanno un valore di ID pari a mcspvalue (valore di default assegnato dal plugin wordpress di antispam). Questi parametri consistono in uno sfondo di default bianco ma che deve caricare un file PNG 6×16 di nome lock.png posizionato a sinistra e centrato in altezza e che non viene ripetuto ne scrollato.
Molto importante è anche l’entry padding: dato che l’immagine è larga 16 pixel, occorre posizionare il testo subito dopo l’immagine, per evitare una sovrimpressione sgradevole alla vista. Per fare ciò uso la proprietà padding il cui ultimo valore corrisponde a quanti pixel da sinistra deve posizionarsi il testo.
Come ben insegna Davide, come regola mnemonica basta ricordare che, nel caso che la dichiarazione generica contenga quattro valori, questi seguono un ordine in senso orario a partire dall’alto: padding:top right bottom left;
Una volta modificato il css come suggerito e scelta una immagine da applicare allo sfondo del campo di input (cliccate qui per scaricare l’immagine lock.png), il gioco è fatto e il risultato è quello che vedete qui sotto nei commenti.