Adicionar coluna no template
Autor: Felipe | Publicado: 2008-03-29T08:37:00-03:00

Você tem um template que adora e não está nem um pouco afim de trocar ele só para conseguir uma coluna extra...Ok, seus problemas acabaram! Vou explicar passo à passo como adicionar uma nova coluna no template.


Vamos nos familiarizar com o seguinte trecho do código do seu template (pode haver pequenas variações mas o básico é isso):
 /* Outer-Wrapper
 ----------------------------------------------- */
 #outer-wrapper {
 width: 900px;
 margin:0 auto;
 padding:0px;
 text-align:left;
 font: $bodyfont;
 background-color: #bgcolor;
 }
 
 #main-wrapper {
 background-color: #bgcolor;
 margin-left: 3px;
 border: 1px solid $bordercolor;
 width: 468px;
 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 {
 background-color: #bgcolor;
 border: 1px solid $bordercolor;
 margin-right: 0px;
 width: 210px;
 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 */
 } Onde Outer-Wrapper contém tudo o que está no template, main-wrapper contém a coluna do post e sidebar-wrapper contém a coluna lateral.
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar, este código:
 #newsidebar-wrapper {
 background-color: #bgcolor;
 border: 1px solid $bordercolor;
 margin-left: 0px;
 width: 210px;
 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 */
 } Não precisa ter necessariamente background e border, isso vai à gosto do freguês...mas o resto, tem que ser tin-tin por tin-tin o que está aí. Agora atenção para as medidas. A soma da largura do post mais as duas sidebar tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas. Vá testando e visualizando até ficar bom (e recomendo visualizar em navegadores diferentes para não ter depois que ouvir um amigo dizer que seu template é um horror!).
Mas, antes de visualizar, desça a página até encontrar esta parte do código:
 &lt;div id='content-wrapper'&gt;&lt;/div&gt; e cole imediatamente abaixo este:
 &lt;div id='newsidebar-wrapper'&gt; &lt;b:section class='sidebar' id='newsidebar' preferred='yes'&gt;&lt;/b:section&gt; &lt;/div&gt; É isso. Mas, veja bem, se a sua sidebar está a esquerda, a nova tem que estar a direta e vice-versa. Ou seja, atenção onde está float: right; float: left;
Assim, você irá acrescentar este último código que eu coloquei na ordem que deve aparecer no template. newsidebar-main-sidebar, ok? (por que aqui, neste exemplo, a nova coluna fica à esquerda)

É mais simples do que parece. Dúvidas é só mandar.

EDIT: Nem todo template tem a div Content-Wrapper. Se o seu template não tem, insira a nova coluna depois da div Header, assim:
 &lt;div id='header-wrapper'&gt;
 &lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'&gt;
 &lt;/b:section&gt;
 &lt;/div&gt;
 
 &lt;div id='newsidebar-wrapper'&gt;
 &lt;b:section class='sidebar'&gt; 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&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;/b:section&gt; &lt;/div&gt; Ou ainda, após :
 &lt;div id='crosscol-wrapper' style='text-align:center'&gt;
 &lt;div class='crosscol section' id='crosscol'&gt;&lt;/div&gt;
 
 &lt;/div&gt; se o seu template conter este trecho.