Fundo ATRÁS da área de post ou side

Ohayou ^^

No post de como começar um layout, eu disponibilizei 3 bases free completamente editáveis, todas em modelos diferentes. O segundo deles tinha um fundo por trás da side e do post, como poderão ver clicando em leia mais, e eu irei ensinar a fazer, já que várias pessoas não sabem. É muito simples e super rápido, portanto darei também umas orientações extra ;)

Prévia:

Código:

Então, para colocar aquele fundo escuro é simples. Dê Ctrl+F e procure por:

.main-inner {

Apague o que está dentro das chavetas e coloque o seguinte (retire as linhas que não quiser):

padding: $(content.padding) 0px;

background: #cccccc; 

border-radius: 10px;

box-shadow: 0px 0px 

box-shadow: inset 0px 0px 10px #ccc, 0px 0px 5px #ccc;

opacity: 0.65;

Pronto, era isto, vocês provavelmente sabem o significado das várias linhas e saberão editar exatamente como querem. Então, para o post não ficar só assim, aqui está o significado de toda a área com main-inner's:

.main-inner { /*área que ficaria por trás da side e das postagens */

padding: $(content.padding) 0px;

background: transparent;

}

.main-inner .column-center-inner { /*área que ficaria por detrás da área de post */

padding: $(content.posts.padding) 0px;

background: transparent;

}

.main-inner .column-center-inner .section { /*fundo do fundo (leu bem) das postagens. Serviria para unir os posts */

margin: 0 $(content.posts.padding);

background: transparent;

}

.main-inner .column-right-inner { /*zona por trás dos GADGETS da direita */

margin-top: 12px;

margin-left: $(content.padding);

}

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { /*zona por trás da SIDEBAR direita */

margin-left: $(content.padding);

background: transparent;

}

.main-inner .column-left-inner { /*zona por trás dos GADGETS da esquerda */

margin-top: 12px;

margin-right: $(content.padding);

}

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { /*zona por trás da SIDEBAR esquerda */

margin-right: $(content.padding);

background: transparent;

}

.main-inner .column-left-inner,

.main-inner .column-right-inner { /*Gadgets dos dois lados */

padding: 0px 0px;

}

Pronto, assim facilita na hora de criarem as vossas próprias edições e fazerem algumas descobertas sobre os códigos. Ja nee ^^