outubro 18, 2009

Blog: Entendendo a estrutura dos elementos da página do blogspot

Todo blogueiro que eu conheço quer um dia ter o seu próprio template, personalizado por ele próprio de preferência. Ainda não estou no nível para conseguir isso, mas alguns avanços tenho feito nesse caminho.

O primeiro passo para desenvolver o seu template é compreender como estão dispostos os principais elementos da página do blogger.

Neste post pretendo apresentar como é a disposição dos elementos da página no template "Mínima", e como aumentar o tamanho do cabeçalho, área de postagem, coluna lateral e rodapé.


Na linguagem adotada no código html do Blogspot essas áreas recebem os seguintes nomes:

Cabeçalho - Header
Área de postagem - Main-Wrapper
Coluna lateral - Sidebar-Wrapper
Rodape - Footer

todos esses elementos estão dispostos dentro de uma área chamada Outer-Wrapper, formando um conjunto.

Por padrão, no template Mínima, esses elmentos posssuem as seguintes medidas:
Main-Wrapper - 410px
Outer Wrapper - 660px
Header - 660px
Sidebar-Wreapper - 220px
Footer - 660px

Confira a disposição dos elementos na imagem. Parav facilitar a compreensão as cores das fontes seguem as mesmas cores do contorno dos elementos. Clique para ampliar

No código html os trechos que definem os elementos são os seguintes:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#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 */
}

#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 */
}

Repare que os elementos acima estão localizados em sequência sobre o seguinte código

/* Headings


Já o rodapé está sobre o código

]]>


na seguinte forma

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;


O código que define os padrões de tamanho da Outer-Wrapper é o seguinte:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


E está sobre o trecho:

/* Outer-Wrapper


Conhecer os elementos e suas localizações torna mais fácil o trabalho de personalização do template. Para alterar o tamanho dos elementos basta modificar os pixels que estão à frente do termo "width".
Lembre-se que: A soma dos pixels dos elementos Sidebar-Wrapper e Main Wrapper (considerando os valores das margens), não podem ser superiores ao tamanho do Outer-Wrapper.

O tamanho do Header e do Footer, também não podem ser maiores que o Outer-Wrapper.