Corso HTML e CSS

Modificare i CSS di un tema WordPress

Importante! Aggiornamento di WordPress

Ora in WordPress si possono facilmente modificare i css nel live editor del core, quindi senza per forza avere un tema che ci permette l'inserimento di CSS.

Questa funzione è raggiungibile da Aspetto > Personalizza > CSS Aggiuntivo.

Arrivato in questa sezione, naviga nella pagina dove vuoi vedere "live" i risultati delle tue personalizzazioni CSS e scrivili nella relativa colonna, come vedi dall'immagine qui sotto.

WordPress Live CSS Editing

Anche se vorrai registrare i CSS direttamente nel tuo foglio di stile o in quello del tema avanzato, questa funzione è veramente ottima per vedere in diretta i cambiamenti applicati alla tua pagina, sia versione desktop che smartphone e tablet.

---------

Eccoci arrivati nel vivo dell'azione: andare a modificare i css di un tema WordPress.

Il flusso di lavoro è semplice:

  1. Vai sulla pagina che vuoi modificare e analizzala con l'inspector.
  2. Guarda da chi sono dichiarate le proprietà css che ti interessa modificare.
  3. Sovrascrivile con il tuo css.

A seconda del tema che usi può essere diversa la posizione dove andrai ad inserire il tuo codice css personalizzato.

Per esempio certi temi avanzati, fra le loro opzioni, ti forniscono un campo in cui inserire i tuoi css. Questo è un vantaggio molto importante, poiché i css che inserisci non andranno persi nel momento in cui decidereai di andare ad aggiornare il tema.

Se il tema non ti da questa possibiltà, allora puoi sempre inserire i css all'interno del foglio style.css, ma tieni conto che queste personalizzazioni verrano perse in caso di aggiornamento del tema.

Hai una domanda su questa lezione?

Accedi al video corso


  1. Gianfranco
    Gianfranco dice:

    Buonasera grazie per i corsi sono fatti molto bene. Ho provato ad le cose imparate in questa lezione del corso. Ho provato a modificare il colore della top bar inserendo una riga di codice nel custom codes del tema .top-bar {background: #000000;} ma non è cambiTo il colore dove ho sbagliato? Il mio sito è adesiviok.it grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Gianfranco,
      rispondimi a queste domande:
      – come si dichiarano le proprietà di una classe?
      – come si dichiarano invece le proprietà di un id?

      Buona giornata!

    • Gianfranco
      Gianfranco dice:

      Ottimo. Avevo fatto un pò di confusione ho riguardato il video relativo e sono riuscito a fare quello che cercavo di fare. Grazie ancora

  2. Ivan
    Ivan dice:

    Ciao, ultimamente ho seguito questo tuo utilissimo corso su webipedia. Volevo chiederti se c’era la possibilità di aggiungere in qualche modo un effetto di rollover a delle immagini caricate nella media library di wordpress. Magari con un plugin che estende la library anche con questa opzione . grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Buongiorno Ivan,
      gli effetti non devono essere applicati alle immagini che sono nella libreria.
      I plugin, come i vari builder di pagina, e i temi, prendono l’immagine caricata nella libreria e la utilizzano nei loro moduli applicandogli, nel caso, un effetto di rollover.

      Quindi se il tema che stai utilizzando non ha dei moduli che ti soddisfano pienamente, allora puoi utilizzare i diversi plugin che ci sono in circolazione.

      Ho fatto una piccola ricerca, eccone alcuni:

      Amazing Hover Effects
      Image Hover Effects
      Anyhover Image Effects
      Image Magnify
      Responsive WordPress Image Effects
      InstaFX

      Detto questo, visto che siamo nel corso di HTML e CSS, aggiungo che per modificare lo stato di Over di un elemento html, abbiamo il selettore :hover che può essere utilizzato con vari elementi.

      Ecco un esempio:

      .over:hover, a:hover, p:hover  {
          background-color: #CCC;
          color: #333;
      }
      

Corso WordPress GRATUITO

INSERISCI NOME E MAIL PER ACCEDERE ALLE PRIME 19 LEZIONI.

Zero spam. Garantito.

Corso Wordpress Gratis

Inizia il Corso di WordPress GRATIS!

Inserisci nome ed email per avere l'accesso gratuito alle prime 19 lezioni del corso. Impara a costruire da solo il tuo sito web!

Ci sei quasi! Ti abbiamo mandato un'email per confermare il tuo indirizzo di posta.

Pin It on Pinterest