Come creare un elenco con stile personalizzato.

Come creare degli stili CSS per elenchi personalizzati e salvarli nei Temi di Blogger e Wordpress per poi richiamare il nome della classe nei post con elenchi.

Il linguaggio HTML ha dei tag specifici per creare gli elenchi numerati e puntati. I primi si realizzano con il tag <ol> seguito dai tag <li> per ciascun elemento dell'elenco con i rispettivi tag di chiusura </ol> e </li>.

Gli elenchi puntati utilizzano sempre i tag <li> e </li> per i singoli elementi mentre il tag iniziale e quello finale sono rispettivamente <ul> e <ul>. A questa struttura di base possono essere aggiunti altri tag per rendere gli elenchi esteticamente più originali.

Si possono inserire dei marcatori diversi dai punti e dai numeri come per esempio i cerchietti, i quadratini, le cifre romane o le lettere greche.

Si possono anche creare elenchi nidificati cioè inserire un elenco in un altro elenco. Per modificare lo stile di un elenco si aggiunge un attributo nel primo tag <ol> o <ul>. Per esempio nel tag <ol> si aggiunge style="list-style:upper-alpha;" in questo modo <ol style="list-style:upper-alpha;"> per ottenere questo risultato

vale a dire un elenco che ha come marcatori delle lettere maiuscole. Se si aggiunge style="list-style:none;" l'elenco sarà senza marcatori. Si possono consultare nella pagina apposita del W3C gli altri possibili marcatori da aggiungere. Gli stili di elenchi più utilizzati sono i seguenti

1. disc: un cerchietto pieno
2. circle: un cerchietto vuoto
3. square: un quadratino
4. decimal: sistema decimale 1, 2, 3, ...
5. decimal-leading-zero: sistema decimale ma con due cifre: 01, 02, 03, ...
6. lower-roman: cifre romane in minuscolo. i, ii, iii, iv, ...
7. upper-roman: cifre romane in maiuscolo. I, II, III, IV, ...
8. lower-alpha: lettere minuscole. a, b, c, ...
9. upper-alpha: lettere maiuscole. A, B, C, ...
10. lower-greek: lettere greche.  α, β, γ, δ

dove le stringhe colorate di rosso possono essere sostituite a upper-alpha presa come esempio. Nel post linkato a inizio pagina possono essere trovate le istruzioni per creare elenchi nidificati e per iniziare gli elenchi da un numero diverso dal primo per creare elenchi su due o più colonne.

In questo post vedremo come creare un elenco personalizzato da usare nel nostro sito senza bisogno di doverlo impostare tutte le volte ma richiamando soltanto la regola CSS inserita nel Tema di Blogger o di Wordpress.

ELENCO COLORATO

Su Blogger si va su Tema -> Modifica HTML mentre su Wordpress si va su Aspetto -> Editor -> header.php (Testata). Si cerca la riga </head> quindi subito sopra a questa si incolla questo codice

<style> .elenco { background:#000; /* Colore di sfondo */}
.elenco ol li a { color:#f00; /* Colore del link */}
.elenco ol li a:visited {
color:#00f; /* Colore del link visitato */}
.elenco ol li a:hover {
color:#0f0; /* Colore del link al passaggio del mouse */}
</style>

Si salva il Tema in Blogger e si va su Aggiorna file in Wordpress. Ho scelto dei codici dei colori non proprio intonati per rendere l'aspetto dell'elenco personalizzato più semplice da interpretare.

La classe che ho creato l'ho chiamata .elenco. Tutte le volte che si vuole pubblicare un elenco personalizzato lo si crea con il bottone presente in tutti gli Editor come quello di Blogger, di Wordpress e di Open Live Writer. Occorre usare il bottone per gli elenchi numerati visto che ho usato il tag <ol>.

Si va poi in Modalità HTML e prima del tag <ol> si incolla un <div> con la classe .elenco in questo modo

<div class="elenco">
  <ol>
  <li><a href="#">Elemento 1</a></li>
  <li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li>
  </ol>
</div>

inserendo poi la chiusura </div> alla fine dello stesso elenco. Il risultato è il seguente

Non occorrerà quindi aggiungere sempre i codici dei colori ma basterà richiamare il nome della classe aggiunta nel Tema. Ovviamente il nome della classe .elenco è puramente indicativo.

ELENCO CON IMMAGINE COME MARCATORE

Al posto dei marcatori classici possiamo usare anche l'immagine di una piccola icona da caricare sullo spazio Wordpress o su Google Foto per gli utenti di Blogger che possono usare l'escamotage di postare una bozza. Possiamo anche usare due immagini, la prima per mostrarla in condizioni normali e la seconda al passaggio del mouse sopra il link. In questo caso il codice da aggiungere con la stessa modalità è il seguente

<style>
.elenco1 li {
list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBxBjAUdcFknxXACTlAgosDfIcZjO1ca6tKNv8F7yEfXWR-EGXYMNb_qOxhIueMY0ahBSaSvqGahk79cht83cTpmxeWVKSsoLVzHTkM3m3llhTRtgVws7YYQFazdqzLI7FL7dT6yBhjgQ/s10/check.png);}
.elenco1 li:hover {
list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYedecQ4mSTSUL6szOFsr1yn9eXJymw7f6TZFGoAZoQfs_6rIKDxgIXXzTwWz4WJj2GJnIkZnjBItbQJUcheoZQBo_-_WtTBo0oBJEVO9OhujYYT-2dViI1H2DDgsIGU-8E224kGsxsfyg/s10/red-check2.png);
}
</style>

con gli URL delle immagini che ovviamente possono essere personalizzati. Prima dell'elenco numerato in questo caso si aggiunge la riga <div class="elenco1"> e alla fine la riga </div> che produce questo risultato.

Anche il nome della classe .elenco1 è sostituibile con qualsiasi altro.

ELENCHI PIÙ COMPLESSI

Si possono creare degli elenchi anche più complessi con un aspetto decisamente originale. Per esempio incollando con le stesse modalità nel Tema di Blogger o di Wordpress un codice come il seguente

<style type='text/css'>
  .elenco2 ol{
  counter-reset:li;
  margin-left:0;
  padding-left:0
}
.elenco2 ol li{
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
  *list-style: decimal;
  }
.elenco2 ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;   top:-8px;
left:-39px;
font-family:Georgia; /* Famiglia di Font */
font-size:40px; /* Dimensione dei numeri */
width:34px;
margin:0 0 10px 0;
padding:4px !important;
color:#191919; /* Colore dei numeri */
text-align:center; }
  </style>

e precedendo l'HTML dell'elenco con la riga <div class="elenco2"> per poi mettere </div> alla fine si otterrà un risultato simile a questo

Infine come ultimo esempio vi posto questo codice da incollare nel Tema con le stesse modalità

<style type='text/css'>
  .elenco3 ol{ counter-reset:li; margin-left:0; padding-left:0 }
  .elenco3 ol li{ position:relative;     margin:0 0 13px 2em !important; padding:4px 8px !important; list-style:none; *list-style:decimal; }
  .elenco3 ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:0; left:-2em; width:27px; margin-right:8px; padding:3px 1px 4px 0 !important; color:#ffffff; /* Colore dei numeri */ font-size:16px; /* Dimensione dei numeri */ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFYl75pMpwmIvv8KdOON-NwTcFw-95eXkIL_zSfR-MdCHJX_fji5lbkJHtng7gmgVJvX86ALHtkD3thi_id983kiZCPyzn1r2fDS2hjKavP59kesBDn3DLuP6xz2iY_mgDvN9o1G0M4I/s28/cerchio.png) no-repeat left top; /* Immagine di sfondo */ font-weight:bold; text-align:center }
  </style>

Aggiungendo <div class="elenco3"> prima del codice dell'elenco e </div> alla fine avremo il risultato

dove si carica la icona del cerchio di sfondo dei numeri e si personalizzano gli altri parametri.