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!(kkk)
A maravilha deste Tutorial e que é que vou ensinar três tipos de posicionamento da nova coluna: sidebar-main-sidebar; main-sidebar-sidebar e main- sidebar sobre sidebar. (sidebar=coluna do perfil, main=coluna do post).
Vamos nessa, pois agora vou explicar
passo à passo como adicionar uma nova coluna no template.
Sidebar - Main - Sidebar:
Primeiro Passo (para todos os tipos de templedes):
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 à Sidebar e cole abaixo do mesmo e altere o nome de Sidebar para NewSidebar, como mostrado acima, em VERDE. 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)
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
/<b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
< /div>
Acrescente a parte em VERDE, 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.
Visualize e se você fez axatamente como coloquei aqui, não tem o que dar errado.
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 VERDE 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 determinar que as duas colunas fiquem juntas à direita ou esquerda, ou uma delas descerá sob a coluna do post ok?
Espero ter ajudado!
Mil Beijusx no core
Mil Beijusx no core
