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:
<div id='testes'>TEXTO AQUI</div>

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

3º - Teste e salve.

A postagem ficou um pouco grande, mas tentei explicar bem detalhadamente como fazer as mudanças, qualquer coisa deixe um comentário com sua dúvida a respeito.

Abraços