Todos já devem saber o quanto é fácil ter um blog, seja com domínio próprio ou não. Diversas ferramentas são criadas e disponibilizadas gratuitamente na internet todos os dias. Dentre estas ferramentas as mais conhecidas são os Sistemas de Gerenciamento de Conteúdo.

Mas não basta apenas criar seu blog, a criação de um layout singular ajuda a destaca-lo perante os demais.

Observação: esse tutorial usa o Wordpress como exemplo, entretanto a maior parte das dicas usadas aqui servem para personalização de templates de outras ferramentas como Joomla e Drupal.

Para customizar temas no Wordpress é necessário:

• Noções básicas de HTML
• Noções básicas de CSS
• Noções básicas em algum programa gráfico (Photoshop, Fireworks, Illustrator, etc)

Índice do Tutorial

• Download do template
• Inserindo imagem no Template
• Editando arquivos HTML e CSS
• Resultado

Download do Template

No site oficial do Wordpress você encontra centenas de temas gratuitos para baixar, acesse http://wordpress.org/extend/themes/ . Você deve clicar em download no tema escolhido. Após concluir acesse o ftp de seu site e envie para a pasta themes, dentro de wp-content.

Para esse tutorial eu escolhi o tema jQ.

Template Wordpress jQ

Agora ative seu tema no menu Appearance > Themes (Aparência > Temas) do administrador.

Ative o tema Wordpress no administrador

Inserindo imagem no Template

Muitos dos temas possuem uma boa área no seu topo para ser explorada. Com alguns conhecimentos gráficos, seja no Photoshop, Fireworks ou Illustrator você pode criar uma arte para usar no blog. Veja a imagem criada para este tutorial (assunto: os bizarros):

Arte Gráfica para inserir no topo do tema

Editando arquivos HTML e CSS

No wordpress o arquivo responsável pelo topo do blog é o header.php. Para fazer minha personalização apenas substitui o título do blog pela imagem criada. Veja:

Inserindo a imagem do topo (arquivo header.php)

Agora é a vez de mudar a cor do plano de fundo e dos links, para isso é necessário editar a folha de estilos (CSS). Caso não saiba do que se trata, recomendo estudar o básico pelo site do Maujor.

Para mudar as cores no seu arquivo CSS basta saber o código RGB dela. Para isso você precisará do auxílio de uma paleta de cores. Para quem não trabalha com programas gráficos recomendo o site Color Blender para encontrar o valor RGB da cor que deseja.

Veja como formatar as cores via CSS:
color:#RRGGBB; (para cor do texto)
background-color:#RRGGBB; (para cor do plano de fundo)

Para essa customização alterei o plano de fundo para a cor azul marinho escuro (background:#040116;) e a cor dos links para um tom de vermelho (color:#aa182b;). Veja:

Alterando o CSS do template (arquivo style.css)

Dica: se quiser alterar um plano de fundo já existente no seu template sem precisar editar o HTML ou CSS, basta salvar sua nova imagem com o mesmo nome e extensão (jpg, gif ou png) da imagem original e substitui-la.

Resultado

Veja abaixo a comparação do template original e do resultado:

Antes

Resultado da customização do template

Esse tutorial é de nível básico e envolve os elementos mais simples de um template. É um ótimo caminho para começar a desvendar a estrutura de outros templates até que possa se sentir confiante para criar o seu.

Esse post foi elaborado especialmente para Netto Silva e Italo Veloso, que fizeram o pedido através do RGB Magazine. Caso também queira fazer o seu pedido sobre algum tutorial clique aqui. O post ficou um pouco extenso, se tiver dúvidas envie seu comentário.