Papo Nerd

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!

No related posts.

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.