Scroll Top

Dicas

Como mudar as cores de um template WordPress

Geralmente quando colocamos um site no ar nós procuramos um tema legal para usarmos no blog. O tema de um site com certeza é um dos fatores mais importantes para o sucesso na internet. Porém, sempre haverá alguma necessidade de fazer algumas alterações no tema. Principalmente quando queremos algo que agrade a nós e aos nossos leitores. O grande problema é que muita gente não sabe como fazer alterações em um tema. Seja porque nunca se deparou com uma linguagem de programação, ou porque acha que só os profissionais podem fazer certas alterações.

Nesse artigo eu mostrarei passo a passo como mudar as cores de um template WordPress. Para esse tutorial, eu usarei o template (tema) gratuito, o NewsPick da flexithemes, esse tema pode ser baixado gratuitamente. Mas, você também poderá utilizar outros templates de sua preferência, pois os mesmos conceitos que serão passados aqui poderão ser usados em quase que qualquer outro template para WordPress.

Instalando o template

Antes de qualquer coisa, precisamos instalar o template no site. Caso você já tenha feito isso pode pular essa parte e ir diretamente para o tópico que você desejar. Caso você queira usar o mesmo template que usarei para esse tutorial é só baixa-lo por meio deste link.

Passo 1. Para instalar um novo template no seu site WordPress, primeiro fazemos o login no site, depois acessamos o menu, aparência e temas;

Como mudar as cores de um template WordPress?
Passo 2. Agora acesse o botão Adicionar Novo;

Mudando cores de um tema WordPress.
Passo 3. Quando a página terminar de carregar clique em Fazer upload do tema, depois clicamos em Escolher arquivo, navegamos até o arquivo do tema que foi baixado anteriormente, selecionamos o arquivo, clicamos em Abrir e depois em Instalar agora;

Instalando um template no WordPress
Passo 4. Depois de carregada mais uma vez a página, é só clicar em Ativar e finalmente o novo template já estará pronto para ser editado.

Fazendo alterações nas cores

Eu penso que mudar as cores de um site é um gosto pessoal. Assim, cada pessoa cria a combinação de cores que achar mais legal. Agora um fato interessante é que nem todos os templates feitos para WordPress nos permitem que façamos mudanças no tema de forma geral e interativa. Por isso, muitas vezes é preciso mexer no código fonte do tema. A primeira coisa que precisamos fazer antes de começar a fazer as devidas modificações de cores no tema. É claro! Devemos escolher quais as cores que serão definidas para o nosso template. No meu caso eu escolhi essa cor azul que vai substituir o vermelho alaranjado e não farei modificações no preto.

Caso você queira cores diferentes é só pesquisar sobre as cores hexadecimais. Você pode também usar editores de imagens como o Gimp, Photoshop, ou qualquer outro editor que permita pegar o código hexadecimal das cores para usar no seu template.

Identificando o código hexadecimal das cores

Passo 1. Para que seja possível mudar as cores desse template, primeiro é preciso saber quais as cores que estão sendo utilizadas nesse template. Note que na imagem a seguir observa-se um vermelho alaranjado e a cor preta, porém, devemos saber o código hexadecimal das cores desse template.

Como mudar as cores de um template WordPress
Passo 2. Para que descobrirmos essa cor vermelho alaranjado, basta clicar com o botão direito do mouse em qualquer parte do site que tenha essa cor e em seguida clicamos na opção, Inspecionar. Logo, abrirá uma janela com o código html e css ao lado.
Como mudar as cores de um tema WordPress

Passo 3. Veja que encontramos o código hexadecimal do vermelho alaranjado do nosso site. Agora é só copiar esse código no bloco de notas do seu computador;

Mudar cores de template wordpress

 

Fazendo as alterações

Passo 1. Para fazer as alterações de cores, primeiro precisamos acessar o código css do nosso template. Para isso, acessamos o menu Aparência e clicamos em Editor;

Mudando as cores de um template WordPress

Passo 2. Observe que agora já estamos na folha de estilos do nosso template. Então apertamos as teclas Ctrl + F do teclado e colamos o código da cor vermelho alaranjado que pegamos anteriormente na caixinha que vai aparecer. Observe que utilizando esse procedimento, o navegador Chrome localiza exatamente o código pesquisado em todo o código fonte do seu template. Agora é só substituir a cor que está mostrando na seleção pela cor que desejamos;

Como mudar as cores de um template feito para WordPress

Passo 3. Note que substitui o código que estava selecionado pelo no código que será a nova cor do template. A minha intenção é mudar todas as cores de vermelho alaranjado para a cor azul.

Mudar cor de template feito para wordpress.

Passo 4. Depois que você fez a sua primeira substituição de cores experimente apagar o número 7 do código hexadecimal que colamos na caixinha. Note que você não precisará ficar rolando para procurar as cores selecionadas porque conforme você vai substituindo a cor vermelha alaranjada pelo azul ou outra cor de sua preferência, se você apagar o 7 vai aparecer mais cores e então você vai substituindo, depois você adiciona o 7 e vai aparecer mais cores…

Tutorial para WordPress.

Passo 5. Finalmente quando substituímos todas as cores do vermelho pelo azul, clicamos no Botão atualizar arquivo e pronto! Agora veja o azul no lugar do vermelho:

Nova cor de um template wordpress.

 

Ao longo desse tutorial você aprendeu como o seu navegador de internet pode ser útil para nos ajudar a identificar as cores. Você viu também que os editores de imagens são de grande utilidade para o Web Design. Assim, existem também ferramentas como o Kuler que também podem ser muito úteis. Agora peço que se puder, deixe o seu comentário abaixo e me siga nas redes sociais. Esse ato pode fazer com que esse projeto cresça e assim mais pessoas também poderão ter acesso a esse material. Um forte abraço!

Aldney Emidio

Sobre o autor | Website

Blogueiro, YouTuber, Estudante de Química pela UFCG,, usuário de Linux, apaixonado por SEO, Marketing e Tecnologia.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Seja o primeiro a comentar!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.