CSS Personalizado

Recurso Avançado

Existem várias opções para personalização de seu site WordPress, além dos vários Temas e estilos diferentes.

Para aqueles que desejam personalizar menus, fontes, layouts e etc, é possível contar também com a opção “CSS personalizado”.

Neste artigo vamos aprender a personalizar o CSS e para esta tarefa é preciso localizar o comando dos elementos a serem personalizados em seguida modificá-los e inserí-los no campo adequado.

Vamos aprender a localizar estes comandos diretamente no Google Chrome, desta forma será possível testar as alterações instantaneamente.

  • Acesse seu site e clique com o botão direito do mouse sobre o elemento a ser alterado;
  • Clique em “Inspecionar Elemento”;
Clique aqui e veja imagens com detalhes sobre inspecionar elemento

Alterando a posição da logo

  • No painel direito observe as posições de sua logo e altere conforme sua necessidade;
  • Ao definir a posição, copie os novos dados e insira no CSS como .logo {top: 47px !important; left: 42px !important;};

Alterando o espaço destinado à logo

Há casos em que é preciso aumentar o tamanho do cabeçalho destinado à logo, então use:

#header {min-height: 140px;}

Veja como encontrar o campo CSS Personalizado em seu site WordPress

 

Código desta página

    No Twitter Messages