quinta-feira, 22 de janeiro de 2009

Como estilizar o formulário de comentários

Não sei se alguns de vocês já notaram que eu consegui acertar a posição do formulário de comentários do blog? Lembram que a mensagem nos comentários e a caixa ficavam coladas a borda? Bem, eu só fui resolver essa questão quando conheci o blog do Fernando, o Randomness. O blog é escrito em espanhol, já que o Fernando é do Equador. O pior é que eu tenho trauma dessa língua. Não consigo entender nada e me dá um branco!

Dê-me qualquer coisa escrita em inglês que eu entendo na hora, mas a língua espanhola me trava por completo. Levei tempo para entender o artigo, mas consegui centralizar o formulário.
No artigo "Entendiendo el formulario de comentarios", o Fernando ensina como estilizá-lo da maneira que você quiser. Eu só queria mesmo é dar um jeito de centralizá-lo.



O Fernando cria uma div, com a class "comment-form" envolvendo todo o código do formulário, para achá-lo vá em Lay-out>>Editar HTML, marque expandir modelos de widget e procure por essa linha:
<b:includable id='comment-form' var='post'>
Em negrito, a class criada:
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/>v/h4>
<p><data:blogCommentMessage/>v/p>
<data:blogTeamBlogMessage/>
va expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'
height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>

Abaixo a parte do CSS que eu adaptei para o meu blog. A primeira parte relaciona-se com a caixa e a segunda com a mensagem do formulário:

div.comment-form{
width: 450px; /*definimos, em pixels, o comprimento da caixa, que pode variar de blog */
margin: 0 auto; /*centralizando a caixa*/
padding: 0 auto;
}

div.comment-form p{
color: $mainTextColor; /*cor da fonte, no caso a cor é vermelha, */
font-family: 'Trebuchet MS'; /*tipo da fonte*/
font-size: 12px; /*tamanho da fonte*/
text-align: left; /*alinhamento do texto*/
}

O CSS deve ser colocado antes de
]]></b:skin>

O resultado pode ser visto abaixo:


Em tempo, implementei uma política de comentários e um código para quem quiser divulgar seu último link, créditos a Ro e ao Marcelo. Tentei até colocar o CommentLuv, mas não gostei do resultado final. Prefiro manter do jeito que está. Pelo menos meu blog está lá cadastrado e assim, ao visitar outros blogs que o utilizam, posso "linkar" as minhas postagens.

7 comentários:

  1. Nice blog.. Have a great day! ^_^

    ResponderExcluir
  2. Voce esta falando em grego pra mim, porque eu nao sei nem o que é Class e nem pra que serve :(;

    ResponderExcluir
  3. Nurta San: Thanks for the visit! :o)

    Iara: Class é um atributo que é feito no código. É onde você define a cor, a fonte e tudo mais.
    Você aprende!!!

    ResponderExcluir
  4. Cidão, "num credito" quando você diz que não consegue ler espanhol!! Mas olha, acho que o Fernando tem uma versão em inglês do blog (e aí é sua praia, né?)

    Obrigadinha pela referência, viu? E gostei do texto da política de comentários (emoboiolismos foi ótimo.... ahahaha)

    Beijos!

    ResponderExcluir
  5. Rô: Espanhol me trava por completo,ainda ben que o código css é universal!!! :o)

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google