Adicionar colunas no template
Bom, para começar vá em Layout > Editar HTML, e clique em Baixar Modelo Completo.
Depois, procure por essa parte no template:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 3px;
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 {
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 */
}
Atenção!
Outer-Wrapper > Todo o template;
Main-wrapper > coluna do post;
Sidebar-wrapper > é a coluna lateral.
#newsidebar-wrapper {
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 */
}
A soma de width em main-wrapper mais as duas colunas laterais nao deve ser maior do que width de outer-wrapper.
Ex:
MAIN { width: 400px; }
SIDEBAR { width:150px; }
NEWSIDEBAR { width:150px; }
Some os 3 valores de with, no exemplo vai dar 700. Isso quer dizer que, outer-wrapper deve ser maior que 700px.
Agora desça a página até encontrar esta parte do código (HTML):
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
<div id="newsidebar-wrapper"> <b:section class="sidebar" id="newsidebar" preferred="yes"></b:section> </div>
Visualize para ver se não há erros, depois salve.Importante:
No HTML os elementos devem estar na ordem estabelecida no CSS. Ou seja, se Newsidebar tem float: left; (flutuação à esquerda) deve ser colocado no HTML antes da DIV Main-Wrapper, ficando assim:
<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:section>
</div>
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
</b:section>
</div>
Então, NEWSIDEBAR fica na esquerda, MAIN-WRAPPER no centro, e SIDEBAR na direita.
valeu, muito obrigada pela dica... já estava enlouquecendo e não havia conseguido .
ResponderExcluirbjocas
De nada!
ResponderExcluirMuito Obrigado!!!!! Parabéns pelo blog.
ResponderExcluir