Posts Tagged ‘ CSS


Related Posts For "como customizar css wordpress":

Como adicionar a opção “Imprimir este artigo” 06 Novembro 2008 às 4:09 pm por Érico Oliveira

Imprimir um artigo não é tão interessante para blogs de maneira geral, quem é que imprime os artigos do pBlog? Ninguém. De qualquer forma eu adicionei um link na página dos posts para testar este recurso. Porém, em alguns projetos, é muito interessante ter este recurso, por exemplo, em um site sobre culinária é legal ter esta facilidade para imprimir as receitas, afinal você não vai levar o notebook para junto do fogão, ou vai??! :)


<a href="javascript:window.print()">imprimir este post</a>

O código acima ativa a opção de impressão do navegador e será ele que você adicionará ao seu tema, mas aí você me pergunta: qual a vantagem de colocar um link que apenas irá abrir o quadro de impressão? Agora é que vem o pulo do gato, antes de inserir este código você deverá criar um estilo CSS só para impressão, assim você terá uma formatação específica para tal finalidade.

O novo tema do pBlog, por exemplo, não tinha um estilo CSS para impressão, então eu tive que criar um e não foi nada complicado. Baseado nas dicas do CatsWhoCode criei o seguinte estilo, que chamei-o de print.css:


html {width:100%}
body {background-color: #fff; color: #000; font-size: 12pt;}
a {color: #000;}
img {border: 0;}
#header, #menu, #footer, #sidebar, .postmeta, .navPost, #related, .inAds, .commentlist, #commentform {display:none;}
h1, h2 {page-break-before: auto;}
p {page-break-inside: avoid;}

Você pode e deve copiar este código para criar o seu print.css, a única alteração a ser feita será na linha 05 onde será necessário adicionar os ID’s e classes do seu tema que não deverão aparecer na impressão. Por exemplo, de cara eu adicionei o #header, #menu, #footer, #sidebar, com a propriedade display:none;, assim estas partes do site não aparecerão na hora de imprimir. Depois dei mais uma olhada no código e fui adicionando outras partes que gostaria que não fossem impressas.

Por último será adicionado no header.php a chamada do estilo CSS para impressão, este código deverá estar entre as tags <head> e </head>. Agora basta ligar a impressora!


<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />

Esta dica eu encontrei no blog WP Recipes, que a cada dia trás ótimos códigos para customizar o WordPress. Se você manda bem no inglês adicione-o ao seu leitor de feeds imediatamente, caso contrário, acompanhe o pBlog. :)

Trabalhando as legendas nas imagens do WordPress 2.6 Por Rodrigo Ghedin dia 19 de Julho de 2008 às 4:50 pm | Imprimir este post

Uma das grandes novidades do WordPress 2.6 é a inserção de legendas (captions) nas imagens. Funciona assim: o texto alternativo (alt=”qualquer coisa”) aparece abaixo da imagem, no post, caso o autor assim o queira. Se você atualizou seu sistema, mas ainda assim nada aconteceu em relação às legendas, ou elas apareceram sem formatação alguma, nada tema! O pBlog lhe ajuda a corrigir isso.

Antes de adentrarmos à edição, cabe uma breve explicação sobre o funcionamento das legendas. No editor, se você alterar o modo de exibição para o HTML, verá que há tags envoltas por [colchetes], cheias de atributos, responsáveis pelas legendas em torno das imagens. Não é preciso mexer em nada, só estou comentando a título de curiosidade ;-) .

No post, já publicado, em torno da imagem aparece uma DIV com classe wp-caption, e dentro dela, limitando a legenda em si, a DIV com classe wp-caption-text. É editando-as que teremos o efeito desejado, bastando, para tal, criatividade do editor (e talento em CSS, claro). Funciona assim, mais ou menos:


<div class="wp-caption"><img title="Imagem" src="caminho-da-imagem.jpg" alt="Imagem" />
<p class="wp-caption-text">Pôster de WALL•E.</p>
</div>

Se CSS não é sua praia, esqueça o que leu acima, e simplesmente copie e cole o conteúdo abaixo em seu stylesheet.css:


.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Este é o código que foi incluído no tema padrão do WordPress, e gera o efeito presente nos blogs do WordPress.com, que por sua vez, pode ser conferido em meu blog pessoal. Bacana, não?

Como se vê, o trabalho é feito em cima das duas classes de DIVs comentadas acima - e nem poderia ser de outra forma. Este código, bastante complexo, mostra bordas arredondadas sem o uso de imagens, o que é deveras legal. Ele não impede, porém, que você mesmo crie sua formatação para as legendas. Basta saber um pouco de CSS, e ter imaginação, para ser diferente ;-) .

Como adicionar o seu logotipo em um tema WordPress Por Érico Oliveira dia 04 de Julho de 2008 às 7:31 pm | Imprimir este post

Dúvida bastante freqüente entre os leitores do pBlog, a substituição do título do blog (texto) por um logotipo (imagem) é uma customização que personaliza e dá uma identidade própria ao blog. O problema para explicar como fazer tal substituição é que isso varia de tema para tema, pois nem todos são codificados da mesma forma. Por isso escolherei um tema para exemplificar este mini tutorial.

Tema Maggo MagO tema que escolhi já estava até separado para comentá-lo, então vou aproveitar este post para fazer as duas coisas, divulgar o tema e explicar como adicionar um logotipo. É bom deixar claro que existem muitas formas de fazer isso, eu vou explicar a que acho melhor.

O tema escolhido foi o Maggo Mag, ele possui 3 colunas, local para publicidade pré-definido, código HTML/CSS válido e é compatível com Firefox, IE7 e Opera. Demo e download.

Agora que vocês já conheceram o tema vamos por a mão na massa. Primeiro vamos eliminar o título e o subtítulo, mas para isso não é necessário apagar o código do arquivo PHP, basta adicionar o parâmetro “display:none;” nas IDs “#header h1” e “#header h2” no arquivo style.css, além de ser mais simples é melhor para os mecanismos de busca. Lembre-se que estas modificações são para este tema, para fazer o mesmo em outro tema você deverá procurar as ID’s ou classes correspondentes ao título e subtítulo para adicionar o parâmetro mencionado.

Renomeie a imagem do seu logotipo para “logo.jpg“, copie-a para a pasta “images” do tema e abra o arquivo header.php, logo após a linha:

  1. <h2><?php bloginfo('description'); ?></h2>

Adicione o código da imagem da seguinte forma:

  1. <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory');?>/images/logo.jpg" alt="Logotipo" /></a>

Fácil não? Acredito que este método sirva para a maioria dos temas com código HTML/CSS válido.

Microsoft Visual Studio 2008 Por Érico Oliveira dia 25 de Junho de 2008 às 11:19 pm | Imprimir este post

Visual Studio 2008Novamente fui convidado a escrever um publieditorial aqui no pBlog, desta vez sobre o Visual Studio 2008, que foi lançado oficialmente no início deste ano.

O Visual Studio 2008 é um poderoso software capaz de criar aplicativos para diferentes sistemas, como a WEB, o Windows Vista, o Windows Server 2008 e o Office 2007. Está disponível em três versões, Standard (programadores individuais), Professional (pequenas equipes) e Team System (grandes equipes). Além destas, existe uma versão gratuita chamada Visual Studio Express que pode ser bastante útil para a maioria de nós que trabalhamos com o WordPress.

O Visual Studio Express é destinado a programadores iniciantes ou não-profissionais que gostariam de utilizar um software de programação profissional. Está disponível em 4 pacotes diferentes: Visual Basic 2008, Visual C# 2008, Visual C++ 2008 e Visual Web Developer 2008. Este último, por motivos óbvios, foi o que mais me interessou, ele possui suporte nativo a HTML, CSS e Javascript, e ainda existe uma IDE, produzida por terceiros, para PHP.

O que mais me chama a atenção em um programa como este são alguns recursos como o debug para Javascript, que procura por erros de sintaxe no código, e o Intellisense, que ajuda e muito ao exibir a sintaxe da função e permitir autocompletar o código no momento que você está digitando, é uma mão-na-roda! Veja alguns exemplos:

Visual Studio - Intellisense Javascript
Microsoft Visual Studio - Intellisense CSS

Se você, assim como eu, costuma programar todo o código “na mão”, o Visual Studio pode ser uma ótima ferramenta para ganhar produtividade.

Tutorial sobre como converter um layout PSD em HTML Por Érico Oliveira dia 25 de Junho de 2008 às 11:23 am | Imprimir este post

O blog NetTuts escreveu um excelente tutorial explicando passo-a-passo como converter um layout criado no Photoshop em um site HMTL/CSS. Apesar de escrito em inglês, os leitores não terão muita dificuldade de compreensão em virtude da utilização de muitas imagens. O autor ainda disponibilizou para download todos os arquivos utilizados no tutorial.

Abaixo você pode ver o layout utilizado no tutorial.

Tutorial para converter PSD em HTML

Vale a pena salvar no Del.icio.us! :)

Emoticons sem borda Por Rodrigo Ghedin dia 28 de Maio de 2008 às 7:04 pm | Imprimir este post

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 Por Érico Oliveira dia 26 de Novembro de 2007 às 5:16 pm | Imprimir este post

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 Por Érico Oliveira dia 01 de Setembro de 2007 às 11:17 pm | Imprimir este post

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]