Se tens um site (ou estás a pensar criar um brevemente), provavelmente já conhecerás o WordPress. Afinal de contas, 1 em cada 5 sites utiliza esta plataforma.

Não sendo o caso deste blog, que usa o Ghost, a verdade é que o WordPress ainda é o CMS (Content Management System) top-of-mind para a maioria das pessoas, muito devido à sua versatilidade, ao apoio da comunidade e ao número de plug-ins e integrações de que dispõe.

Actualmente na versão 4, o WordPress permite criar qualquer tipo de site com pouco esforço – seja ele um simples blog, um site institucional ou até uma loja.

Para muitas pessoas, o problema não é escolher a plataforma – é criar um site com um look apelativo e profissional sem gastar muito dinheiro ou contratar um designer.

O WordPress oferece milhares de temas gratuitos – com meia-dúzia de cliques conseguimos alterar o design de todo o nosso site sem perder a informação que já criámos. Mas conseguiremos melhores resultados se optarmos por um tema premium.

Um tema premium trará várias vantagens face a um tema gratuito, tais como:

• actualizações mais frequentes;
• elevado grau de personalização;
• grande nível de suporte, quando precisamos de ajuda;
• inclusão de plug-ins premium, como por exemplo sliders;
• maior qualidade no código (que se traduzirá num site mais rápido) e no design.

Não é que os temas gratuitos sejam maus – mas na minha experiência, as actualizações são menos frequentes e não podemos contar com grande apoio ao cliente.

Mesmo pagando, haverá bons e maus produtos – tudo dependerá da equipa que trabalha para o projecto. Mas, de um modo geral, poderemos contar com um melhor produto (e apoio) se investirmos 50 ou 60 dólares num tema premium.

Estes temas podem ser adquiridos em marketplaces como o ThemeForest ou o Creative Market.

Como rapidamente podemos constatar, existem milhares de temas disponíveis – geralmente, ordeno sempre pelos temas mais vendidos/populares para iniciar a minha pesquisa, porque mais vendas é habitualmente sinónimo de maior detecção de bugs por parte dos utilizadores e de actualizações mais frequentes por parte dos programadores. Se comprarmos um tema que só tem 10 ou 20 clientes, corremos o risco de encontrar programadores desleixados que demoram muito tempo a responder ou que deixam de trabalhar em actualizações para esse produto.

O que nos traz para o tema de hoje. Não é por comprarmos um tema popular que acabaremos por ficar com um site igual aos outros. Com um pouco de personalização, conseguiremos criar um site apelativo e único.

Para tal, precisamos de 3 coisas:

• conhecimentos (mínimos) de CSS;
• o Firebug, uma extensão disponível para Chrome e Firefox;
• uma forma de inserir CSS personalizado, recorrendo ao custom CSS.

Conhecimentos mínimos de CSS

O código CSS (ou Cascading Style Sheets) é responsável por informar o browser da forma como o código HTML deve ser apresentado – que tipos de letra, que cores, que tamanho, etc.

Na imagem em baixo, vemos o mesmo site só com HTML e, à direita, com HTML e CSS. Sem CSS, a web não teria graça nenhuma!

Como veremos mais à frente, não é necessário ser um programador para fazer pequenos ajustes no site – basta um pouco de bom senso e tentativa e erro.

Dito isto, há 3 excelentes locais para aprofundar esta linguagem, para quem quiser levar os seus conhecimentos para um nível mais avançado:

• os cursos gratuitos de CSS do CodeAcademy;
• a página de Shay Howe, designer e programador;
• a secção de CSS do w3schools.com (ideal para ficar a conhecer tudo o que o CSS é capaz).

Estes 3 sites são totalmente opcionais e ficam para os mais curiosos – o que importa é a aplicação na prática, cortesia dos 2 pontos seguintes.

O Firebug

O Firebug já foi referido aqui e a verdade é que a extensão funciona muito melhor no Firefox – é um excelente incentivo para manter este browser instalado no meu computador.

O Firebug inspecciona o código. Essa funcionalidade está presente na maior parte dos browsers modernos, mas esta extensão é muito mais completa.

Depois de clicar na extensão, ela surgirá no fundo da janela. Mas só depois de clicarmos no 2º botão (Click an element in the page to inspect) é que teremos acesso ao inspector.

Agora, ao passarmos o rato pelo site veremos o respectivo código CSS. Estará à direita, em Style. Aqui, seleccionei um parágrafo do artigo da semana passada: os 10 Mandamentos de Social Media.

Vamos pegar neste texto do corpo do site e alterar o tamanho (font-size) e a cor (color). Também podemos facilmente alterar o tipo de letra por algo que gostemos, com a ajuda do WhatFont.

Como queremos editar o que está no parágrafo, teremos de procurar a tag <p>. Eis o que devemos localizar:

Depois, podemos ver como ficarão as alterações, editando os campos respectivos dentro do Firebug.

Estas alterações, no entanto, não ficarão permanentes. Só nós as conseguimos ver e assim que clicarmos em Refresh, o browser voltará a mostrar o site como ele é.

Para as gravar, teremos de recorrer ao 3º e último passo.

Por agora, podemos fazer copy do que queremos alterar, colando depois no Notepad ou no meu programa de eleição, o SublimeText.

Uma forma de inserir CSS personalizado, recorrendo ao custom CSS

Podemos alterar o código CSS mexendo nos ficheiros em questão, mas é boa prática recorrermos aos campos de custom CSS para esta finalidade. Assim, sempre que há uma actualização do tema, não corremos o risco de perder as nossas modificações.

O custom CSS vai-nos permitir dizer que mudanças pretendemos e informar o browser que deve ignorar as definições originais e utilizar as nossas.

A maioria dos temas premium inclui de raíz esta caixa, dentro das opções específicas do tema, geralmente dentro do separador Apresentação.

Eis o exemplo no tema “Hot Topix”:

E agora no tema “Clubber”:

Também podemos aplicar estas alterações em temas gratuitos.

O WordPress não traz esta caixa de origem, mas podemos utilizar o plug-in Jetpack (também criado pela empresa) para activar esta funcionalidade, ou instalar algo como isto.

Eis a caixa, recorrendo ao Jetpack.

Algumas dicas

Quando compro um tema premium, tenho geralmente uma ideia muito clara do que procuro, para minimizar o esforço de personalização.

Estas são as alterações mais frequentes, que acabo por ter de fazer com regularidade após uma nova instalação…

Alterar a cor do fundo

Podemos editar a cor do fundo de qualquer objecto. Um fundo, uma linha horizontal ou um botão. Para tal, basta adicionar a linha background-color, juntamente com a web color que pretendemos utilizar.

Eis um exemplo, alterando o fundo de um botão para branco:

.button {
background-color: #fff;
}

Alterar a cor do link, quando seleccionado

Em HTML, os links são a tag <a>, mas como queremos alterar a cor apenas quando passamos o rato por cima , temos de adicionar a condição hover.

No nosso custom CSS, ficaria desta forma:

a:hover {
color: #F7931E;
}

Alterar o tamanho dos títulos

Em HTML, os títulos (e sub-títulos) fazem parte das tags <h1>, <h2>, <h3> e por aí em diante.

Para alterar o título principal, deveremos editar uma vez mais o font-size, mas do <h1>.

h1 {
font-size:36px;
}

Colocar algo invisível

O autor do tema pode ter criado algo que queremos que simplesmente não apareça. Um rodapé ou um botão, por exemplo. Para ocultar, temos de adicionar uma linha com display:none no que queremos tapar – por exemplo, para tapar os títulos com a tag <h3> escreveríamos:

h3 {
display:none;
}

Mostrar e ocultar propriedades rapidamente

O Firebug tem um botão para cancelar uma linha de código – ideal para rapidamente observarmos como fica uma seccção do site com e sem esse parâmetro.

Para tal, basta clicar no sinal vermelho que surge automaticamente quando passamos o rato em cima de cada linha:

NOTA: não confundir com o código rasurado. Se o código está assim, é porque já existe uma regra para o browser ignorar essa configuração, não apresentando o conteúdo dessa forma.

Em resumo

Personalizar um site não tem que ser dispendioso. Com algumas dezenas de dólares e com um pouco de tempo, conseguimos um site com aspecto profissional e, ainda assim, único.

Esta é também uma excelente forma de aprender CSS. À medida que os conhecimentos evoluem, maior será a nossa capacidade de tornar um site mais pessoal!

Se quiseres aprofundar este tema, não te esqueças de passar por aqui e por aqui.