Você que costuma usar o WordPress já deve ter reparado na função “CSS Adicional” disponível em todos os templates que você gerencia. Mas você já se perguntou para que serve e como pode ser usado? Então continue lendo que eu te conto!

Para aqueles que são programadores usam e abusam dessa função, pois ela serve como um “salva-vidas” para quem gosta do template do blog, mas precisa fazer uns ajustes.

Mesmo que você não seja um programador, você pode aprender algumas técnicas que vão deixar o seu template mais parecido com você.

Alguns templates, quando você aplica no blog, podem estar perfeito, mas algumas características de formação acabam sendo uma pedra no sapato para você.

Aquelas pessoas que não sabem usar o CSS Adicional disponível, acabam aceitando as falhas do template aplicado, ou escolhem outro que possa corrigir esses erros indesejados.

Por exemplo, vamos supor que você queira aumentar o tamanho da fonte do texto, mas no personalizador não vem com essa opção. De repente, para mais estilizações, você precisa comprar a versão PRO do mesmo.

Mas tudo o que você quer é apenas alterar o tamanho da fonte e não está interessado em comprar nenhum template PRO. Uma opção seria instalar um plugin que gerencia as fontes do blog, e por meio dele, você poderia corrigir esse problema.

O problema é que a lista de plugins instalados no seu site já é grande, adicionar mais vai comprometer a performance do seu blog.

Ah, dúvida cruel. Aparência ou performance?

Na maioria das vezes você pode obter ambos, apenas usando a ferramenta do CSS Adicional do WordPress, que dispensa esses plugins e ainda mantém a boa performance do seu site.

CSS Adicional – um salva vidas

Para acessar essa função, basta você ir no painel do WordPress > Aparência > Personalizar > CSS Adicional.

Se você quer apenas aumentar a fonte geral do seu site, cole esse código no campo em branco:

p{ font-size: 15px;}

Altere o valor ’15’ para o que melhor lhe convém. Quanto maior o valor, maior será a fonte.

Uau! agora sim pude ajustar a fonte do meu site! Mas o que aconteceu?

O CSS é uma folha de estilos que é usado para estilizar todo o site. A ferramenta CSS Adicional oferecida pelo WordPress substitui os valores padrão atribuídos originalmente pelos desenvolvedores.

Esse CSS Adicional funciona como um recurso que pode corrigir qualquer problema do template original. Pode corrigir qualquer tipo de problema, mas para problemas específicos, já é necessário um conhecimento mais aprofundado para melhor aproveitar esse recurso.

Problemas mais comuns como personalizar a fonte ou mudar a cor, podem ser facilmente gerenciados pelo CSS Adicional, caso essa opção não esteja disponível no painel de personalização.

Se você quiser alterar a fonte por exemplo, usando as fontes do Google, existem algumas condições, pois você precisa modificar o HTML (a folha estrutural do site) para colocar qualquer uma.

Como você só tem acesso ao CSS você só pode alterar a fonte original para as fontes mais comuns, como a Arial, Times New Roman, Unicode, Open Sans e outras fontes básicas.

Dependendo do template, você ainda pode usar outras fontes diferentes, como Lato, Oswald, PT Sans e Roboto.

Para alterar a fonte, é só você adicionar isso no CSS:

p{ font-size: 15px;
   font-family: 'Arial', sans-serif;
}

Para alterar a cor do texto, você pode mudar de duas formas: a primeira delas é você digitar o nome da cor desejada em inglês. A segunda é adicionando o código web da cor, por exemplo. Vejamos esses modelos:

p{ font-size: 15px;
   font-family: 'Arial', sans-serif;
   color: black;
}

Onde black é preto em inglês. Mude para red para ficar vermelho, white para branco, gray para cinza.

Ou você pode utilizar o código de cor. para cada cor tem um código, o que nos dá uma maior liberdade para escolhermos uma cor mais clara ou mais escura. Exemplo:

p{ font-size: 15px;
   font-family: 'Arial', sans-serif;
   color: #000000;
}

Os números ao lado de color representa o código da cor preta. use #ffffff para branco. Se quiser personalizar mais, acesse esse site que mostra várias cores e seus códigos.

Outro código legal que ajuda a dar um charme nos seus posts são os espaços no começo de cada parágrafo (o termo técnico é indentação do texto) quanto maior o valor, maior será o espaçamento:

p{ font-size: 15px;
   font-family: 'Arial', sans-serif;
   color: #000000;
   text-indent: 5px;
}

Para justificar seus textos:

p{ font-size: 15px;
   font-family: 'Arial', sans-serif;
   color: #000000;
   text-indent: 5px;
   text-align: justify;
}

Para você personalizar títulos por exemplo, não muda muita coisa. Para títulos, nós chamamos de headings, e para cada valor, será dado um tamanho e fonte diferente.

HEADING H2

HEADING H3

HEADING H4

Você pode personalizar cada um deles individualmente usando as tags h1, h2, h3, h4

h1{ font-size: 30px;
       color: red;}

h2{ font-size: 25px;
       color: black;}

h3{ font-size: 20px;
       color: black;}

h4{ font-size: 15px;
color: black;}

No meu template, o H1 e H2 são os únicos que possuem um tamanho e fonte diferente, daí para baixo são fontes default com tamanhos menores.

Para mexer com o body do seu site, para, por exemplo, mudar a cor de fundo, basta você adicionar um código assim:

body{ color: #F5F5F5; }

Onde essa cor é um cinza bem claro.

Para você estilizar suas imagens, como adicionando bordas, basta adicionar esse código:

img { border: 2px;
      color: #BEBEBE;
    }

Vale lembrar que quanto mais códigos você adicionar aqui, mais o seu site ficará lento. Coloque apenas o necessário. Se você conhece programação mais a fundo, pode ser capaz de alterar margens, estilizar áreas e elementos específicos.

Às vezes pode acontecer de você querer alterar uma função específica no CSS e não funcionar. Para esses casos é necessário analisar a estrutura de como foi desenvolvido esse template.

Use a função “Inspecionar Elemento” clicando com o botão direito do mouse no seu navegador (Válido para Chrome e Firefox) e procure pela região que quer alterar, veja a classe e use-a no CSS.

Esse template por exemplo, não exibia os marcadores quando é feita uma lista. Precisei investigar isso e consegui corrigir através do CSS. Veja:

  • Exemplo de lista com marcadores;
  • Tópico qualquer;
  • Mais um tópico;

Esses marcadores acima não eram exibidos. A tag responsável para personalizar os marcadores é o <li>, portanto, vamos mudá-lo usando o código list-style-type.

Então coloquei no meu CSS o seguinte código:

li{ list-style-type: square;}

Ao fazer isso consegui fazer os marcadores serem exibidos. Mas outro problema surgiu: Todo o meu site (incluindo menus) receberam esse marcador. Se eu mantivesse assim, a aparência geral do meu site iria ficar muito estranha.

Para que eu pudesse aplicar essa estilização apenas na tag <li> dentro dos posts, precisei achar a classe relacionada ao post e depois especificar o código:

.post-content li{
	list-style-type: square;
        }

Ao adicionar a classe .post-content eu consegui especificar para estilizar apenas o <li> dentro dos posts, em vez do site como um todo.

O CSS adicional é ótimo para dispensar plugins e pode corrigir os mais variados problemas. Mesmo assim, se você tiver dificuldades em mexer no CSS adicional, apague tudo e use plugins específicos para personalização, ou busque por um outro template.

E aí, tem algum problema com o seu template e não quer trocá-lo? Conte aí nos comentários!

Links úteis:

Escolha a melhor tipografia para seu blog

Seu blog está sujo? Limpe-o após entender este post

Renovação: Saiba quando chegar a hora de mudar o logotipo da sua marca

Não deixe de Compartilhar!
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share