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