Personalizar os Comentários 2x1

|| ||

Oi pessoal desculpa não ter postado esses dias, pois meu computador estava com problema e tive que mandar para o concerto.
Mas vamos ao tutorial um não dois tutoriais em um post de como personalizar os comentários foi pedido da Brenda Jibant do blog Smile ofHappiness.
Mas quando se mexe na área dos comentários não dá para visualizar então é bom você baixar uma cópia do seu modelo ou faz como eu copia a parte que vai ser substituída e cola no blog de notas e se der errado pega e cola essa parte de novo no lugar.
Vamos lá ao primeiro.



Como mudar o fundo dos comentários
Fica assim

Vá em Modelo>>Editar HTML>>Aperte Ctrl+F ou F3 e procure por:
Comments
Você verá mais ou menos assim:
#comments {  background: $(comments.background);  padding: 15px;}
Ou assim:
#comments {
  padding: 15px;
}
Ou até assim:
.post-outer .comments {
  margin-top: 2em; }
Então logo abaixo de comments cole o código abaixo:
background: url(link da imagem de fundo) repeat;
Vai ficar assim:
#comments {
background: url(link da imagem de fundo) repeat;
  background: $(comments.background);
  padding: 15px;}
Ou assim:
#comments {
background: url(link da imagem de fundo)repeat;
  padding: 15px;
}
Ou assim:
.post-outer .comments {
background: url(link da imagem de fundo)repeat;
  margin-top: 2em; }
Agora é no lugar de link da imagem de fundo é só colocar a URL da imagem que você quer como fundo.
Para pegar a imagem veja esse tutorial aqui.

Personalizar a área dos comentários
Fica assim, mas mudando ele vai ficar do seu jeito

Agora a segunda forma e essa é um pouquinho mais complicada. Fica mais ou menos assim.

Vá em Modelo>>Editar HTML>>Aperte Ctrl+F ou F3 e procure por:
#comments
Você deverá pagar todo esse 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;
}
E no lugar colar esse código:
#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 do jeito que quiser. Agora personalizar a foto de quem comentou aperte Ctrl+F ou F3 e procure por:
/* Content
Abaixo deste trecho você vai ver quem tem isso: body { Você deve colar o código abaixo antes de body {
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;
}
Você pode mudar o efeito da imagem se quiser. Nesse código o efeito é a imagem redonda, que fica quadrada quando passa o mouse em cima.
Créditos: Cherry Bomb
Se quiserem tutoriais é só pedir na página de contato.