Pedidos de Tutoriais 3 Cont... - Personalizar área dos comentários

Oláaaaa Minhas Framboesas *---*
Como vão divos? *-* Espero que bem, hoje vou continuar com os pedidos de tutoriais okay ?? Este é o 3° pedido :

Nome :Elisa Cardoso
Blog/Site :so-pra-teens.blogspot.com
Tutorial que quer que eu poste :Quero saber como deixar minha área de comentários totalmente personalizada

Então vamos lá ...




CRÉDITOS DO TUTORIAL >>> GAROTA QUEEN

Resultado de como vai ficar :


Primeiro, vá no seu HTML e procure por #comments { Achou? Logo após essa parte, vai estar desse jeito:

#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}

Você vai apagar tudo isso e vai substituir por esse outro código (onde já tá tudo explicado):

#comments {
  background: #fbfbfb; /* background */
  padding: 15px;
}
#comments .comment-author {
  background: #FFECEC; /* fundo do nome de quem comenta */
  border-bottom: 1px dashed #FF8080; /* borda debaixo do nome */
  padding-left: 5px;
  padding: 2px;
  font-family: Century Gothic; /* fonte */
  text-transform: uppercase; /* transformação de texto, esse deixa todas as letras em MAIÚSCULAS, se não quiser, apague esse trecho */
  font-size: 14px; /* tamanho da fonte */
  font-weight: normal;
  letter-spacing: 2px; /* espaço entre as letras */
  color: #FF8080; /* cor do nome */
}
#comments h4 { /* texto onde fica "tantos comentários" */
  font-family: Century Gothic; /* fonte */
  font-size: 27px;
  font-weight: normal;
}
#comments-block .comment-body { /* área em que o comentário está escrito */
  background: #f0f0f0; /* fundo da área do comentário */
  padding: 5px;
}
#comments-block .comment-footer { /* texto onde fica a data */
  padding: 2px;
  text-align: right; /* lado da data */
  border-bottom: 1px dotted #000000; /* borda debaixo da data */
}
#comments-block .comment-footer a:link{
  background: #fbfbfb; /* fundo da data do comentário */
}
#comments .comment-author:first-child { /* isso não é nada */
  padding-top: 0;
  border-top: none;
}
.avatar-image-container { /* aqui é a personalização da foto, daí você que escolhe se vai personalizar ou não */
  margin: .2em 0 0;
}

É só seguir tudo direitinho, no código já está tudo explicado e é só editar de acordo com sua preferência . Daí se gostarem e usarem, vocês dão os créditos, ao Garota Queen ok ?

CRÉDITOS DO TUTORIAL >>> GAROTA QUEEN