Photobucket

5 de mai. de 2008

Duas colunas, duas Formatações

Seu blog tem duas colunas e você quer deixar cada uma com uma "cara" diferente, mas não sabe como?
Seus problemas "se acabaram-se"... rs
Esse post vai te mostrar como fazer isso e olha que não tem nada de muito complicado, gente!!

ATENÇÃO

1. Esse tutorial está sendo feito com base no Template Mínima e, segue a idéia de que você já tenha duas colunas (além da dos posts) no seu blog. Talvez o seu blog não esteja com essas definições, se for o caso, entre e contato e veremos o que dá para fazer, ok?
2. Usei as definições dadas pela Ariane nesse tutorial dela para adicionar colunas.
3. SEMPRE SALVE UMA CÓPIA DE SEGURANÇA DO SEU MODELO ANTES DE MODIFICÁ-LO!


Vamos lá!


1º Passo - Criar uma nova 'class'

Iremos criar uma nova 'class' que será atribuída para a segunda coluna, para começar só colaremos as informações da primeira coluna, ok?

Não expanda o modelo de widgets!


Procure por esse trecho do seu blog (lembre-se que esse trecho é genérico, no seu blog pode ter algumas diferenças):

Copie o que está em negrito e cole embaixo dele mesmo, ficará assim:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}



Perceba o trecho em azul do segundo SIDEBAR CONTENT, ele contem MAIN, é preciso deletá-los para que não haja duas informações sobre o mesmo trecho. Delete apenas o que está em azul, se no seu blog não está assim, siga as alterações como base e muito cuidado.

Até agora o segundo SIDEBAR é apenas uma cópia do primeiro, é preciso renomeá-lo para criar a nova 'class', eu usarei NEWSIDEBAR. Todo lugar que tiver SIDEBAR (apenas do trecho colado, gente) coloque NEWSIDEBAR. Ficará assim:


/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* NewSidebar Content
----------------------------------------------- */
.newsidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.newsidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.newsidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.newsidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


Pronto, já temos uma nova 'class'. Salve o modelo.

2º Passo - Atribuir a 'nova class' para a segunda coluna

Não expanda o modelos widgets!

Procure por esse trecho:

<div id='newsidebar-wrapper'>

<b:section class='sidebar' id='newsidebar' preferred='yes'/>

</div>

Esse é o trecho da segunda coluna, no seu template a id (o que está em azul) pode estar diferente. Perceba o que está em negrito, é esse o nome da 'class' a qual pertence a coluna, mude-o para o nome da 'class' que criamos! Eu coloquei 'newsidebar' e é isso que colocarei lá:
Ficará assim:

<div id='newsidebar-wrapper'>

<b:section class='newsidebar' id='newsidebar' preferred='yes'/>

</div>


Visualize seu blog e veja se está tudo certo.
Lembre-se que ainda nada foi modificado na segunda class, logo as duas colunas continuam idênticas. Se não houver nenhum problema, salve o modelo e agora é de personalizar. Se você não sabe como fazer, use esse post!

DICA
Suas colunas estão tortas e deformando o template? Use esse tutorial (também da Ariane) e alinhe-as!

0 Comments: