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.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google