PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

31/01/2013

Como usar CSS no Wordpress

cascadingstylesheets

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.

Help

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…

image

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.

image

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

image

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].

image

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.

image

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].

image

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

image

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…

image

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.

image

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

image

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

image

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…

2 comentários:

Guilherme disse...

Oi Alf,

Fiz exatamente o que disse, mas não consigo visualizar os efeitos do CSS. Veja: http://viajandocomeles.com.br/u-design/css/

O que não entendo é o seguinte. Todo o cabeçalho ajustei com CSS, conforme o suporte do meu tema. Mas quando tento criar algo diferente não consigo.

Preciso colocar o CSS em mais algum lugar ou somente na Folha de Estilos???

Obrigado

byALF disse...

Olá, Guilherme

O código CSS deverá estar apenas na Folha de Estilos, porém você deverá colocar sempre no lugar onde deseja visualizar o efeito um código HTML, tipo (<div class="caixa_....>) do nosso exemplo.

Verifique todo código com atenção. Verifique "aspas" e símbolos.

Depois coloque a tag HTML de forma correta, utilizando o editor de postagem TEXTO, e não VISUAL.

Visual Dicas

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics