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.

Ciao, hai una domanda su questa lezione?

Iscriviti al sito o effettua il login


  1. blu116
    blu116 dice:

    Ciao Lorenzo, hai ragione non sono state molto chiaro, intendevo dire che in un tema WP solitamente ci sono delle classi e degli stili già stabiliti riguardo testi e titoli, supponiamo di voler fare una body differente da tutte quelle esistenti avrei bisogno di creare una nuova classe, es carattere times, size 40, colre bianco, spaziatura 3 ecc, una volta fatta questa nuova classe dove posso inserirla perche possa essere vista? ho provato nella bacheca dove si mettono i css ma non succede niente…

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Blu,
      la risposta che ti ho dato in precedenza è ancora valida.
      Se puoi inserire dei CSS nella bacheca allora penso che hai già un plugin installato che ti ha creato questa possibilità.
      Inoltre fra i temi professionali, ad oggi tutti danno la possibilità di personalizzate la tipografia del sito, come i paragrafi, i titoli ecc…
      In ultimo se hai scritto degli stili per il body e supponiamo che li hai inseriti correttamente, ma non vanno, allora vuol dire che hai altri stili applicati a tale elemento che hanno la precedenza. Dovresti per esempio vedere chi dichiara il tag p e sovrascrivere quella dichiarazione. Nel tuo caso dovresti vedere chi dichiara la dimensione ed il colore del testo che vuoi cambiare e sovrascrivere quella dichiarazione.

      Buona giornata

  2. blu116
    blu116 dice:

    ciao grazie per il vostro sito molto utile, una informazione, se volessi scrivere una nuova classe per un sito WP riguardante l’inserimento di una body in alcune pagine, una volta fatto questa classe dove posso metterla? oltre al foglio di style css di proprietà WP grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Blu,
      l’inserimento di una body in alcune pagine” proprio non so cosa mi vuoi dire.
      se devi dignarare un CSS il primo posto dove guardare è nelle impostazioni del tema.
      Se è un buon tema ha questa funzione (miraccomando non scrivere nel foglio di stile del tema stesso. Al primo aggiornamento che fai perdi le tue modifiche).
      Altrimenti lo puoi fare un child theme.
      Se non vuoi una delle due soluzioni precedenti allora puoi valutare l’utilizzo di un plugin come WP Add Custom CSS.

      Buona giornata

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

  4. 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;
      }
      
Non vuoi fare da solo?

Non vuoi fare da solo?

Per realizzare il tuo progetto o per risolvere qualsiasi problematica, rivolgiti al nostro Team di professionisti.

oppure chiamaci allo 02.9843140

You have Successfully Subscribed!

Pin It on Pinterest