Anuncie Aqui Anuncie Aqui Anuncie Aqui

Adicionando coluna no template



Bom hoje eu vou ensinar aqui a como adicionar uma nova coluna ao blog,Também vou mostrar 3 tipos de posicionamento de colunas, antes de tudo quero avisar que esse tutorial é para que já tem conhecimento e exige muita atenção, aconselho antes de tudo vocês a fazerem um backup do seu template em caso de erros você poderá voltar para que era antes e começar tudo denovo então vamos ao trablalho:

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)

<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 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?
Espero ter ajudao e até a proxima.
                          Boa Sorte !

0 comentários: