CSS login: Come modificare il form di login di WordPress con i CSS

ARGOMENTI DELL'ARTICOLO

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“. )

login form css

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;
}
Come personalizzare la login di WordPress
CSS login: come modificare la pagina di accesso di WordPress con il CSS

Puoi scegliere qualsiasi altro colore utilizzando un color picker che ti mostrerà il codice di colore da inserire.

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;
}

Come personalizzare la login di WordPress

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;
}

Come personalizzare la login di WordPress

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).

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

ti consiglio di leggere..

Libri e manuali su web design, SEO marketing e social media

Valentina Olini

web designer freelance

Ho iniziato a lavorare nel campo del web design nel 2005 occupandomi di UX, grafica e interfacce web.

Il primo sito web l’ho realizzato nel 1998 quando non esistevano editor e CMS ma solo html e css scritti a mano.

Sono della vecchia scuola, meno plugins e più codice.

Da Oltre 16 Anni Trasformo
Semplici Idee In Progetti Online Unici E Di Successo.

Oggi ti formo e informo su Wordpress.