domingo, agosto 02, 2009

Um pouco sobre CSS e Mudando o fundo do seu template


Estou pensando em fazer uma série de postagens como fazer um template, mas para isso devemos aprender algumas coisas básicas. Como mudar a cor do fundo de um template? Como colocar uma imagem de fundo? É bem básico e simples.
Antes de começar a trabalhar aconselho que faça um backup de seu template, por segurança.

Aprendendo a trabalhar o CSS:
Devemos aprender que sempre que começa uma chave { tem que ter uma que termina } em um estilo CSS, e tudo que tem entre as duas chaves são as características (cores, fontes, tamanhos, posicionamentos, etc). E o que vem antes da chave { é onde essas configurações vão ser aplicadas.

Exemplo:
#testes {

Color: #000;
Background: #fff;
Border: 2px solid #c1c1c1;
Font-size: 12px;
Padding: 5px;
}

testes: Local onde as configurações vão ser aplicadas.
{ .... }: Características da tag testes (ou características do estilo)

A definição de cada característica vem depois dos dois pontos (:) e assim que ela acaba devemos colocar ponto e vírgula (;).

Exemplo:
Background: #FFFFFF;

Agora para usarmos as características da tag TESTES usamos isso:
testes'>TEXTO AQUI


Obs.: Essa explicação é só para você entender um pouco como trabalhar o CSS do seu template.

Agora que você já sabe um pouco onde cada característica começa e termina, vamos mudar a cor do fundo do seu template.

1º - Faça login no Blogger, entre em: “Layout” -> “Editar HTML”;

2º - Procure (Ctrl + f) por:
body {
Dentro das chaves de BODY tem o código CSS: Background, isso dá característica da cor de fundo.

Então apague as definições que estão na frente de Background e coloque o código da cor que você quer. Se não sabe o código procure aqui na tabela de cores: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

Exemplo de como vai ficar:
body {
Background: #000000;
....
}
#000000: Cor escolhida para o fundo.

A cor usada no exemplo é a cor preta (#000000).
Obs.: Os três pontinhos significam que tem outras características..

3º - Teste e salve.

Se quiser colocar uma imagem de fundo siga em frente
1º - Faça login no Blogger, entre em: “Layout” -> “Editar HTML”;

2º - Procure (Ctrl + f) por:
body {
Dentro das chaves de BODY tem o código CSS: Background, isso dá característica da cor de fundo.

Então substitua todo background por:

Background: url (LINK DA IMAGEM AQUI);

Substitua LINK DA IMAGEM AQUI pelo link da imagem escolhida para usar no fundo do template.
  • Se não quer que a imagem repita coloque:
Background: url (LINK DA IMAGEM AQUI) no-repeat;
  • Se quiser colocar uma imagem que não repete e assim que ela acabar fica a cor que você quer, use:
Background: CÓDIGO DA COR AQUI url (LINK DA IMAGEM AQUI) no-repeat;

No lugar de CÓDIGO DA COR AQUI coloque o código da cor desejada.

Exemplo:
Background: #000000 url (LINK DA IMAGEM AQUI) no-repeat;
  • Se quiser que tenha uma cor e a imagem se repita apenas na horizontal use:
Background: CÓDIGO DA COR AQUI url (LINK DA IMAGEM AQUI) repeat-x;
  • Se quiser que tenha uma cor e a imagem se repita apenas na vertical use:
Background: CÓDIGO DA COR AQUI url (LINK DA IMAGEM AQUI) repeat-y;

Encontre o Código de várias cores aqui: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm