Adicionar uma coluna no template

Postado por Lestat On 20:47: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 {
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 {
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 {
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 */
}

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.

Agora desça a página até encontrar esta parte do código:


e cole imediatamente abaixo este:




É 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)


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:







id='newsidebar' preferred='yes'>












Ou ainda, após :






se o seu template conter este trecho



Clique Aqui para saber mais.



Reações: 

0 Response to "Adicionar uma coluna no template"

Postar um comentário

Seja bem vindo!
Celestial Brightness.
Seu blog de noticias cultura e lazer

Termos de uso:
Todos os comentários são lidos e moderados previamente.
São publicados aqueles que respeitam as regras abaixo:

* Quer mostrar seu blog? Use a opção "Open ID";
* Seu comentário precisa ter relação com o assunto do post;
* Todos os comentários serão moderados;
* Não serão aceitos comentários ANÔNIMOS;
* Pedidos de parceria leia nossa Política
* Sugestões e Pedidos por favor entre em Contato

OBS: Leia antes
* Não serão aceitos comentários ANÔNIMOS deixe seu nome;
* Os comentários dos leitores não refletem as opiniões do blog.

*************** Bate Papo **************************

Top30 Brasil - Vote neste site!

Top30 os melhores da Internet

Hihera.com
Central Blogs

Link-me

Pagerank 3
Medir


DICAS DE CINEMAS

Faça seu comentário

Seguidore

Categorias

Mais baixados

Parceiros de Links Filmes.Josereal.com
Dir.Josereal.com

Recent Coments

Trafego 13/02/2009