05 marzo 2013

Come aggiungere un bordo agli avatar dei commentatori e come renderli rotondi.

Dopo aver presentato un nuovo widget dei Top Commentatori rimango sempre in tema e vado a illustrare come adornare di bordo gli avatar di chi commenta il blog. Questa personalizzazione riguarda ugualmente anche l'immagine dell'autore del post e si ottiene mediante l'inserimento di un semplice CSS nel modello. Ricordo che gli stili dei bordi possono essere modificati a piacere tramite attributi e scegliendo appropriati codici dei colori. Mi riferirò esclusivamente agli ultimi template del Designer Modelli e ai commenti nidificati perché nulla si può dire sulle classi di stile di template scaricati da internet e i cui autori possono aver creato dei CSS con nomi qualsiasi.

I bordi si suddividono in solid (continui), dashed (tratteggiati), dotted (punteggiati), double (doppi). Ci sono poi anche altri attributi come inset, outset, ridge e groove che non è il caso di affrontare in questo post. Come prima modifica vediamo come visualizzare gli avatar in questo modo


commenti-avatar

dove intorno agli avatar sono stati inseriti dei bordi continui di 3 pixel. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

.avatar-image-container{
  border:3px solid #00FFFF !important;

quindi si salva il modello. Lo spessore del bordo, il suo stile e il suo colore possono essere personalizzati a piacere. Facciamo un altro passaggio e proviamo a mostrare gli avatar oltre che con un bordo anche in forma rotonda e con ombreggiatura

avatar-commenti-tondi

Per ottenere questo risultato bisogna aggiungere sempre sopra a ]]></b:skin> questo codice


.avatar-image-container,
    .avatar-image-container img {
     max-width: 48px !important;
     width: 48px !important;
     max-height: 48px !important;
     height: 48px !important;
     padding: 0 !important;
     border: 0px;
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
    }
    .avatar-image-container{
     margin-right:5px !important;
     border:3px solid #00FFFF !important;
     -webkit-box-shadow: 0 2px 3px #088;
     -moz-box-shadow: 0 2px 3px #088;
     box-shadow: 0 2px 3px #088;
    }

dove i parametri in rosso possono essere personalizzati a piacere. Ricordo che con Internet Explorer 9 o inferiori non possono essere visti gli arrotondamenti e quindi gli avatar continueranno a essere quadrati. Con il nuovo Internet Explorer 10 saranno invece visti come nello screenshot.


13 commenti:

  1. Grazie molto carino, l'ho subito aggiunto al blog

    RispondiElimina
  2. molto carino, grazie!
    Vorrei chiederti una cosa: avevo impostato che i commenti dell'autore del blog avessero un colore di sfondo diverso rispetto agli altri, ma da un po' di tempo questa cosa non viene più visualizzata. Che tu sappia succede anche ad altri o è un problema solo mio?

    RispondiElimina
    Risposte
    1. ovviamente l'avevo fatto seguendo un tuo tutorial (diciamo che ne sono certa al 99%) ma non riesco più a trovare il post in cui ne parlavi, altrimenti avrei commentato li

      Elimina
    2. @# Da quando sono stati introdotti i commenti nidificati tutte le personalizzazioni precedenti che riguardavano quell'area del layout non funzionano più perché è cambiato il codice. Puoi seguire quest'altro tutorial
      http://www.ideepercomputeredinternet.com/2012/09/blogger-commenti-discussione-autori.html

      Elimina
    3. Grazie Ernesto, me l'ero perso! Sei sempre gentilissimo e paziente :)

      Elimina
  3. Grazie al tuo modo semplice di spiegare mi sono buttata nella mia prima modifica del codice html. E ho persino cambiato il colore, wow è una conquista per me che non sono per nulla esperta. Grazie Ernesto

    RispondiElimina
  4. Ciao Ernesto ti scrivo qui perche ho trovato innumerevoli guide su argomento che dicono cose diverse a secondo anche del momento...

    Ho deciso di fare passaggio a dominio personalizzato...so che le cose sono un po cambiate...sai se ci sono problemi al momento? Mi linki una guida passo passo per questa transizione delicata?

    Grazie in anticipo
    Dino

    RispondiElimina
    Risposte
    1. @# Non ho acquistato nessun dominio dal cambiamento delle impostazioni. Forse i più utili potrebbero essere questi
      http://www.ideepercomputeredinternet.com/2012/10/dominio-personalizzato-blogger-google.html
      http://www.ideepercomputeredinternet.com/2012/09/blogger-dominio-personalizzato-dns.html
      http://www.ideepercomputeredinternet.com/2012/10/configurare-dns-dominio-personalizzato-blogger.html
      http://www.ideepercomputeredinternet.com/2012/09/blogger-dominio-personalizzato.html
      http://www.ideepercomputeredinternet.com/2010/11/cosa-fare-durante-il-passaggio-da-un.html

      Elimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @# Angy,
      E' evidente che se l'errore ti si presenta per qualsiasi modifica non dipende da questo codice. Gli unici che possono aiutarti sono i tecnici Google. Ma se hai già postato la domanda ...
      Ho fatto una rapida ricerca e ho scoperto che si tratta di un bug
      http://productforums.google.com/forum/#!topic/blogger/HdplqgGDhuw
      che dovrebbe essere risolto con un aggiornamento di Chrome e Firefox

      Elimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. Ciao Ernesto! Ho seguito la guida ma riscontro un problema fastidioso: il contenuto dei commenti non è centrato verticalmente, praticamente l'avatar mi risulta addossato al testo spostandolo di qualche millimetro. Inoltre non riesco a lasciare lo spazio tra avatar e testo... Sai aiutarmi? Non so se sono riuscita a spiegarmi :(

    RispondiElimina
  8. @# Credo di aver capito ma dipende anche dai codici ereditati da ciascun modello. Prova a modificare il parametro margin-right:5px aumentandone il valore in pixel

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.