Vuoi modificare la grafica della login di WordPress ma non sai come fare? Continua a leggere, ti seguirò passo passo nella modifica della tua login.
Giorni fa ho scritto un articolo analogo a questo dove ti spiego come modificare la pagina di login con un plugin (puoi leggere l’articolo qui) ma, oggi voglio spiegarti come modificare la pagina di accesso a WordPress utilizzando solo ed unicamente i CSS.
Come sicuramente sai, ogni plugin installato appesantisce il sistema e a lungo andare può rallentare il sito web.
Proprio per questo motivo bisogna sempre installare solamente plugins davvero essenziali e utilizzando solamente CSS e niente più non rallenterai in nessun modo il tuo sito web.
Come modificare la pagina di Login di WordPress con i CSS (senza utilizzare plugin)
Devi sapere che tutte le pagine web sono formate da codice (php, html…) e per modificare gli stili, i colori, i fonts e la posione degli elementi si utilizza il CSS (css acronimo di Cascading Style Sheets – fogli di stile a cascata).
Per modificare la pagina di login ti servirà variare solamente le impostazioni di alcune classi CSS abbinate agli elementi che ci interessa modificare.
In questo caso andremo a modificare:
.login form (box del form di login)
.body (corpo della pagina)
.login label (label del form di login – “nome utente o indirizzo email” e “Password“. )
CSS Login: Come modificare la login di WordPress con i CSS
Apri la sezione “CSS aggiuntivo” dal menu “Personalizza” e incolla questo codice che andremo cambieremo insieme:
body {
background: #f0f0f1;
min-width: 0;
color: #3c434a;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 13px;
line-height: 1.4;
}
.login form {
margin-top: 20px;
margin-left: 0;
padding: 26px 24px 34px;
font-weight: 400;
overflow: hidden;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.login label {
font-size: 14px;
line-height: 1.5;
display: inline-block;
margin-bottom: 3px;
}
Lavoreremo su sfondi, bordi e colori.
Per impostare uno sfondo diverso da quello grigio standard di WordPress (#f0f0f1) sostituire il codice #f0f0f1 con il colore nero (#000000) o con quello di un altro colore.
background: #000
il codice di body quindi diventerà così:
body {
background: #000000;
min-width: 0;
color: #3c434a;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 13px;
line-height: 1.4;
}
Puoi scegliere qualsiasi altro colore utilizzando un color picker che ti mostrerà il codice di colore da inserire.
page builder
I servizi suggeriti sono quelli che utilizzo quotidianamente per me e i miei clienti e sono servizi in affiliazione. se acquisti da uno dei seguenti links guadagnerò una provvigione.
Ma se preferisci personalizzare ancor di più la tua login inserendo una immagine di sfondo (che dovrai precaricare su WordPress dalla libreria media) e inserire questo codice sostituendo “indirizzodellatuaimmagine.jpg ” con l’url dell’immagine desiderata.
background-image: url("indirizzodellatuaimmagine.jpg");
Ora passiamo a modificare il box del form di login aggiungendo un gradient linear blu (sfumatura lineare), un border radius (bordi arrotondati) e un colore del bordo differente.
.login form {
margin-top: 20px;
margin-left: 0;
padding: 26px 24px 34px;
font-weight: 400;
overflow: hidden;
background: linear-gradient(184deg, rgba(68,67,85,1) 0%, rgba(27,157,182,1) 100%);
border: 7px solid #668c91;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
border-radius: 39px;
}
Per realizzare dei bei gradient puoi utilizzare CSSgradient.io, tool che ti permette di realizzare gradient lineari e radiali in modo semplice. Dopo aver realizzato il gradient, copia il codice.
A questo punto non ci resta che modificare le label del form di accesso con questo codice, impostando il colore delle scritte da nero a bianco.
.login label {
font-size: 14px;
line-height: 1.5;
display: inline-block;
margin-bottom: 3px;
color:#fff;
}
Modifica anche questo codice e salva le modifiche.
La tua login ora è pronta per essere mostrata a tutti.
Ricorda se davvero vuoi avere una login personalizzata è meglio utilizzare il css senza installazione di plugins che utilizzare il metodo che trovi qui (preferibile dai meno esperti).
