Personalizar o corpo da mensagem dos comentários (comment-body)

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Você já viu como aplicar estilos ao comando que se refere ao nome do autor dos comentários, o “comment-author”.

[alerta]
Atenção: O sistema de comentários do Blogger mudou! A eficácia da dica aqui apresentada não se aplica ao novo sistema de comentários.[/alerta]

Neste artigo vamos aprender a identificar e aplicar estilos ao comando que se refere ao corpo da mensagem dos comentários, o “comment-body”.
Para melhor entendimento deste tutorial, é necessário que você já esteja bem familiarizado com a sua área de comentários, se ainda não estiver, leia este artigo antes de prossseguir:
Desmembrando a Área de Comentários.

Nos templates padrões (minima) e na grande maioria dos templates, os estilos CSS para o autor dos comentários se apresentam da seguinte maneira:

#comments-block .comment-body { /* se refere ao corpo geral da mensagem dos comentários dentro do container geral */
margin:.25em 0 0;
}

Para definir cores para plano de fundo ao corpo da mensagem dos comentários:

Acrescente este trecho no código:

background:#6495ED; /* ---edite a cor ---*/

Acrescente também, espaçamentos.
Devendo ficar assim:

#comments-block .comment-body {
margin:.25em 7px 2px;
background:#6495ED;
padding:10px 10px 10px 10px;
}

Para aplicar bordas, acrescente:
border: 1px solid #000;
Devendo ficar assim:

#comments-block .comment-body {
margin:.25em 7px 2px;
background:#6495ED;
padding:10px 10px 10px 10px;
border: 1px solid #000;
}

Você pode aplicar o efeito de Bordas arredondadas e o efeito sombreado.
Veja o resultado:

Eu usei este código para definir os efeitos acima:

#comments-block .comment-body {
margin:.25em 7px 2px;
background:#6495ED; /* ---edite cor---*/
border: 1px solid #000;  /* ---edite borda---*/
padding:10px 10px 10px 10px;
-moz-box-shadow:5px 3px 10px #333;
-moz-box-shadow: 5px 3px 10px #333;
-webkit-box-shadow: 5px 3px 10px #333;
-khtml-box-shadow: 5px 3px 10px #333;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Lembre-se, este é apenas um exemplo, defina os estilos de acordo com as cores do seu template. Use a imaginação!

Personalizar a fonte do texto corpo da mensagem dos comentários:

Procure por:

#comments-block .comment-body p {
margin:0 0 .75em;
}

É neste trecho que você poderá definir as cores e o tamanho da fonte do texto.
Por exemplo:

#comments-block .comment-body p {
margin:0 0 .75em;
color:#000;
fonte-size:12px;
}

Se no seu template não tiver esta parte do código, acrescente-a e defina as cores e tamanho da fonte de acordo com seu gosto.

Um outro exemplo de personalização:

Digamos que você aplicou os estilos ao nome do autor dos comentários, de acordo com a imagem do “Exemplo 1” que expliquei no tutorial anterior, definiu cor de plano de fundo e borda arredondada, e queira definir a mesma cor de plano de fundo ao corpo da mensagem para que tudo pareça um bloco só.
Para dar um visual melhor, você pode alterar os trechos referente ás bordas no código do tutorial anterior, devendo ficar assim:

#comments-block .comment-author {
margin:.5em 0;
padding:5px 5px 0px 5px;
background:#6959CD;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
-khtml-border-radius:8px 8px 0 0;
}

#comments-block .comment-body {
margin: -.5em 0 0px;
background:#6959CD ;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom:1px solid #000;
}

Vejam o resultado:

Bom pessoal, agora é com vocês, eu não vou dar tudo mastigadinho, até porque o intuito deste tutorial é ensinar, fazer vocês entenderem este trecho da área de comentários e usarem a imaginação para vocês próprios conseguirem personalizar á maneira de vocês, de acordo com os seus gostos.
Portanto, mãos á obra!
O básico para o entendimento está ai, agora é só fazer testes, aplicar estilos e ver o resultado.

Para relembrar, segue a lista dos tutoriais desta série que já foram publicados:

1. Desmembrar a área de comentários
2. Personalizar Container geral de comentários “comments-block”
3. Personalizar nome do autor dos comentários “comment-author” ((não funciona no Designer de Modelo))
4. Personalizar o corpo da mensagem dos comentários “comment-body” ((não funciona no Designer de Modelo))
5. Personalizar o rodapé dos comentários “comment-footer” ((não funciona no Designer de Modelo))

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn