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:

Erro no CSS do emoticon.

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:

CSS correto.

PS: Érico, habilita emoticons aqui no pBlog? Hehe :D

Gerador de CSS para formulários

Form CSS Genarator

No site Form Style Generator é possível criar passo-a-passo o visual dos formulários do seu blog. Seguindo todas as etapas você poderá realizar o download do CSS e das imagens, caso utilize alguma como background, ao final do processo.

Como criar um tema para o WordPress – parte V

Tema Mighty Bom pessoal, estamos chegando a última parte deste tutorial e conforme prometido anteriormente, vou disponibilizar para download o tema que elaboramos durante todo este tempo. Para quem está chegando agora, é bom dar uma olhada nos posts anteriores deste tutorial, parte I, parte II, parte III e parte IV.

Antes de disponibilizar o tema, gostaria de esclarecer para quem acompanhou todo o tutorial, que fiz algumas modificações nos templates e adicionei mais alguns arquivos ao nosso tema, para que o mesmo ficasse completíssimo.

Os arquivos adicionados foram:

  • single.php – arquivo cuja função é exibir um único post. A única diferença para o index.php é a inserção da tag comments_template(), que insere o arquivo comments.php;
  • comments.php – tem a função de exibir os comentários e o formulário para comentar no arquivo single.php;
  • functions.php – torna o tema compatível com widgets.

Tenho certeza que, quem leu todas as partes do tutorial não terá dificuldades em entender os acréscimos que foram feitos. De qualquer maneira se alguém tiver alguma dúvida basta perguntar. Críticas, sugestões e opiniões são muito bem-vindos.

Espero que este tutorial tenha ajudado vocês a elaborar seus próprios temas, pois esse foi meu principal objetivo ao escrevê-lo. Quem quiser informações mais detalhadas sobre como elaborar um tema pode acessar o WordPress Codex.

  • Download do Tema Mighty – 2 colunas, XHTML/CSS válido, compatível com widget e totalmente em português.

[download]