Tutorial: Editando os comentários

Hey coisinhas cutis! Tudo bem com vocês? Hoje, depois de MESES (isso mesmo, meses) pesquisando no Google e em outros sites, pesquisando em templates que tinham o que eu queria e revirando meu HTML de cima a baixo, eu finalmente consegui encontrar um modo facil e quase 80% a prova de erros de arrumar o seu Comentários daquele jeito fofo. Para ver o tutorial clique em Leia Mais:



Bom, para começar, tenho que avisar que alguma dúvida, comente e eu irei responder, e mais um avisinho: copie e TODA o HTML do seu Layout e cole no Bloco de Notas, porque quando se edita comentários não tem como visualizar, então você tem que salvar primeiro, ok? Bom, agora vamos ao tutorial!



Vá em Design, Editar HTML, dê CTRL+F e pesquise por:

/* Posts

Deverá estar assim (ou parecido):

  /* Posts
----------------------------------------------- */
h3 {background-color: #E0EEEE ;}
h3.post-title {
text-align: center;
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
}

.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}

.post-body {
  line-height: 1.4;
  position: relative;
}

.post-header {
  margin: 0 0 1em;

  line-height: 1.6;
}

.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}

#blog-pager {
  font-size: 140%;
}

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

Apague TODA a area em vermelho. Depois procure por ]]></b:skin> e cole ACIMA dele o seguinte código::

#comments h4 {
color:#FFC0CB;
font-weight:bold;
letter-spacing:0;
line-height:1.4em;
margin:1em 0;
text-transform:none;
font-size: 15px;
padding: 0 0 0 15px;
}
#comments a{
color:#FF69B4;
text-decoration:none;
font-weight:teacher_a;
}
#comments a:hover{
color:#D8BFD8;
text-decoration:none;
font-weight:bold;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #D8BFD8;
margin:0.5em 0;
padding-bottom:4px;
padding-left:8px;
padding-top:4px;
}
#comments-block .comment-body {
border-left:1px solid #c5c0b7;
border-right:1px solid #c5c0b7;
margin-top:-6px;
padding-left:10px;
padding-top:10px;
}
#comments-block .comment-footer {
border-bottom:1px solid #c5c0b7;
border-left:1px solid #c5c0b7;
border-right:1px solid #c5c0b7;
font-size:11px;
line-height:1.4em;
margin:-0.25em 0 2em;
padding-bottom:5px;
padding-left:10px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0;
padding-bottom:15px;
}

 A area em Azul é a cor da faixa de nome dos comentários e a area em Laranja é a fonte.



Fácil né. Comentem aí o que acharam do tutorial e se tiveram alguma dúvida. Comente também se deu certo ou errado e se quiser deixe o URL do seu blog, terei o maior prazer em visita-lo e segui-lo.

Beijos, B.