Diferença entre Margin e Padding - Alterar Template

Para fazer alterações no template do blog precisamos saber um pouco de CSS, então aqui vão algumas dicas para ajudar você a modificar seu template, olhe o código abaixo:

.exemplo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #000000;
text-decoration: none;
background-color: #FFFFCC;
background-image: url(URL DA IMAGEM);
text-align: left;
border: 2px solid #666666;
margin: 5px;
padding: 10px;
width: 600px;
}

Agora vamos ver o que faz cada uma das linhas deste código:

font-family: Arial, Helvetica, sans-serif; - tipo da fonte(letra)

font-size: 12pt; - tamanho da fonte

color: #0000FF; - cor da fonte

text-decoration: none; - essa linha nos permite “decorar” o texto, na verdade é sublinhar(underline) sobrelinha(overline), piscando(blink), tachado(line-through) ou nenhum(none), você só precisa trocar a palavras que está entre parênteses e ver o resultado, o blink não funciona no Internet Explorer somente no Firefox

background-color: #FFFFCC; - essa é a cor do fundo, veja aqui o Código das Cores

background-image: url(URL DA IMAGEM); - coloca uma imagem como fundo do blog/site, você só precisa hospedar a imagem em algum lugar e colocar a url

text-align: left; - alinhamento de texto esquerda(left), direita(right), centro(center), justificado(justify)

border: 2px solid #666666; - faz uma borda, existem vários tipos de borda: linha(solid), tracejado(dashed), pontilhado(dotted) esse são os principais estilos de borda, mas existem outros, o valor 2px é a espessura e #666666 é a cor que podem ser alterados conforme seu gosto.

margin: 5px; - essa linha faz uma margem externa ou seja deixa um espaço vazio do lado de fora(veja imagem)

padding: 10px; espaço vazio dentro(veja imagem)

width: 600px; - largura da coluna, também pode ser usado em %

Então para alterar o modelo do blog você deve procurar esses códigos nele, mas quando digo procurar não quero dizer que você deverá ler o código todo, mas use o ctrl+F, isso funciona no Internet Explorer, Firefox, Opera, nos demais navegadores não testei, então para achar alguma coisa use as teclas de atalho ctrl+F e digite o que você quer encontrar.

Um exemplo que como mudar algo no seu layout, caso você queira mudar a cor do fundo o que controla isso é background. Para mudar o fundo das postagens procure .main{.....} que é a parte principal do blog e coloque o código background-color: #FFFFCC; e para mudar o fundo do menu coloque o mesmo código junto com .sidebar{..............}.

Este exemplo serve para qualquer coisa que você queria mudar no seu template, por exemplo, cor, o tipo e tamanho da letra, margens, etc... Mas isso não significa que o código deve conter todas essas linhas, pois não quiser usar uma borda basta apagar a linha border: 2px solid #666666; isso também vale para as outras partes do código. Veja aqui mais detalhes sobre Colocar ou alterar as bordas

Esta explicação é para você ter algumas noções de CSS e saber modificar seu template, mas se quiserem ver mais detalhes e outras coisas que podemos fazer com o CSS, visite o site http://www.maujor.com , eles têm ótimos tutoriais sobre o assunto.