segunda-feira, 19 de setembro de 2011

♥ Tutorial- Personalizando a área dos Comentários

Como vocês já devem ter visto, nossa área dos comentários é personalizada. Se você quiser personalizar a sua é só continuar lendo e prestar muita atenção. Vi esse tutorial no blog Tudo para Mim | Maratona de Tutoriais ele me ajudou muito então estou disponibilizando aqui para vocês. Vamos Lá!

1. Vá em Editar HTML.

2. Aperte F3 e procure por  #comments {


3. Deve estar mais ou menos 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;
}

4. Substitua todo o código acima por esse:

#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' ***/
  }


  OBS.

Padding/Margin: É a margem interna, o espaço interior, para dentro da caixa. Já margin é a margem exterior, para fora. Entenda mais sobre padding e margin aqui.

  line-height/letter-spacing: line-height é a distância entre as linhas do texto, e letter-spacing é o espaço entre as letras da palavra. Ou seja, a palavra fica mais "solta".

  .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.

Outra OBS.
Para obter o código das cores clique aqui.


Como ja disse antes, todos os créditos ao blog Tudo para Mim| Maratona de Tutoriais.
Se não conceguirem, acessem esse blog que eu peguei o tutorial. Ta bem explicadinho.

Nenhum comentário:

Postar um comentário