Emoticons sem borda
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
11 Comentários
Inscreva-se nos comentários.
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 :D tanto para emoticons, quanto para o design em geral de seus blogs.
Deixe um comentário
Faça um trackback
2 Trackbacks/Pingbacks
Clique para mostrar ou ocultar trackbacks.