Personalizando a área dos comentários

A área dos comentários do modelo viagem é um cinza bem feinho. Separei 2 tutorial de personalização: um mais simples e outro nem tanto. Escolha somente um deles para colocar no seu blog.

Imagem e Borda no Fundo dos comentários!

 Vá em Design > Editar HTML > Ctrl + F > e procure por > #comments {

[Deve Aparecer Assim.]

#comments {
padding: 15px;

[Coloque Abaixo de padding: 15px;]

background-image: url(URLDAIMAGEM);
border:1px dashed #000000;

[Ficara Assim:]

#comments {
padding: 15px;
background-image: url(URLDAIMAGEM);
border:1px solid #000000;

[Para mudar a cor da borda use a >Tabela de Cor<]

hospede sua imagem e coloque onde esta escrito em cor de rosa,
background-image: url(URLDAIMAGEM)

Caso queira trocar o modelo das bordas, troque

border:1px solid #000000;

por alguma das bordar abaixo.
Veja como fica>click aqui<

border: 2px dotted #000000

border: 2px dashed #000000

border: 1px solid #0000FF

border: 4px double #FF0000

border: 3px groove #6666FF

border: 4px ridge #FFFFCC

border: 3px inset #FFFF99

border: 2px outset #6699FF

Fim!

 o tutorial de como personalizar a área de comentários, espero que gostem:

Desing > HTML > F3/Ctrl+F

Procure por:

#comments {

Caso não ache procure por:  #comments h4 {

Abaixo terá algo assim:

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

}

Substitua pelo seguinte código (continue lendo)..

#comments h4 {

  margin: 1em 0;

  font-weight: bold; 

  font-size: 90%;

  line-height: 1.4em;

  letter-spacing:.1em; 

  color: #33CCCC; /*** cor do "Postar um comentário" e "x comentários:" ***/

  }

#comments-block {

  margin:1em 0 1.5em;

  line-height: 1.6em;

  }

#comments-block .comment-author {

  background: #DADADA; /*** fundo do autor ***/

  font-size: 15px; /*** tamanho da fonte do nome do autor ***/

  margin:.5em 0;

  }

#comments-block .comment-body {

  margin:.25em 0 0;

  line-height: 1.4em; /*** espaço entre as linhas ***/

  padding: 8px; /*** margem interno da área do comentário ***/

  background: #F9F9F9; /*** fundo da área do comentário ***/

-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/

-moz-border-radius: 10px;

border-radius: 10px;

  }

#comments-block .comment-footer {

  margin:7px 0 2em;

  line-height: 1.4em; 

  font-size: 90%; /*** tamanho da fonte da data do comentário ***/

  text-align: right; /*** alinhamento da data do comentário ***/

  letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/

  }

#comments-block .comment-body p {

  margin:0 0 .75em;

  }

.deleted-comment {

  margin: 10px 0 2em;

  font-style: italic;

  color: #ERTGKL; /*** cor do recado de 'comentário deletado' ***/

  }

  Entendendo:

Padding: o espaço interior, para dentro da caixa./ Margin: é a margem exterior, para fora.

.deleted-comment {: É o conjunto que customiza quando você deleta algum comentário. Por exemplo, você deletou algum comentário do seu blog aparece essa frase né: "Esta postagem foi removida pelo autor."  Então, a frase ficará em itálico e cinza, se você não mudar nada no código, mais você pode modificar, claro.

line-height: line-height é a distância entre as linhas do texto / letter-spacing:  o espaço entre as letras da palavra. 

Créditos do Artigo:

http://novidadesdatekinha.blogspot.com.br/2012/06/personalizando-seu-proprio-layout.html

http://adolescentario.blogspot.com.br/2012/05/tutorial-personalizando-area-dos.html