Jetpack oggi è uno degli strumenti irrinunciabili per WordPress. Il prodotto è della Automattic, la stessa che cura il noto blog engine, e gli strumenti che offre sono molteplici. Uno dei più utilizzati è la possibilità per l’utente finale di iscriversi attraverso la posta elettronica ad una newsletter ed essere avvisato quando viene creato un nuovo articolo. Il processo è piuttosto semplice, basta fornire una E-mail, confermare la ricezione ed iniziare a ricevere. Sempre in autonomia ci si potrà de-iscrivere quando si vuole. Attualmente Jetpack iscrizioni è un widget che dispone anche di un suo foglio di stile posizionato all’interno del plugin stesso. Purtroppo modificare il CSS del plugin non è una buona idea poiché al primo aggiornamento perderemo le modifiche. Quindi è meglio poter fissare il nostro codice al foglio di stile del tema che stiamo utilizzando.
In sostanza vogliamo modificare l’aspetto del widget iscrizioni. Si tratta dal suo concetto visivo di una struttura molto semplice, ovvero un testo, un campo text per immettere la mail e un pulsante di invio.
Per prima cosa vediamo come intercettare il campo d’immissione della E-mail. Guardando il codice attraverso Firebug o Chrome notiamo che la input type=text è racchiusa in un paragrafo con la id subscribe-email. Niente di più propizio dato che CSS3 ci verrà in aiuto.
Ora vogliamo che il comportamento del campo di testo sia quello di allungarsi per tutta la lunghezza possibile, allargarne un po’ l’altezza, fornire una colorazione leggermente diversa dal fondo ed eliminare i bordi che danno una sorta di effetto rilievo.
Questo è il codice utilizzato.
#subscribe-email input {
color: #333;
padding: 7px !important;
background-color: #F0F0F0;
border: 0;
}
In questo caso il paragrafo #subscribe-email ha una sola input e possiamo facilmente applicare il nostro foglio di stile.
Ora passiamo a trattare il pulsante “Iscriviti” che si mostra nella sua anti estetica grafica di default. Anche in questo caso analizzando il codice scopro che il pulsante è racchiuso in un paragrafo chiamato #subscribe-submit, ma al suo interno sono presenti parecchie input di tipo hidden e una di tipo submit. Quello che vogliamo ottenere è qualcosa di più moderno e accattivante, ad esempio un pulsante che corre per tutta la lunghezza del widget, colorato, un po’ largo e con la possibilità di fargli cambiare colore una volta che posizioniamo il mouse sopra di esso per dare un feedback visivo all’utente.
#subscribe-submit input[type="submit"] {
background-color: #EE665E;
color: white;
font-size: large;
margin: 0;
width: 100%;
padding: 6px !important;
height: auto;
border: none;
box-shadow: none;
text-shadow: none;
}
#subscribe-submit input[type="submit"]:hover {
background-color: #82C6BE;
}
Come possiamo vedere qui sopra abbiamo intercettato il parametro del paragrafo #subscribe-submit e in seconda battuta la input che sarà di tipo submit, ovvero l’unica presente. Nel secondo blocco abbiamo semplicemente utilizzato l’attributo :hover che intercetterà la presenza del mouse sopra il pulsante.
Di seguito il risultato prima e dopo.
