Personalize seus comentários -Confira

Assim que eu entrei no blog ontem eu vi um comentário de uma leitora pedindo um tutorial : como deixar os comentários iguais aos meus (coloridos) , e eu disse que assim que eu fizesse outro post explicaria , bom está aqui ! Esse é um tutorial super fácil de fazer mais precisa de muita atenção  Ok ? 

Primeiro vocês vão precisar da tabela de cores online , escolha a cor que você quer para o Plano de fundo dos comentários. Com a cor escolhida vá até > Design > editar html > ctrl  f > #comments  achada essa tag , no seu html estará assim (ou parecido)

#comments {

                                                           background: #FFEBCD; none repeat scroll top center;

   padding: 15px;

}

A parte em vermelha será a cor do seu background , apague somente a seleção vermelha e coloque a cor que você escolheu . Depois de ter alterado o fundo vamos para os outros itens ?

 

Ainda no seu html procure novamente pela tg #comments { Logo depois da linha que você alterou seu background estara escrito : 

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #75cfd8;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;


}
.avatar-image-container {
margin: .2em 0 0;


}

Substitua esse código por esse : 

#comments h4 {
background:url(http://www._drikoti.blogger.com.br/back06.gif);
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
}




#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;background:url(http://www._drikoti.blogger.com.br/back06.gif);
}
#comments-block .comment-author {
Font-weight: bold;
color:#FFB5C5;
font-size:12px;
margin:.5em 0;
font-family:tahoma;
height: 30px;color:#FFB5C5;
line-height:2em;background:#F5DEB3;
}
#comments-block .comment-body {
background:url(http://www._drikoti.blogger.com.br/back06.gif);
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
background:url(http://www._drikoti.blogger.com.br/back06.gif);
line-height: 1.4em;
color:#111;border: 20px #FFE4E1;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 75;
font-size: 11 px;
line-height:1.5em;
background:#f1f1f1;;
color:#111;border: 3px #535456;
}


As cores em roxo significam : 1ª cor disse , 2ª cor data 

                                      em amarelo : A barra com o nome dos leitores