prendendo 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:
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:
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:
#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.
2º - Procure (Ctrl + f) por:
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;
Encontre o CĂ³digo de vĂ¡rias cores aqui: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
3º - Teste e salve.
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:
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.
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:
- Se quiser colocar uma imagem que nĂ£o repete e assim que ela acabar fica a cor que vocĂª quer, use:
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:
- Se quiser que tenha uma cor e a imagem se repita apenas na vertical use:
Encontre o CĂ³digo de vĂ¡rias cores aqui: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
3º - Teste e salve.
0 ComentĂ¡rios
Deixe seu comentĂ¡rio sobre o artigo a cima fique Ă¡ vontade, seu comentĂ¡rio Ă© muito importante !