23 aprile 2015

Graphic Tricks #4: Modificare la grafica dei commenti

Buongiorno miei cari! :D
Oggi io è Giusy abbiamo pensato di rispondere ad una delle domande che ci avete fatto tramite il google form che trovate sulla barra laterale.
Gaia ci chiede come cambiare la grafica dei commenti sotto ai post.
Non ci resta che rimboccarci le maniche ed iniziare! Speriamo di essere le più chiare possibili. Ma come al solito, se avete dubbi siamo a vostra disposizione!

La cosa migliore è procedere con un esempio. Vi faremo vedere come sia possibile ottenere il risultato sulla destra a partire dalla grafica che trovate nell'immagine a sinistra.


Ogni commento di un utente è racchiuso in un tag html identificato dalla classe comment-block. Quindi (ricordando la nostra prima lezione) andate su →Modello →Personalizza →Avanzato →Aggiungi codice CSS e aggiungete il seguente codice.

.comments .comment-block{
}

qui dentro andremo ad inserire tutte informazioni necessarie per modificare il colore di sfondo, bordo (tipo e colore), la dimensione e il tipo di font. Ecco come ho fatto per ottenere il risultato in figura:

.comments .comment-block{
      color: #555;
      position: relative;
      margin-top: 10px;
      margin-left: 60px;
      padding: 10px;
      font-family: Courier, Cambria, Times;
      font-size: 13px;
      background: #efefde;
      border: 1px solid #c497a3;
}
Andiamo a vedere cosa fa ogni elemento:
  • color: ha come argomento il colore che vogliamo utilizzare per visualizzare il testo. Io solitamente uso HTML Color Picker per trovare il codice esadecimale (#555 è detto hex color) che corrisponde al colore che ho scelto.
  • position:, margin-top:, margin-left: e padding: servono per posizionare l'elemento .comment-block rispetto agli altri elementi della pagina. Vi consiglio di mantenere i valori che trovate nell'esempio. Dovrebbero andare bene per tutti.
  • font-family: e font-size: ormai dovreste conoscerli. (Vedere Fonts e loro utilizzo per un ripasso).
  • background: ha come un argomento un colore espresso, ancora una volta, in hex. Qui specifichiamo il colore di sfondo che vogliamo utilizzare. In questo caso è questo.
  • border: permette di definire il bordo del nostro blocco commenti. Ho scelto un bordo con uno spessore di 1px, un tipo solid (che corrisponde ad una linea continua) e dal colore rosato. Per modificare lo spessore basta sostituire il numero di pixel (1px, 2px ecc...). Al posto di solid potreste aggiungere per esempio dashed o altre variati che vedremo in modo più approfondito in qualche altra puntata.
Vedete il colore grigiastro di sfondo al commento di risposta (immagine sinistra)? 
Con il solo codice che abbiamo aggiunto purtroppo resterebbe ancora. Per eliminarlo dobbiamo inserire sempre in Aggiungi CSS il seguente codice:

.comments .comment-thread.inline-thread{
     background: none; }
Adesso vediamo come modificare la grafica per le azioni Rispondi ed Elimina di ogni commento per ottenere questo risultato:

Come sempre basta aggiungere il seguente codice:
.comments .comment .comment-actions a{
     font-size: 10px;
     font-family: Courier;
     color: white;
     background: #c497a3;
     margin-right: 2px;
     padding: 2px;
     letter-spacing: 2px;
}
  • margin-right: l'ho aggiunto per distanziare tra di loro di 2px i due elementi Rispondi ed Elimina.
  • padding: 2px serve a specificare la distanza, in questo caso, del testo rispetto al bordo del pulsante.
  • letter-spacing: serve a specificare la distanza delle lettere tra di loro.
Per finire, per ottenere un effetto fumetto potremmo aggiungere un triangolino che precede il blocco commenti e che punta all'immagine avatar! Ancora una volta andiamo in Aggiungi CSS:
.comment-thread li .comment-block:before{
     content: "\25C4";
     color: #c497a3;
     position: absolute;
     display: block;
     left: -17px;
     top: -10px;
     font-size: 28px;
}
  • content: ha per argomento il codice unicode relativo al triangolo pieno che abbiamo scelto di utilizzare.
  • position: e display: potete lasciarli come su.
  • left: (o top:) ci serve per spostare più a sinistra o più a destra (o più in alto o più in basso) l'elemento indicato da content.
  • font-size: come sempre indica la dimensione che in questo caso deve avere il triangolo
  • Nota: se modificate font-size molto probabilmente dovrete modificare anche top e left per allineare correttamente il triangolo al blocco dei commenti!
Per ora è tutto! Speriamo di esservi state d'aiuto. :D
E perché no? Potreste farci vedere il vostro risultato!
Nym

12 commenti:

  1. E anche questa volta grazie mille per le dritte!!!

    RispondiElimina
  2. Grazieee *_* volevo chiedervi rimanendo in tema risposte, io ho impostato lo sfondo delle risposte con un colore grigio che stona con il resto (non delle singole risposte, ma di tutto), dove posso andare per modificarlo e impostarlo come voglio io? ecco uno stamp: http://i.imgur.com/WdiOQxq.png mi piacerebbe metterlo nero come lo sfondo... grazie scusate il distutbo (-:

    RispondiElimina
    Risposte
    1. Ciao Jessica! Scusa l'estremo ritardo con cui ti rispondo! Prova a mettere, sempre in Aggiungi CSS, questo codice:

      .comments{
      background: black;
      }

      se ho ben capito cosa vuoi ottenere questo dovrebbe funzionare! :D

      Elimina
  3. Siete uniche guiro.. Mi state aiutando Tantissimo!!!! Grazie Grazie infinite!
    *^*

    RispondiElimina
  4. Scusate per il ritardooooooo MA! Infine son qui!! GRAZIE <3 <3 <3
    Siete gentilissime!! E anche molto pazienti! Mi metto subito all'opera sperando di non combinare danni (come al solito xD)

    RispondiElimina
  5. Ciao ragazze! Ho appena scoperto questo blog, complimenti è davvero fantastico! Questo tutorial mi è stato moltissimo d'aiuto e l'ho subito applicato al mio blog :) Grazie mille!

    RispondiElimina
  6. Grazie mille: il tutorial mi è stato proprio d'aiuto *-*

    RispondiElimina
  7. Grazie ragazze tutorial fantastico vi prego continuate sono perfetti :-)

    RispondiElimina