Personalizando área dos comentários

Yoo~

Para o primeiro tutorial,resolvi trazer um tutorial que eu vi no Cherry Boomb eu só editei,por tanto se for usar os créditos são todos de lá.O tutorial é muito simples e o resultado é este aqui:

(clique para ampliar)

Gostou ? Quer aprender a fazer? clique em leia mais

Vá em Modelo>Editar HTML e procure por ]]></b:skin> Assim que encontrar,cole o seguinte código ACIMA da tag:

/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #eda5a4; /*Cor da fonte*/
font-family: 00284; /*Fonte do texto*/
text-transform: uppercase;
font-size: 22px; /*Tamanho da fonte*/}
text-align: center;
#comments {
background:url(http://i33.tinypic.com/k46otw.png); /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #ffe4ee; /*Cor de fundo do nome do autor do comentário*/
box-shadow: inset 0 0 10px #f9b5ce; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
text-transform: uppercase;
color: #faaac8 !important; /*Cor do nome do autor do comentário*/
font-family: 00284; /*Fonte do nome do autor do comentário*/
font-size: 20px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover { color: #fcc4d9 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinha á direita*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #F9F6F3; /*Fundo do bloco de texto do comentário*/
box-shadow: inset 0 0 10px #F6EBE1; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #faaac8; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}
.comments .comment .comment-actions a {
padding: 5px;
background: #FFA8B4; /*Fundo dos botões responder e excluir*/
text-transform: uppercase;
font-size: 12px;
box-shadow: inset 0 0 8px #F07F8F; /*Borda dos botões responder e exluir*/
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: Patrick Hand; /*Fonte dos botões responder e excluir*/
font-weight: normal; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;
}
.comments .comment .comment-actions a:hover {
background: #fcc4d9; /*Fundo dos botões responder e excluir quando passa o mouse*/
box-shadow: inset 0 0 8px #eac2ad; /*Borda dos botões responder e exluir quando passa o mouse*/
text-transform: uppercase;
color: #fff !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS************/

Prontinho,agora é só salvar e apreciar