Comentários personalizados

Olá, amanhã é natal! O tutorial que trouxe hoje é de como personalizar os comentários, estou muito feliz por finalmente ter conseguido fazer. Fiz esse modelo de comentários com cores bem neutras, caso vocês não estejam com muita paciência de ficar trocando e tudo mais. Mas, caso vocês queiram trocar as cores, deixei explicado no código o lugar de cada coisinha. Os comentários vão ficar desse jeito:


Vá no seu HTML e procure por /* Comments, você encontrará algo assim:

/* Comments
----------------------------------------------- */

E mais abaixo, você encontrará algo assim:

/* Footer
----------------------------------------------- */

Copie tudo o que estiver entre essas duas partes e deixe salvo em algum lugar no seu computador. Assim, se der algum problema, você pode colocar o seu código de volta.

Daí, depois de salvar para evitar problemas, o que você tem que fazer é apagar tudo o que estiver entre essas duas partes e substituir pelo código abaixo:

/* Comments
----------------------------------------------- */
.comments .comments-content .comment-content{
/* Caixa com o comentário */
background: #f6f6f6; /* Cor da caixa */
border: 1px solid #efefef; /* Borda da caixa */
font-family: Arial; /* Fonte */
font-size: 11px; /* Tamanho da fonte */
padding: 10px;
margin-top: -4px;
}
.comment-header {
/* Caixa com o nome do autor do comentário */
background: #e7e7e7; /* Cor da caixa */
border: 1px solid #d1d1d1; /* Borda da caixa */
font-family: Arial; /* Fonte */
font-size: 11px; /* Tamanho da fonte */
padding: 5px;
font-weight: normal;
}
.comments .comments-content .comment-header .datetime a {
float: right;
}
.comments h4 {
/* Lugar onde fica escrito "X comentários" */ font-family: Arial;
font-size: 20px;
}
.comments .avatar-image-container {
/* Foto do autor do comentário */
width: 35px; /* Largura */
height: 35px; /* Altura */
padding: 3px;
background: #e7e7e7; /* Cor do fundo da foto */
border: 1px solid #d1d1d1; /* Borda da foto */
}
.comments .comment .comment-actions a,.comments .comment .continue a{
/*Botão de responder comentário */
background: #e7e7e7; /* Cor do botão */
border: 1px solid #d1d1d1; /* Borda do botão */
color: #000000; /* Cor do texto */
font-family: Arial; /* Fonte */
font-size: 11px; /* Tamanho da fonte */
margin-right: 5px;
padding: 5px;
-webkit-transition-duration: 0.40s;
}
.comments .comment .comment-actions a:hover {
/*Botão de responder comentário ao passar o mouse */
background: #d1d1d1; /* Cor do fundo */
-webkit-transition-duration: 0.40s;
}

Feito isso, é só salvar e está pronto.
Espero que tenham gostado, abraços e feliz natal!