Modelo para área dos comentários - Base [005]

O modelo trata-se de uma base explicativa, você pode criar um modelo por cima. Os créditos pela base vão para Mundo Blogger e The Moon Reverse, ele é bem simples mas muito fácil de entender, otimo para aplicar efeitos. O testei em diversos modelos, e funcionou muito bem. Espero que gostem, se tiverem duvidas ou dificuldades, comente. =)

~~Modelo~

1. Vá até o HTML e procure pela área de comentários, geralmente ela é demarcada com /*comments, ao achar apague toda essa parte e substitua toda a área própria pelo código seguinte:

Códigos

.comments{ /* Conteúdo que vem acima do h4, fonte do texto dos comentários */
clear:both;
background-color: none;
margin-top: -5px;
margin-bottom:0;
line-height:18px;
font-size: 11px;
}
.comments .comments-content{ /* Fundo da área de comentários (Corpo) */
margin-bottom: 6px;
font-weight:normal;
text-align: justify; /* Alinhagem do texto */
background: transparent; /* Deixe assim se não quiser um fundo */
}
.comments .comment .comment-actions a,.comments .comment .continue a{
background: #e8e8e8;  /* Cor de fundo do botão responder */
border:1px solid #C0C0C0; /* Borda do botão responder */
padding-top: 2px; /* Acolchoamento de cima */
padding-bottom: 2px; /* Acolchoamento de baixo */
padding-left: 3px; /* Acolchoamento da esquerda */
padding-right: 3px; /* Acolchoamento da direita */
margin-bottom: 3px; /* Espaçamento externo de baixo */
margin-left: 2px; /* Espaçamento externo da esquerda */
margin-right: 2px; /* Espaçamento externo da direita */
display:inline-block; /* Para que fique em caixas */
text-align:center;
text-decoration:none;
width: 54px; /* Largura do botão responder */
line-height: 17px;
font-weight: normal;
cursor: pointer;
font-family: "Calibri";
font-size: 11px;
color: #999;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /* Botão hover */
text-decoration: none;
background:#fff;
border:1px solid #999;
}
.comments .comments-content .datetime a{ /* Data dos comentários */
font-size: 11px;
text-decoration:none;
color: #000; /* Cor do link */
text-align: right; /* Alinhamento do texto */
float: right;
}
.comment-content{ /* Código "de dentro" do bloco de comentários */
margin: 4px;
padding: 0 4px;
}
.comment-header{ /* Linha do nome do autor (Fundo) */
background-color: #f1f1f1; /* Cor de fundo */
font-size:18px;
border-bottom:1px solid #C0C0C0;  /* Cor da borda */
padding:5px;
}
.comment-header a{ /* Nome do autor do comentario (Fontes e cor) */
color: #000; /* Cor do link */
}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .comment-block{
margin-left: 46px; /* Espaço entre o avatar e o corpo do comentário*/
margin-top: 2px; /* Espaço de cima */
background: #fff; /* Fundo do bloco de comentários */
border: 1px solid #C0C0C0; /* Borda que fica em torno de todo o bloco */
}
.avatar-image-container{ /* Foto do "comentarista" (Tamanhos) */
width:50px !important; /* Mude a largura se preferir */
height:50px !important; /* Mude a altura se preferir */
max-width:58px !important; /* Nâo será necessário mexer */
max-height:58px !important; /* Nâo será necessário mexer */
}
.comments .avatar-image-container img{ /* Foto do "comentarista" (Personalizar) */
padding:1px;
border:1px solid #ccc;
background: #fff;
-moz-opacity: 0.73;
-khtml-opacity: 0.73;
opacity: 0.73;
filter:alpha(opacity=73); /* Se preferir retire */
-webkit-transition-duration: .10s;
}
.comments .avatar-image-container img:hover{ /* Personalizar hover */
-moz-opacity: 0.98;
-khtml-opacity: 0.98;
opacity: 0.98;
filter:alpha(opacity=98); /* Se preferir retire */
-webkit-transition-duration: .50s;
}
/* Não apague essa parte, deixe-a sem mexer */
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;
}

Agora você salva o modelo e prontinho.