20.7.14

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 ^^


Sem comentários:

Enviar um comentário