Como customizar o CSS dos Threaded Comments do Blogger | Crazyseawolf's Blog
Você está em: Início » blogger » css » dicas » html » threaded comments » tutoriais » Como customizar o CSS dos Threaded Comments do Blogger
Como customizar o CSS dos Threaded Comments do Blogger
Ao implementar o Threaded Comments conforme ensinei aqui ou neste outro método no blog da Clau, o Mundo Blogger, o código CSS simplesmente desaparece nos templates customizados! Em templates nativos, ele é incorporado normalmente ao CSS do layout. Portanto ele tem que ser incluído no template.
Eis o CSS dos Threaded Comments, conforme já tinha mostrado neste post. Ele está envolvido em uma tag b:includable, que automaticamente é incluido no layout após a ativação:
Como disse antes, ele simplesmente desaparece nos templates fortemente customizados (como o meu, por exemplo). Devemos então incluir esse CSS antes de ]]></b:skin>. No meu caso, eu simplesmente apaguei o CSS antigo dos comentários e colei ele no lugar, já que não pretendo voltar ao sistema antigo. Implementei algumas customizações, e resolvi um problema que vi nos outros blogs, o fato do ícone do autor não aparecer. Na verdade, eu peguei um blog de teste e coloquei um template novo, onde esse código pura e simplesmente está correto, com todas as variáveis, e acrescentei outras de acordo com o estilo do meu layout.
Eis abaixo como eu fiz as minhas customizações, mas antes de mexer em seu layout, lembre-se:
1 - Faça um backup de seu blog, indo em painel de controle >> Modelo >> clique em Fazer backup/Restaurar, no canto superior direito.
2 - Em Modelo >> clique em Editar HTML >> Prosseguir >> Use control +F para localizar cada linha.
3 - E atenção? Faça essas mudanças por sua conta e risco. Se você não sabe, nem tente. Peça ajuda para quem sabe. OK?
box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-moz-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-webkit-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-goog-ms-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
.comments .inline-thread li {
/* Comments end
- A parte em laranja é o corpo dos comentários, .comments, onde eu modifiquei as margens e os paddings de acordo com o estilo que estava no blog. Coloquei cor no fundo(background) e bordas arredondadas (usando CSS3). Caso você não queira modificar nada, deixe como estava no original.
- A parte em vermelho é o que falta na maioria dos blogs, o ícone de autor, que aparece quando o dono ou administrador do blog comenta. Ele deve ser acrescentado em:
.comments .comments-content .icon.blog-author.
Nada deve ser mudado nesta classe, só acrescente a parte vermelha!
- A parte em verde, .comments blockquote, é uma classe que acrescentei, pois os threaded comments foram construídos para funcionar com o blockquote, e isso é um problema porque pode afetar customizações feitas pelos usuários que usam essa tag. No meu blog, este CSS não afetou essa tag, conforme pode ser visto no post do Crazy Links. Esta classe é o que personaliza os blocos de comentários:
border: 1px solid #cccccc; /* Aqui define uma borda, o tipo e a sua cor */
color: black; /* Aqui define a cor da fonte */
font: Helvetica; /* Aqui define o tipo da fonte */
padding:5px; /* Aqui define o espaçamento, ou a distância do texto à borda */
background: #ffffff; /* Aqui define a cor do fundo */
border-radius: 10px 10px 10px 10px; /* Aqui define o arredondamento da borda, se não quiser, pode apagar esta linha, bem como as três seguintes, pois elas fazem essa regra funcionar em outros navegadores, já que é CSS3, um detalhe, não funciona no IE  */
box-shadow: 0pt 0pt 5px rgb(0, 0, 204); /* Aqui define uma sombra na borda, se não quiser, pode apagar esta linha, bem como as três seguintes, pois elas fazem essa regra funcionar em outros navegadores, já que é CSS3, um detalhe, não funciona no IE */
list-style-type: decimal; /* Aqui define uma lista numérica */
- Para alterar as cores, use uma tabela como esta.
- Para alterar a fonte, use as próprias variáveis que existem em seu blog, elas são do tipo $textfont, $posttextfont, $sidebartextfont ou similar.
- As medidas em px deve estar de acordo com o layout de seu blog, vá alterando até encontrar a medida certa.
- De novo, se não quiser usar CSS3, arredondamento e sombra das bordas, apague-as. CSS3 não funciona no internet Explorer.
Outras customizações que podem ser feitas:
Os links Responder e Excluir podem ser customizados, com botões e mudanças de cores. É só acrescentar algumas regras CSS nas seguintes linhas: