terça-feira, 14 de fevereiro de 2012

Como customizar o CSS dos Threaded Comments do Blogger 2

Conforme eu tinha prometido, eis como customizar o CSS dos links Responder e Excluir, a fim de que eles pareçam como se fossem botões. Leia primeiro este post para saber do que estou falando. Abaixo como ficou neste blog:

CSS nos links Responder e Excluir

Mas antes de mexer no layout de seu blog, 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 entende. OK?

Portanto, vamos lá! No CSS dos Threaded Comments, procure por estes pedaços de códigos:

.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}

O CSS acima dá os estilos para os links Responder e Excluir. Pode-se trocá-lo pelo código abaixo, com a customização necessária, exatamente como fiz neste blog:

.comments .comment .comment-actions a {
background:#6fa8dc;
cursor:pointer;
color:#ffffff;
font:9px sans-serif;
padding:2px 3px; 
margin-right:10px;
border:1px solid #6fa8dc;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; 
background:#9fc5e8; 
border:1px solid #9fc5e8;
}

Para trocar as cores do fundo (background), texto (color) e da borda (border), use uma tabela de cores como esta, por exemplo.
Mude as medidas em px da fonte(font) e borda(border) como queira. Mas não mexa nas paddings e margins, a não ser que fiquem desajustadas no seu blog.

Usei CSS3 para dar estilos arredondados aos botões dos links, mas eles não funcionam no Internet Explorer, mas sei que você deve já saber disso. Só digo uma coisa, use qualquer outro navegador, que com certeza, é bem mais decente.

Observação: Os links de respostas não se alteram, conforme se vê na imagem. Tentei aplicar o mesmos estilos mas ficam um tanto quanto estranhos. Assim que eu resolver, eu posto aqui as customizações.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google