Ticker

6/recent/ticker-posts

Recent Post

criando um template

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 {

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.

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




Postar um comentĂ¡rio

0 ComentĂ¡rios

Fique sempre atualizado!
Receba artigos por email!
Widget by Lucrar Com Blog Instale este widget
Related Posts Plugin for WordPress, Blogger...