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
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
padding eh espacamento, nobre padawan
Muito boa a dica, essas bordas realmente enchem o saco.
Obrigado pela dica, antes meus emoticons ficavam com essa borda chata
Abraço
Bela dica mesmo!
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?
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.
Haha, não troca não, érico, esse já é a identidade do pBlog…
Alguém pode me ajudar? Não consegui resolver meu problema.
òtima dica! Só assim as pessoas que tinham problemas com bordas não terão mais
tanto para emoticons, quanto para o design em geral de seus blogs.
Pingback: Dicas Weblogs» Blog Archive » Como tirar bordas dos emoticons
Pingback: Como tirar bordas dos emoticons : Dicas Weblogs
Hi!
xoxoxo
I made on photoshop animated myspace pics.
have a look at them:
http://tinyurl.com/5w2eqc
Thank you for your website
O bom disso tudo é que a dica pode ser usada a qualquer tempo. Hoje precisei saber como resolver essa borda do emoticons, uma pesquisa no Google, uma referencia ao seu post e o problema está resolvido.
Muito obrigado.
Eu não li e nem quero lê pq isso tudo não me importa é uma grande BOSTA.
EU ADOREI FOI MUITO LEGAL , EU TAYS DE OLIVEIRA VELOSOOOOOOOOOOOOOOO GOSTEI MAS DO QUEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE TODO O MUNDO
Um estilo para as imagens, estava anulando os novos estilos adicionados. Aí, eu usei o "!important" e tudo resolvido!
Não funcionou nom meu D: