No nosso primeiro tutorial, vamos falar sobre backgrounds. É um conceito até simples, mas que tem muita importância se comparado ao conjunto dos templates. Fundamental para deixá-lo mais atraente e bonito.
Tomarei aqui como base o template Mínima, do Blogger, portanto, se houver alguma diferença com o que foi apresentado aqui e o seu html, procure algo semelhante, ou deixe sua dúvida que eu ajudarei no que puder; (Também sou um aprendiz, ora!) Vamos à ele então!
Basicamente, todas as partes do template têm seus backgrounds separadamente. Tanto as colunas laterais, como a coluna do post, o cabeçalho, e o rodapé podem ter backgrounds diferentes, ou não, dependendo do gosto do usuário.
Atenção: Sempre faça um backup do seu template antes fazer qualquer modificação.
As cores que usei, como #000000 (preto) podem ser definidas a seu gosto.
Primeiro, vamos localizar estas partes no código. (Para fazer isto mais facilmente, se estiver usando o Firefox, aperte F3 e digite uma parte que quer encontrar, e no IE, aperte ctrl+F e busque a parte que lhe interessa.)
A parte referente ao fundo da página inteira é esta:
body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
A parte referente às colunas laterais, é esta:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
A referente ao "corpo" do blog:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
E a parte que corresponde a parte do post, ou coluna principal:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
O cabeçalho:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
E o rodapé:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
1- Para escolher o background para cada item separadamente, basta incluir o
background: #000000;
nas partes correspontentes (desde que seja entre dentro das chaves "{" e "}". Por exemplo:
#outer-wrapper {
background: #000000;
width: 660px;
margin:0 auto
}
2- Ou se quiser incluir uma imagem, insira:
background: url(http://URL_DA_IMAGEM) ;
3 - Ou ainda, se quiser fazer com que uma imagem faça seja o background, repetindo-se indefinidamente, insira:
background: url(http://URL_DA_IMAGEM) repeat;
4- Se quiser fazer com que a imagem só se repita horizontalmente, coloque assim:
background: url(http://URL_DA_IMAGEM) repeat-x;
5- Para repetí-la verticalmente:
background: url(http://URL_DA_IMAGEM) repeat-y;
6- Para que a imagem não se repita:
background: url(http://URL_DA_IMAGEM) no-repeat;
ATENÇÃO:
a)para os itens 4 e 5 funcionarem bem no IE, deve-se dar um espaço maior antes do "repeat". (dica via Templates para novo Blogger)
b) se optar por repetir horizontalmente ou verticalmente uma imagem, o resto da página será preenchida com a cor definida do background anterior, que pode ser do body, do outer-wrapper, ou das sidebars.
Se quiser fazer isso em cada parte separadamente, deixe assim:
background: #000000 url(http:// URL_DA_IMAGEM) repeat-y;
Mais uma coisa: Só insira cada background separadamente se quiser mesmo um fundo diferente para cada imagem, se não houver uma dor definida, será a base do blog a cor do background do body { ou do #outer-wrapper.
Caso tenha dúvidas, deixe um comentário que eu ajudarei.
Abraços!