Como usar CSS no Wordpress

CSS, como utilizá-lo…

Se você está começando ou aprendendo a utilizar códigos CSS, neste artigo iremos dar algumas dicas para você utilizar esta linguagem da maneira mais fácil no seu wordpress. (este artigo é válido apenas para o wordpress.org). Para utilizar CSS no wordpress.com é necessário um pagamento anual para o upgrade.

CSS (Casdading Style Sheets) ou Folha de Estilo em Cascata, para quem não sabe, é uma linguagem similar e complementar ao HTML, que controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, ou seja, todo o layout de um site. (leia: O que é CSS?)

Para exemplificar nosso artigo, iremos apresentar algumas de caixas coloridas para você destacar partes do texto de um post. São exemplos bem simples apenas para elucidar nosso tutorial. Códigos CSS são muito poderosos e estão relacionados com todo visual de um site, como cores, fontes, margens, imagens, etc… Portanto, é bem legal você se aprofundar mais neste assunto, assim como em HTML, que é a base da visualização nos navegadores da internet…

Código CSS

Primeiro vamos mostrar o código CSS que deverá ser copiado e colado no Painel Administrador do Wordpress do seu blog.

/*---- Classe para definir uma caixa azul ---*/

.caixa_azul {

margin:5px 10px 5px 20px;

border-left:3px solid #A5C9FF;

border-right:3px solid #A5C9FF;

padding:5px 5px 5px 5px;

background: #EBF4FF;

}

/*---- Classe para definir uma caixa vermelha ---*/

.caixa_vermelha {

margin:5px 5px 5px 5px;

border-top:3px solid #DD3C10;

border-bottom:3px solid #DD3C10;

padding:5px 5px 5px 5px;

background: #FFEBE8;

}

/*---- Classe para definir uma caixa laranja ---*/

.caixa_laranja {

margin:5px 10px 5px 10px;

border:3px solid #FF7800;

padding:5px 5px 5px 5px;

background: #FCDCB8;

}

 

Adicionando CSS no wordpress.org

Se você utiliza o wordpress.org (quando precisa hospedagem e domínio próprio), acesse o painel de administração do blog…

No menu lateral selecione [Aparência] e depois [Editor CSS]. Na menu superior escolha a guia [CSS] e acesse o Editor da folha de estilos CSS.

Agora cole o código CSS que mostramos anteriormente, após a última linha do editor.

Atenção: Toda vez que você alterar o Tema do Wordpress será necessário colar novamente todos códigos CSS criados, pois eles serão deletados automaticamente. Portanto, evite surpresas. Grave sempre a sua página CSS em um arquivo .txt, através do bloco de notas do Windows ou algum outro editor de texto. Depois para recuperar basta copiar o código e colar novamente.

Depois de colado o código corretamente, clique no botão [Salvar folha de estilos].

Utilizando o CSS nas postagens ou páginas

Para acrescentar os códigos CSS do nosso exemplo nas postagens ou páginas, abra o editor HTML do Wordpress ou do Windows Live Writer e digite o código abaixo:

<div class=”NOME DA CLASSE QUE VOCÊ ADICIONOU”> TEXTO </div>

Para abrir o editor HTML, clique na guia [Texto] no menu do editor de postagens, que fica ao lado de Visual.

Como exemplo, vamos usar o código a seguir:

<div class="caixa_azul">

EXEMPLO CAIXA AZUL

Testando a caixa azul vertical

Testando a caixa azul vertical

Testando a caixa azul vertical

</div><p></p>

<div class="caixa_vermelha">

<strong>ATENÇÃO</strong>: Isto é uma caixa VERMELHA!

</div><p></p>

<div class="caixa_laranja">

<b>A nossa caixa laranja serve para destacar um texto!</b>

</div>

Cole o código no editor HTML e clique no botão [Atualizar].

Agora abra o seu blog na postagem que foi inserido o código e veja o resultado…

Veja o nosso blog de exemplo: http://visualdicas.com.br/byalf/?p=50

Adicionando CSS no wordpress.com

Se você usa o wordpress.com (quando não precisa usar um domínio próprio), acesse o painel de administração do blog…

No menu lateral selecione [Aparência] e depois [Design Personalizado]. Na menu superior escolha a guia [CSS] e acesse o Editor da folha de estilos CSS.

Agora cole o código CSS que mostramos anteriormente, após a última linha do editor.

Depois de colado o código corretamente, clique no botão [Save & Buy Upgrade]. Neste caso, você precisará fazer o pagamento para o Upgrade…

Feito o pagamento, agora é seguir da mesma forma que o exemplo mostrado para o wordpress.org…

byALF 

---

Leia também:

 Como inserir códigos CSS no Blogger

Simulador CSS e HTML – Ótimo para iniciantes…