Adicionando coluna no template
Autor: mateus de souza pereira | Publicado: 2011-10-24T15:03:00-07:00


 Marcadores: Tutoriais      Eu vou ensinar aqui a adicionar uma nova coluna ao blog,vou mostrar 3 tipos de posicionamento de colunas,então vamos começar:

Vá no codigo do seu template

Sidebar - Main - Sidebar:

*Primeiro Passo (para todos os casos)

Encontrem este trecho do código do template:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
float: left;
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: 190px;
float: right;
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 */
}

#newsidebar-wrapper {
width: 190px;
float: left;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 */
}

Outer-wrapper  mostra a medida total que terá seu template, a largura dele. A largura  das colunas nunca pode exceder a largura da Outer-wrapper, ou uma coluna  'descerá' para dar espaço à outra. A primeira coisa a fazer é alterar o  valor em width que está em Outer-wrapper. No Mínima, a largura é só de  660px. Se você deseja tres colunas no seu template  (sidebar-main-sidebar), coloque pelo menos 800px de largura. Agora copie  todo o trecho que se refere à newsidebar e cole abaixo do sidebar, como  mostrado acima, em vermelho. Note que destaquei onde está float: left;  Para que uma coluna fique à direita e outra à esquerda da coluna do post  (sidebar-main-sidebar), sidebar-wrapper e newsidebar-wrapper precisam  estar em lados opostos.

Muito bem. Agora determine as medidas que  terão as colunas. Não se esqueça que o valor total não poderá  ultrapassar o valor da Outer-Wrapper, incluindo aí bordas e espaçamento  entre as colunas.

*Segundo Passo (para todos os casos)

Agora desça a página até encontrar este trecho do html (obs: desmarque onde está Expandir Modelo de Widget, para facilitar)

&lt;div id='content-wrapper'&gt;

&lt;div id='crosscol-wrapper' style='text-align:center'&gt;
&lt;b:section class='crosscol' id='crosscol' showaddelement='no'/&gt;
&lt;/div&gt;


&lt;div id='newsidebar-wrapper'&gt;
&lt;b:section class='sidebar' id='newsidebar' preferred='yes'&gt;
&lt;/b:section&gt;
&lt;/div&gt;


&lt;div id='main-wrapper'&gt;
&lt;b:section class='main' id='main' showaddelement='no'&gt;
&lt;b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/&gt;
/&lt;b:section&gt;
&lt;/div&gt;


&lt;div id='sidebar-wrapper'&gt;
&lt;b:section class='sidebar' id='sidebar' preferred='yes'/&gt;
&lt; /div&gt;

Acrescente  a parte em vermelho, que se refere a coluna criada, antes de  main-wrapper. Por que antes? Por que está determinado que esta coluna  ficará à esquerda da coluna do post (foi determinado lá em cima, em  float: left ok?), ou seja : newsidebar-main-sidebar.

Main - Sidebar - Sidebar:

Agora vamos deixar a coluna do post à esquerda e as sidebars à direita, uma do lado da outra.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
border: 1px solid $bordercolor;
float: left;
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: 190px;
border: 1px solid $bordercolor;
float: right;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 */
}

#newsidebar-wrapper {
width: 190px;
border: 1px solid $bordercolor;
float: left;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 */
}

Aqui basta determinar em Float a mesma posição para as sidebars, como está em vermelho e depois seguir o segundo passo ensinado acima.


Main - Sidebar sobre Sidebar

Determine  que as duas sidebars fiquem do mesmo lado (right ou left, em oposição a  coluna do post, claro), apenas altere o valor de Outer-Wrapper para que caiba apenas a coluna do post e uma coluna lateral, o que obrigará a segunda coluna a descer.
Por  exemplo: Determine o valor em width de Outer-Wrapper para 800px, para  Main-wrapper 550px e para a Sidebar (para as duas, Sidebar e Newsidebar)  220px. A falta de espaço obrigará uma das colunas a descerem. Mas não  se esqueça de detrminar que as duas colunas fiquem juntas à direita ou  esquerda, ou uma delas descerá sob a coluna do post ok?