Pubblicato il 14/01/12e aggiornato il

Come distanziare i commenti e cambiare i font nelle discussioni nidificate di Blogger.

Continuo nell'opera di personalizzazione dei commenti nidificati di Blogger mostrando come si possa aggiungere uno spazio maggiore tra di essi e come sia possibile modificare anche il tipo di font o famiglia di caratteri.
Se andiamo su Modello > Modifica HTML > Procedi e si espandono i modelli widget si può facilmente trovare un codice come questo semplicemente cliccando su F3 o su Ctrl+F




.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}

Modificandolo per esempio in questo modo


.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.2em;
}
.comments .comments-content {
  font-size: 13px;
font-family: Courier New;
  margin-bottom: 20px;
}

dove le modifiche sono state colorate di rosso si può per esempio ottenere un risultato di questo genere


Si può agire anche su tutti gli altri parametri. Mi riprometto in un prossimo post di analizzare tutte le possibili  personalizzazioni che possono essere fatte con i CSS dei commenti nidificati.





15 commenti :

  1. Grazie Ernesto, i commenti erano davvero inguardabili senza questa modifica! :)

    RispondiElimina
  2. Ciao, Ernesto.
    Vorrei capire i motivi per cui, su questo post (http://squittydentrolarmadio.blogspot.it/2015/01/ispirazioni-co-parigi-3-barbie-une.html), dopo aver inserito il codice di Inlinkz, la grandezza dei caratteri, a partire da "pubblicato da" in giù è completamente saltata. E' gigantesca!
    Questa si è verificato solo in questo post. Mi puoi aiutare?
    Grazie

    RispondiElimina
    Risposte
    1. Non conosco il codice Inlinkz
      @#

      Elimina
    2. Grazie per la risposta, arrivo tardi, ma sono stata ammalata.
      Il codice Inlinkz serve per dare la possibilità ai partecipanti ad un linky party di inserire i link ai propri blog tramite l'uso di un pulsante. Si genera in automatico, secondo i parametri che uno decide, usando il servizio offerto sull'apposito sito.
      A me è successo che, inserendo questo codice, i caratteri a partire da "pubblicato da" siano diventati giganteschi. Probabilmente è solo una coincidenza, perchè ho provato ad eliminare il codice e il problema sussiste comunque. Forse ho toccato io qualcosa senza rendermene conto.
      Ti domando, quindi, come faccio a far ritornare i caratteri alle dimensioni normali comuni ai commenti degli altri post? C'è il modo? Indipendentemente dal codice in questione?
      Grazie

      Elimina
    3. Il sistema migliore è quello di ripristinare lo modello che avevamo salvato prima delle modifiche o in subordine un modello precedente che abbiamo conservato
      @#

      Elimina
    4. Il sistema migliore è quello di ripristinare lo modello che avevamo salvato prima delle modifiche o in subordine un modello precedente che abbiamo conservato
      @#

      Elimina
  3. Non riesco a trovare queste righe... Quali widget devo aprire dal modello html?

    RispondiElimina
    Risposte
    1. Devi andare su Modello > Modifica HTML, cliccare sull'area del post quindi pigiare Ctrl+F e incollare .comments-content quindi pigiare su Invio. Visualizzerai il codice dei commenti. (I widget non c'entrano nulla)
      @#

      Elimina
    2. Però io ho due righe che contengono quel testo e sono entrambe diverse dalla stringa che hai postato.
      Una è:
      .comments .comments-content .icon.blog-author {
      L'altra:
      .comments .comments-content .loadmore a {
      E inserendo le dimensioni e il font non si modifica nulla nell'aspetto dei commenti...

      Elimina
    3. @# .icon.blog-author riguarda l'icona del commentatore quindi lascialo stare .loadmore invece è per i commenti nidificati. Il tuo blog è questo
      http://antigapalavra.blogspot.it/
      Hai questo codice

      .comments .comment-thread.inline-thread {
      background-color: transparent;
      }
      .comments .continue {
      border-top: 2px solid #666666;
      }

      Prova a inserire
      margin-bottom: 20px;
      oppure
      margin-bottom: 20px;
      subito sotto la riga con la parentesi graffa aperta

      Elimina
    4. Li vedo sempre uguali... Ho anche provato a cercare nell'html se ci fosse qualche "Times New Roman" da sostituire ma non ne trovo.

      Elimina
    5. Non so se possa interessarti per eventuali tutorial, ma ho seguito questo in inglese e sono riuscita: http://www.southernspeakers.net/2012/01/change-blogger-comment-font-size-and.html

      Elimina
    6. L'importante è che tu abbia risolto
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.