Personalizado área dos comentários

Ola galera hj eu trouxe um tutorial bem legal de como você personalizar a área do comentários é bem fácil, mas antes de tudo baixe o modelo completo do seu layout ok?

vamos la...

*Ps: feito no Modelo viagem> Travel do blogger

Vá em modelo>editar html>prosseguir 

depois abra a caixinha de pesquisa ctrl+f e digite dentro  #comments {

Vc vai achar esse código abaixo.

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


/* Comments
----------------------------------------------- */
#comments a {
  color: $(post.title.text.color);
}


.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}


.comments .comments-content .loadmore a {
  border-top: 1px solid $(post.title.text.color);
  border-bottom: 1px solid $(post.title.text.color);
}


.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}


.comments .continue {
  border-top: 2px solid $(post.title.text.color);
}

OK apague todo esse código e  coloque esse no lugar...

.comments {

background: #ffffff repeat;

color: #696969;

border-radius:15px;

margin:0px 22px 0px; /* ---edite as medidas ---*/

width:630px ;  /* ---defina a largura se quiser ---*/

padding: 20px; /* ---edite as medidas ---*/

border:px solid #723233; /* ---Coloque borda se quiser ---*/

}        }

.avatar-image-container img {

border:2px solid #519AB4;

float:right;

padding: 0px;

}

.comments .comments-content .comment-content {

background: none repeat scroll 0 0 #FFE9ED;

margin-top: 5;

padding: 13px;

text-align: justify;

font-family: georgia;

font-style:italic;

border-radius:10px;

}

.comment-header {

background: none repeat scroll 0 0 #CCCCCC;

color: #000000;

padding: 13px;

font-family: georgia;

font-style:italic;

font-size: 14px;

line-height: 14px;

margin-bottom: 0;

margin-top: -5px;

}

#comments h4 {

margin: 0 0 10px;

padding-top: 0;

padding-right: 14px;

padding-bottom: 2px;

padding-left: 29px;

font-size: 120%;

line-height: 1.4em;

}

.comment-actions {

background: none repeat scroll 0 0 #CC99CC;

border-radius:10px;

float:right;

margin-left: px;

padding: 4px;

}

#comments a:link, #comments a:visited, #comments a:active, #comments a:hover{

color: #000000;

}

.blog-author-comment {

margin:.25em 0 0;

}

.comment-author {

background: none repeat scroll 0 0 #FBBC35;

color: #FFFFFF;

margin: 0.5em 0;

padding: 5px;

}

.comment-body {

margin: 0 0 1.25em;

padding-top: 0;

padding-right: 0;

padding-bottom: 0;

padding-left: 20px;

}

.comment-body p {

margin: 0 0 .5em;

}

.comment-footer {

margin: 0 0 .5em;

padding-top: 0;

padding-right: 0;

padding-bottom: .75em;

padding-left: 20px;

}

sua área de comentários vai ficar assim...

bom galera coloque imagem de fundo se quiser use sua criatividade espero que tenham gostado bjosss