Como personalizar comentários!

Oi galera!

Hoje vim mostrar como personalizar os comentários,igual aqui no blog!

Clique em Leia Mais para aprender!

Vá ho html e procure por:

#comments

Apague todo o código:

 #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;}

No lugar coloque:

 #comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */margin:0;color:#ff4d8e;font-family: Lucida Handwriting;font-weight: normal;font-size:36px;text-shadow: none;}#comments-block .comment-author { /* O espaço do nome de quem comentou */background: #FFF; /*Cor de fundo do nome de quem comentou*/color: #8fddf6; /*Cor da fonte*/font-family: Trebuchet MS; /*Nome da fonte*/font-size:16px; /*Tamanho da fonte*/border-bottom: double 3px #8fddf6; /*Borda de baixo do nome*/padding: 5px;margin:.5em 0;height:30px; /*Altura do espaço do nome*/font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/}#comments-block .comment-author a:link {text-decoration: none;}#comments-block .comment-body { /* Area do texto do comentario */background: #000; /*Fundo da área do comentário*/margin-top: -2px; /*Margem externa do topo*/padding: 5px;font-family:Trebuchet MS; /*Nome da Fonte*/font-size: 12px;/*Tamanho da fonte*/color:#fff; /*Cor da fonte*/width: 500px; /*Largura da área dos comentários, altere de acordo com seu blog*//*Bordas arredondadas da área do comentário*/-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;/*Fim do código da borda arredondada*/}#comments-block .comment-footer {margin:7px 0 2em;line-height: 1.4em;font-size: 95%; /* tamanho da fonte da data do comentário */text-align: right; /* alinhamento da data do comentário */letter-spacing:.1em;}#comments-block .comment-footer a:link{background: #b9ff46; /*Fundo da data do comentário*/}.deleted-comment a {margin: 10px 0 2em;font-style: italic;color: #ccc; /*** cor do recado de 'comentário deletado' ***/}

Mude as cores etc...

Agora procure por:

/* Content

e  abaixo tem:

body {

Então cole antes da palavra:

div.avatar-image-container {-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/}div.avatar-image-container img {display:none;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;}/*Efeito de quando passar o mouse em cima da foto*/div.avatar-image-container img:hover {-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;opacity: 0.8; /*Opacidade*/-moz-opacity: 0.8; /*Opacidade*/-webkit-opacity: 0.8; /*Opacidade*/}div.avatar-image-container img.delayLoad {display:block;}

Fonte:Cherry Bomb!