Aggiungere un'icona ai commenti del guestbook e del blog di WebSite X5

Oggi ci siamo divertiti ad inserire un'icona vicino al nome di chi scrive un commento utilizzando il guestbook o il blog di WebSite X5 12. Non un'icona qualsiasi ma la prima lettera del nick o nome del commentatore in stile app di Gmail.
Qui la nostra demo:

DEMO

Per riprodurre la nostra demo questi sono i semplici passi da seguire:

1. Nella Sezione Esperto → Prima della chiusura del tag HEAD in Proprietà Pagina del guestbook e/o del blog inseriamo questo codice CSS:
   

   <style>
   .letterIcon {
     width: 50px;
     height: 50px;
     text-transform: uppercase;
     border-radius: 50%;
     color: white;
     float: left;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 39px;
     margin-right: 10px;
     text-align: center;
   }
   </style>

   Queste regole CSS impostano lo stile grafico delle nostre icone, ad esclusione del colore di sfondo, e sono tutte personalizzabili.
   
2. Sempre nella stessa sezione inseriamo anche il codice JavaScript che si occupa di creare le icone con un colore di sfondo casuale:
   

   <script>
   /* ===============================================================
    Author's custom code: http://quellidelcucuzzolo.blogspot.it
    Please do not remove credit
    ============================================================== */
   var colori = ['6633ff', '3366ff', '33ccff', '3d00f5'];
   var nColori = colori.length;
   $(document).ready(function() {
     $('.topic-comment').prepend('<div class="letterIcon"></div>');
     $('.topic-comments-user span[itemprop="name"]').each(function() {
       var bgColor = colori[Math.floor(Math.random() * nColori)];
       var nome = $(this).text().trim().substr(0, 1);
       $(this).parents('div.topic-comments-user').prev().text(nome).css('background-color', '#' + bgColor);
     });
   });
   </script> 
   

   
   Per prima cosa definiamo nell'array colori i codici esadecimali dei colori che faranno da sfondo alle nostre icone:
   

   var colori = ['6633ff', '3366ff', '33ccff', '3d00f5'];

   Per comodità di scrittura ne abbiamo indicati solo quattro, ma ne potete aggiungere quanti ne volete, senza il simbolo cancelletto (#), separati da virgole e racchiusi tra apici singoli.
   Il codice si occupa quindi di creare un div con classe letterIcon in cui inserire automaticamente il primo carattere del nome o del nick di chi ci ha lasciato un commento.
   Il colore di sfondo di ogni icona viene scelto in modo casuale, tra quelli che abbiamo definito nell'array colori, ad ogni caricamento della pagina grazie al metodo Math.random() il cui funzionamento è già stato descritto in questo post.

Se vogliamo utilizzare lo script per più pagine possiamo ovviamente scrivere i codici in Impostazioni Avanzate → Statistiche, SEO e Codice → Esperto → Prima della chiusura del tag HEAD.

A partire da questo semplice script si possono creare numerose varianti per esempio creare un array associativo lettere → colori in modo che ad ogni lettera corrisponda un determinato colore di sfondo...  o quanto la vostra fantasia vi suggerisce.

Nota: nella demo abbiamo utilizzato anche QUESTO script per rendere il campo dell'indirizzo e-mail non obbligatorio.


 
Aggiornamento del 23/06/2016:

• Fixato script per l'uso del campo Sito Internet