Il colore dei punti elenco può aiutare i tuoi contenuti a distinguersi meglio. Può anche renderlo un pugno nell'occhio se i colori si scontrano.
Su alcuni dei più grandi siti Web online, gli elenchi sono prominenti, ma raramente sono i generici cerchi neri rotondi che vengono visualizzati come standard quando si inserisce un elenco puntato in WordPress.
È necessario apportare modifiche allo stile dei punti elenco per farli apparire come vorresti. Non devono nemmeno essere codificati direttamente da WordPress.
Puoi utilizzare i caratteri Unicode per inserire simboli, sostituire i punti elenco con immagini o, se il tuo stile esistente va bene, andare avanti e aggiungere un elemento di stile del colore per cambiare solo il colore.
Di seguito sono riportati i passaggi da eseguire, i codici da utilizzare e le istruzioni per modificare il foglio di stile del tema WP o il personalizzatore CSS per rendere i tuoi punti elenco di qualsiasi colore, forma, carattere o immagine che desideri.
Come cambiare il colore dei punti elenco in WordPress
Il metodo più semplice è modificare il personalizzatore del tema con CSS. In alternativa, è possibile modificare WP Style.css per modificare il colore del punto elenco. Gli elenchi puntati sono controllati da elementi 'li'. Questi possono avere colori e gli stili possono essere modificati o rimossi per essere sostituiti con immagini o caratteri Unicode.
Modifica dei colori dei punti elenco modificando il foglio di stile del tema (Style.css)
Per trovare il foglio di stile del tuo tema, scorri il menu della barra laterale di sinistra, passa il mouse sopra la voce di menu 'aspetto' e seleziona l'opzione 'editor di temi'.
Come individuare il file style.css di WordPress
Il file style.css è il foglio di stile per il tema WordPress. Se stai utilizzando un tema framework come Genesis o Divi, è probabile che ci sia un tema figlio.
Apporta le tue modifiche al tema figlio e non a un tema genitore, che consiste in tutta la codifica in un framework.
Identifica il nome della classe da modificare
Su ogni modello di WordPress, il nome della classe utilizzato per controllare lo stile dei punti elenco è diverso. La maggior parte usa la stringa CSS .entry-content ul li, altri nominano gli elementi dell'elenco con dei marcatori.
Per trovare il nome della classe, passa con il mouse su un elenco puntato, fai clic con il pulsante destro del mouse e seleziona ispeziona. Si aprirà una nuova schermata che mostra la codifica dietro il contenuto.
Il nome visualizzato nell'ispettore è l'elemento nel foglio di stile da modificare per cambiare il colore del punto elenco o lo stile generale.
Avrai bisogno del nome dell'elemento div per aggiornare il foglio di stile o per modificare WP Customizer. L'unica differenza rispetto alla modifica è dove metti il codice.
Modifica gli elementi per dare uno stile ai tuoi punti elenco WordPress
Nella stragrande maggioranza dei fogli di stile per i modelli di WordPress, i punti elenco vengono aggiunti in una sezione specifica per gli 'elementi'.
Questo controlla i caratteri, gli stili degli elementi dell'elenco, il colore del testo, gli stili delle virgolette e la dimensione, il carattere e il peso delle intestazioni.
I punti elenco sono voci di elenco e sono inseriti come “liste ordinate” abbreviate nei codici come “ol”, e “liste non ordinate”, abbreviate come “ul”. Gli elenchi ordinati utilizzano i numeri. Gli elenchi non ordinati utilizzano i punti elenco. Cerca la sezione che controlla gli stili di 'ul'.
testimoni di geova da guinness dei primati
L'esatta riga di codice è 'ul, li', solitamente separata da un'interruzione di riga, quindi lo stile per i punti elenco viene aggiunto dopo il codice 'li'.
Ad esempio, l'utilizzo del tema Customizer per sovrascrivere tali impostazioni rende blu l'elenco puntato e i relativi elementi.
Per cambiare il colore dei punti elenco, aggiungi quanto segue al personalizzatore CSS
.entry-content ul li {
list-style: square;
color: #2E89FF;
}*cambia i numeri con qualsiasi valore di colore esadecimale. Se non conosci il codice esadecimale, cerca un selezionatore di colori online.
Modifica del colore del punto elenco senza modificare il colore del testo
Il codice sopra cambierà il colore del punto elenco e il testo inserito all'interno di un elenco puntato.
Se preferisci che ciò non accada, puoi utilizzare il personalizzatore CSS per ignorare lo stile del tuo tema e sostituirlo con il tuo CSS personalizzato.
Vai al menu del tuo aspetto, seleziona Personalizza, quindi usa il codice qui sotto:
ul {list-style: none}
li::before {content: "➣"; color: blue;
display: inline-block; width: 1em;
margin-left: -1em}Il CSS precedente utilizza un carattere Unicode per sostituire il punto elenco standard. E poiché utilizza il contenuto 'prima', solo il punto elenco cambia colore.
Il testo rimane dello stesso colore e carattere. Cambia solo lo stile del punto elenco.
Per utilizzare solo il punto elenco standard in un colore diverso, invece di un carattere Unicode, copia e incolla un punto elenco standard (il cerchio, il quadrato o qualsiasi altra forma) al posto del carattere Unicode.
li::before {content: "•"; color: blue;
Lo styling dei punti elenco di WordPress in base alle tue preferenze
Numerosi elementi possono essere modificati per trasformare i tuoi proiettili nello stile che desideri.
È possibile modificare il riempimento del margine per aumentare o diminuire il rientro, modificare il carattere, lo spessore del carattere e lo stile del punto elenco.
Lo stile elenco per i punti elenco può essere:
- Cerchio
- Piazza
- Disco
- Decimale
Gli elenchi numerici possono essere modificati con
- Zero iniziale decimale (01. voce di elenco 1, 02. voce di elenco 2, ecc.)
- Lower-roman (i. voce di elenco 1, ii., voce di elenco 2, ecc.)
- Upper-roman (I. per voce di elenco 1, II, per voce di elenco 2, ecc.)
- Nessuno (ne parleremo più avanti)
Ecco come appaiono le modifiche.
Scambiare i punti elenco con le immagini
Negli stili sopra elencati, potresti essere sorpreso di vedere 'nessuno' come opzione. Perché dovresti includere un elenco puntato solo per nascondere i punti elenco?
Saresti anche informato come indentare il testo in WordPress .
L'opzione per nessuno stile è come impostarla come quando si desidera visualizzare invece un'immagine di sfondo.
La dimensione delle immagini da utilizzare per i punti elenco funziona al meglio a 16 px per 16 px o 20 px per 20 px. Più grande, dovrai aumentare l'interlinea per allineare correttamente il testo.
Per utilizzare un'immagine come punto elenco, caricala prima nella libreria multimediale di WordPress, quindi copia l'URL dell'immagine.
Nello screenshot qui sotto, l'icona è stata ridimensionata a 20 x 20.
Il codice da usare è
.entry-content ul li {
list-style-image:url(http:www.yoursite.com/wp-uploads/image-title.png);
}Ricordati di ridimensionare la tua immagine prima di caricarla. Altrimenti, dovresti aggiungere più codice CSS per ridurre l'immagine e non sarà di grande qualità.
Ignorare le immagini utilizzando i caratteri Unicode
I caratteri Unicode sono come gli emoji. Ci sono migliaia di personaggi e non tutti sono faccine.
Ci sono opzioni da cuori d'amore che potrebbero essere utilizzate per creare un elenco puntato dei tuoi cibi a basso contenuto di carboidrati preferiti o croci per fare elenchi puntati di cose da non fare.
Per trovarli, cerca sul Web 'Caratteri Unicode'. Ci sono siti dedicati alla manutenzione delle loro biblioteche. Alcuni sono come directory di nicchia.
Per utilizzarli, non è necessaria la codifica in quanto i caratteri possono essere copiati e incollati direttamente nel personalizzatore del tema di WordPress.
Il codice deve essere diviso in due in modo che ci sia una sezione 'prima' per mostrare i caratteri dell'immagine e una certa spaziatura tra il carattere dell'immagine e i caratteri del testo.
Inizia inserendo il CSS per modificare l'elenco puntato:
.entry-content ul li {
list-style-type: none;
}Quindi aggiungi una nuova sezione per aggiungere il personaggio prima degli elementi dell'elenco.
.entry-content ul li:before {
content: "♥";
padding-right: 10px;
color: red;
}Il risultato dovrebbe assomigliare a questo:
A seconda del tipo di carattere Unicode, alcuni possono avere il colore modificato. Nell'esempio sopra, il carattere del cuore era nero prima che il colore fosse cambiato in rosso.
Tuttavia, dipenderà dal dispositivo che visualizza gli oggetti. Alcuni non riconoscono Unicode allo stesso modo e possono visualizzare il carattere nel suo formato colore originale.
abs cbn nuovo teleserye 2017
Domande frequenti relative a come cambiare il colore dei punti elenco in WordPress
È meglio modificare il tema o utilizzare WP Customizer per definire lo stile dei punti elenco?
Gli aggiornamenti del tema WP possono ignorare le modifiche apportate ai modelli di file. Il personalizzatore del tema mantiene le modifiche. Tieni presente che solo i temi figlio devono essere modificati. Non il tema principale. Dopo ogni aggiornamento, il foglio di stile dovrà essere aggiornato per ripristinare le modifiche. Le modifiche al WP Customizer vengono trasferite con gli aggiornamenti WP.
È possibile modificare il colore degli elementi dell'elenco puntato e avere un colore del testo diverso?
Quando imposti il codice colore per gli elementi dell'elenco in CSS, si applica a tutti gli elementi dell'elenco in modo che sia possibile applicare un solo colore. Usando il tipo di stile elenco: nessuno; elemento, le immagini possono essere aggiunte, quindi il singolo colore verrebbe applicato al testo. In questo modo puoi utilizzare qualsiasi colore dell'immagine e un colore del carattere personalizzato per gli elementi dell'elenco.