Photobucket

30 de abr. de 2008

Separar main e sidebar (widgets)

Alguns modelos de templates (como o Minima) trazem o código de widgets do post (main) e da coluna (sidebar) juntos, como no exemplo abaixo:


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

Quando o trecho está assim, se você muda algo no widget da coluna a mesma modificação ocorre nas postagens, como nem sempre queremos que isso ocorra explicarei nesse post como separar os dois códigos para que você possa alterar cada um individualmente.

Copie o trecho do seu blog que se refere à essa mesma área acima e cole-a logo abaixo, ficando assim (só que com as definições do seu blog, é óbvio):

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

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Agora delete o que está em negrito nos dois trechos e pronto! Você já pode alterar cada elemento individualmente!
Só para exemplificar seu código deve ficar assim:

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

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

DICA: Tenha mais informações sobre a área de postagem e sobre a coluna nos links abaixo:

Main-Wrapper - Área total de postagem
Main-Wrapper - Desmembrando
Sidebar-Wrapper

0 Comments: