1.1.12

Repostando... como editar a area dos comentários

| |
Bom gente, esse tutorial foi o primeiro tutorial do blog, só que acho que ninguém viu, rsrs, então vou repostar. É sobre como editar a area dos comentários do blog.



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 e no lugar dela cole:

 /* Main Comment
-----------------------------------------------*/

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

0 pégasos voaram para o Olimpo: