Juntar ou separar gadgets/sidebar à postagem {nível: profissional}

Ora bem... Primeiro, visitem o meu portfólio de layouts: www ^^

Para hoje, trago um tutorial que nunca vi em lado nenhum. Ou melhor, já vi tutos a ensinar a colocar as postagens em "caixinhas", e afins, mas nunca vi ninguém a explicar devidamente como é que isso funciona, que palavras no html é que estão a fazer a diferença e como é que se pode aplicar o mesmo a outras áreas. Não dá para explicar muito bem sem mostrar, então simplesmente cliquem em ler mais, pois garanto que é um tutorial importante. A postagem é relativamente longa, porém - não leia se estiver cansado.

achadas aqui: www

POSTAGENS:

Aqui vamos trabalhar com 3 áreas diferentes. Normalmente, para se colocar os posts em caixinhas separados, as pessoas aconselham remover substituir um dos 2 últimos trechos pelo primeiro, mas garanto que é possível fazer os 3 conviver e até muito útil para quem quiser inventar algumas personalizações distintas. Portanto, aconselho a que o seu HTML contenha tudo isto, com as chavetas devidamente fechadas. Atenção: A personalização da fonte da postagem deve ser sempre colocada dentro da chaveta da primeira área!

.post-outer {

São as postagens em si, e é esta área que se usa para fazer as caixinhas. Se quiser as caixas, coloque um fundo (por exemplo: background: #fff;) aqui, e remova a linha de fundo nas duas áreas seguintes. O mesmo para as restantes personalizações, como borda e afins, e ajustamento de margens ou padding. Para visualizar: www

.main-inner .column-center-inner {

É a área por trás do .post-outer, ou seja, basta colocar fundo (e as outras personalizações) aqui, e não no post-outer, para os posts ficarem unidos. O resultado será algo assim: www

.main-inner .column-center-inner .section {

Funciona mais ou menos do mesmo modo que a área anterior, mas tem algumas complicações a mais (pelo menos para quem não tem muito paciência para lidar com margens), então mais vale a pena não se meterem com ela, ok?

SIDEBAR:

.sidebar .widget {

São os gadgets em si. Se quiser os gadgets separados, as personalizações deverão ser colocadas aqui e não na(s) área seguinte. A personalização da fonte deve ficar sempre aqui. Visualize: www

.main-inner .column-left-inner {

Claro, onde está escrito LEFT, também poderia estar RIGHT. Se as personalizações forem colocadas aqui e não na área anterior, então os gadgets não ficarão separados em caixinhas e sim unidos por um fundo, como na imagem seguinte: www

AMBAS:

.main-inner {

Este trecho serve para colocar um fundo (e editar outras coisinhas) numa área que fico por trás das postagens/área de post E da sidebar/gadgets. Não é muito comum de se ver por aí, mas dá um resultado interessante: www

COMBINAR ÁREAS:

E para aquelas pessoas que só costumam optar por uma coisa de cada vez, aqui eu vou mostrar algumas combinações interessantes que se podem fazer mantendo diversas áreas, todas dos meus layouts. São um nadinha arriscadas de tentar para quem é principiante em html, mas não é nada que não se consiga por tentativa e falha, mesmo exigindo tempo e paciência. Até pode mesmo personalizar apenas o primeiro dos gadgets, isolando-o numa caixa, e evitar as caixas nos gadgets seguintes, personalizando a sidebar (como no terceiro exemplo). Vejam aqui diversas combinações:

» gadgets separados + posts separados + fundo em ambas as áreas: www

» postagens separadas + fundo na área de post: www

» gadgets separados + fundo na sidebar: www

Era isto por hoje, minna-san! Talvez não seja nenhum daqueles modelos lindinhos de que estavam à espera, mas também já tenho contribuído bastante com coisas dessas aqui no blog, hoje decidi variar. Espero que tenham aprendido alguma coisinha :)