Personalizando area de comentários

Para alterar o fundo cinza, vá no editor html do seu template (design → editar html) e procure (aperte Ctrl+F) por comments.background, você deverá encontrar esse trecho:

   <Variable name="comments.background" description="Comments Background" type="background"
       default="#cccccc none repeat scroll top center" value="#cccccc none repeat scroll top center"/>

Essa é a variável responsável pelo fundo da área dos comentários. Sendo assim, por padrão do modelo Viagem os comentários terão um fundo cinza. #cccccc é o código hexadecimal da cor cinza. Compreendida essa parte, vamos às alterações.

Para substituir o cinza por qualquer outra cor que você quer, basta colocar o código hexadecimal da cor desejada no lugar do código do cinza. Assim:

   <Variable name="comments.background" description="Comments Background" type="background"
       default="#FDF5E6  none repeat scroll top center" value="#FDF5E6  none repeat scroll top center"/>

Tem que colocar o código da cor nos dois locais indicados, caso contrário não irá funcionar! Se você quiser deixar o fundo da área dos comentários transparente é só colocar transparent no lugar do código da cor cinza. Mas atenção, o fundo transparente só vai funcionar se as suas postagens estiverem separadas em caixas. Ok? "Ok Micka, mas eu quero deixar o fundo dos comentários mais fofinho e colocar um bg muito lindo que eu encontrei, como eu faço isso?" Fácil, fácil!
No editor html do template, aperte Ctrl+F e procure por #comments {, você deve encontrar esse trecho:

#comments {
  background: $(comments.background);
  padding: 15px;
}

Como pode perceber, os comentários tem apenas o fundo determinado pela variável (comments.background) que é aquele fundo cinza ou a cor que você colocou na variável. Para colocar um bg é só substituir background: $(comments.background); por background: url (LINK-DO-BG) repeat; deixando o código dessa maneira:

#comments {
  background:  url (LINK-DO-BG) repeat;
  padding: 15px;
}

É só copiar o link do bg que você hospedou em qualquer site de hospedagem ou que você encontrou em algum blog/tumblr e colar no local indicado. Depois de fazer a alteração, salve o modelo e visualize os comentários de alguma postagem no seu blog. O resultado será esse.
Dá para deixar a área dos comentários bem fofinha, com alterações simples. Você pode colocar bordas arredondadas, borda, deixar da sua maneira (exemplo aqui). Agora que já ensinei o básico, vamos as alterações que fazem toda a diferença. =^.^=
Eu não vou dar um modelo pronto, vou mostrar o que pode personalizar, como personalizar e o que vocês podem acrescentar pra deixar os comentários mais bonitinhos. Ok?

• Personalizando o avatar
Aperte Ctrl+F e procure por esse trecho:

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

Esse é o código responsável pelos avatares das pessoas que comentam no seu blog. A personalização é livre, você pode deixar os avatares redondos, com bordas, com fundo colorido, isso fica a seu critério. Adicione no trecho acima (antes da chave destacada em negrito) os códigos das personalizações que você quer fazer nos avatares:

• BORDAS ARREDONDADAS

  border-radius:100px; /* tamanho da borda arredondada */
  height:60px; /* altura do avatar */
  widht:60px; /* largura do avatar*/

Para que os avatares fiquem redondinhos é necessário que a altura e largura da imagem tenham o mesmo tamanho, então coloque valores iguais como no código acima. Se você não quiser que os avatares fiquem tão redondinhos assim, basta subistituir o valor 100px por 10px, 5px... Você escolhe!

• BORDA & BACKGROUND

  border:1px solid #ccc; /* espessura, tipo e cor da borda */
  padding:2px; /* espaço entre borda e imagem */
  background: #eee; /* cor de fundo da imagem */

Personalize o código como quiser. Eu usei cores neutras, mas foi só pra dar um exemplo. Em padding:2px; você vai colocar o valor de acordo com a espessura do background do avatar e a distância entre borda e o avatar. Se você quiser uma espessura ou distância maior é só alterar o valor 2px (sugiro 4px ou 6px no máximo).

• CRAZY BORDER COM BACKGROUND

  border-radius:10px 25px / 25px 10px; /* arredondamento crazy das bordas */
  background: #000; /* cor do background do avatar */
  padding:6px; /* espessura do background */

Sugiro que não altere os valores do border-radius, caso contrário o efeito será diferente do modelo. Altere a cor do bg, diminua ou aumente o valor de padding, só não altere o border-radius. Ok?

Agora que já ensinei como personalizar os avatares, vamos personalizar o corpo dos comentários. Lembram que no início do post ensinei como retirar o fundo cinza? Pois bem, o fundo cinza é da área dos comentários, que abriga o nome de quem comentou, a data do comentário e o avatar. Se as suas postagens forem separadas em caixas e você decidiu retirar o fundo cinza e deixá-lo transparente, os comentários terão como fundo o bg do seu template. Entendeu?
Mas o que vamos fazer agora é dar uma cor de fundo para o corpo (texto do comentário), assim se as suas postagens forem separadas em caixas, apenas o texto dos seus comentários terão um fundo (como aqui no Camila's Designs).

• Personalizando o corpo dos comentários
Procure por #comments .comment-author { e acima disso cole o código seguinte:

.comments .comments-content .comment-content {
margin: 2px 8px; /* margens */
padding: 1px 5px; /* espaços entre texto e margens */
background: #eee; /* cor de fundo */
border: 1px solid #ccc; /* espessura, tipo e cor da borda */
}

 O resultado será assim:

No caso eu mantive as postagens juntas e dei uma cor diferente para o fundo dos comentários. Ficaria super fofinho se você deixasse a cor branca na área dos comentários e colocasse um tom pastel para o corpo (fundo do texto) deles. ^^
Agora vamos ao próximo passo que é personalizar o nome de quem comenta.

• Personalizando o nome do autor dos comentários
Procure por .avatar-image-container { e acima disso cole o código seguinte:

.comments .comments-content .user, .user a {
color: #000; /* cor do nome do autor do comentário */
font-style: normal; /* deixa a fonte sem itálico */
font-weight: bold; /* deixa fonte em negrito */
text-transform: uppercase; /* transformação do texto */
font-family: Consolas; /* fonte */
font-size:16px; /* tamanho da fonte */
}

Altere tudo o que quiser, coloque fonte personalizada, altere a cor, coloque borda, enfim. Isso é uma base e fica a seu critério a modificação dela. Bora para a próxima parte...

• Personalizando os links RESPONDER e EXCLUIR
Procure por /* Comments e acima disso você deve colar o código abaixo:

.comments .comment .comment-actions {
display: block;
list-style-type: none;
margin: 3px 0; /* margem entre links e corpo do comentário */
text-align: right; /* deixa os links na direita */
}
.comments .comment .comment-actions a {
color: #000; /* cor dos links */
margin: 7px; /* margem entre um link e outro */
padding: 2px; /* espaço entre os links e as margens */
}

Esse é o código base. Altere de acordo com a identificação, só altere o que está identificado. Ok? Para colocar um background de fundo nesses links e dar esse efeito de botão (como aqui no blog) acrescente background:#COR; abaixo de color:#000;. Se quiser colocar bordas arredondadas é só acrescentar border-radius:5px; abaixo do código do background. Entendido?