Cambiare il colore dei punti elenco in Wordpress con CSS

Scopriamo insieme come cambiare il colore dei punti elenco in WordPress. Le soluzioni proposte sono generali, ma aggiungo anche un codice specifico per il tema Newspaper di TagDiv che uso io.

ATTENZIONE: le indicazioni presenti negli articoli sono fornite gratuitamente a scopo divulgativo e potrebbero essere non aggiornate o incomplete. Prima di acquistare, di prenotare o di partire, consultate sempre i siti ufficiali. Alcuni link in questo articolo sono link di affiliazione (anche i link ad Amazon*). Gli articoli aggiornati o pubblicati a partire da febbraio 2024 riportano un asterisco* accanto ai link di affiliazione.

Cambiare il colore dei punti elenco in WordPress e modificare il simbolo

La prima soluzione sostituisce i punti elenco con un carattere a vostra scelta.

Qui di seguito il codice commentato per il tema Newspaper di TagDiv. La parte ” .single .tagdiv-type ” specifica che questo codice va usato solo nel corpo dei post singoli. Senza la specifica ad esempio può essere visualizzato nei menu o in altri posti indesiderati

Il codice va aggiunto al vostro tema che di solito ha uno spazio apposito per il CSS personalizzato. Nel caso di Newspaper potete inserirlo direttamente nel template della pagina o del post con l’editor del tema.

.single .tagdiv-type ul {
  list-style: none;
} /*elimina la formattazione per gli elenchi puntati*/
.single .tagdiv-type ul li:before {
  content: '*'; /*cambia il simbolo da anteporre alle righe della lista*/
  color: #ff6b27; /*cambia il colore del simbolo*/
  display: inline-block; 
  width: 2em; /*dimensione dello spazio vuoto dopo il punto elenco*/
}

Qui di seguito il codice pulito:

ul {
  list-style: none;
}
ul li:before {
  content: '*';
  color: #01c4c4;
  display: inline-block; 
  width: 2em;
}

Il simbolo, identificato da “content” può anche essere inserito con il codice CSS relativo, un po’ meno intuitivo. Potete anche cercare i codici e inserirli o fare un copia-incolla verificando che il simbolo di partenza venga visualizzato su tutti i browsers.

Potete vedere i codici in questa pagina oppure potete copiare i simboli da questa pagina.

Ad esempio:

content: "\2022";  /*\2022 è il codice CSS/unicode per il punto classico */

Cambiare il colore dei punti elenco in WordPress senza modificare il simbolo

Un’altra soluzione possibile è quella di mantenere la struttura ed i punti elenco predefiniti, ma cambiare il colore. La soluzione ha un limite: il vostro elenco deve utilizzare <span> per identificare la parte di testo dopo il punto elenco, altrimenti tutto il testo prenderà il colore del punto elenco. Dovete provare, in alternativa rimane la prima soluzione che è quella che ho adottato io.

li { color: #01c4c4; } /* colore del punto elenco */
li span { color: black; } /* colore del testo */

Qui di seguito la soluzione per il tema Newspaper di TagDiv, che però non utilizza “span” perciò questa soluzione non cambia solo il punto in elenco, ma anche il colore del testo.

Non ho trovato una soluzione leggera per ovviare al problema, ritornate sulla pagina per eventuali aggiornamenti.

.single .tagdiv-type li { color: #01c4c4; } /* colore del punto elenco */
.single .tagdiv-type li span { color: black; } /* colore del testo */

La mia soluzione

Ecco come appaiono nel mio caso (ho adottato la prima soluzione):

• punto 1
• punto 2
• punto 3

Scopri cosa puoi fare

Leggi tutti gli articoli che ti aiutano ad aprire un blog di viaggi da zero.

Scopri come acquistare uno spazio dove ospitare il tuo sito e come muovere i primi passi con WordPress.

Pian piano ti accompagno in questo fantastico mondo, ogni mese guide trucchi e consigli.

Se invece stai programmando un viaggio controlla cosa mettere in valigia: la lista da stampare per il viaggio perfetto. Puoi anche stamparla e compilarla offline!

Clicca qui e risparmia oltre il 60% con l’hosting di SiteGround (è quello che uso io)

Arrivederci presto!