Em muitos temas, as imagens, quando inseridas na coluna dos posts, aparecem com bordas, margens e [coloque a tradução de padding aqui]. Esse recurso propicia um resultado final bacana, mas quem usa emoticons nos textos acaba sofrendo com um efeito colateral óbvio dos enfeites em imagens: os emoticons do sistema também são afetados.
Quer ver um exemplo? Então veja:
Notou como fica? As soluções mais fáceis são eliminar os efeitos, ou adicioná-los manualmente. O problema da segunda opção é que se no futuro o tema for mudado, corre-se o risco dos efeitos das imagens não combinarem com o novo visual.
As soluções fáceis são essas, mas existe uma um pouquinho mais difícil, porém com resultado totalmente satisfatório.
Abra o style.css do seu tema, e no final dele, acrescente a seguinte linha:
img.wp-smiley { border:0; padding:0; margin:0; }
A mágica é simples. Os emoticons padrões do WordPress são introduzidos nos textos com a classe CSS .wp-smiley. Logo, basta acrescentar alguns atributos na folha de estilo, e todos os emoticons se comportarão uniformemente.
Colocando essa linha no final do arquivo, a classe incluída no código do emoticon sobrepõe-se à regra geral para imagens. CSS usado com inteligência é isso.
A propósito, se os emoticons não aparecem em seus textos, verifique se o recurso está habilitado no WordPress. Vá em Settings, depois em Writing, e certifique-se de que a opção Convert emoticons like :-) and :-P to graphics on display está marcada.
Vejam a mesma imagem acima, porém com o código do CSS incluído:
PS: Érico, habilita emoticons aqui no pBlog? Hehe :D
efeaf : 28 Maio 2008 às 8:25 pm
padding eh espacamento, nobre padawan
LuizHT : 29 Maio 2008 às 12:53 am
Muito boa a dica, essas bordas realmente enchem o saco.
Guilherme Funchal : 29 Maio 2008 às 11:27 am
Obrigado pela dica, antes meus emoticons ficavam com essa borda chata :)
Abraço
Eduardo Marques : 29 Maio 2008 às 12:18 pm
Bela dica mesmo!
Eduardo Marques : 29 Maio 2008 às 7:34 pm
No meu blog está funcionando somente na página inicial. Quando eu entro em um link permanente, a imagem volta a ficar com bordas. Já tentei alterar isso de diversas formas, todas sem sucesso. Alguém poderia me ajudar?
Érico Oliveira : 30 Maio 2008 às 8:48 am
Rodrigo, eu já tinha ativado o emoticons, porém eles acabam com o layout dos comentários. Quando trocar de tema eu prometo que os ativarei. :)
Matheus Bonela : 01 Junho 2008 às 2:18 pm
Haha, não troca não, érico, esse já é a identidade do pBlog…
Eduardo Marques : 05 Junho 2008 às 4:10 pm
Alguém pode me ajudar? Não consegui resolver meu problema.
Kahuê Moraes : 06 Junho 2008 às 2:56 pm
òtima dica! Só assim as pessoas que tinham problemas com bordas não terão mais :D tanto para emoticons, quanto para o design em geral de seus blogs.
Dicas Weblogs» Blog Archive » Como tirar bordas dos emoticons : 02 Agosto 2008 às 12:40 am
[...] pBlog This entry was written by Lucas Monteiro and posted on August 2, 2008 at 3:13 am and filed under [...]
Como tirar bordas dos emoticons : Dicas Weblogs : 03 Agosto 2008 às 12:33 am
[...] pBlog This entry was written by Lucas Monteiro and posted on August 2, 2008 at 3:13 am and filed under [...]