Como Fazer um Layout: Retirando o Fundo Cinza do Modelo Viagem

O que acharam da primeira aula? Conseguiram fazer tudo direitinho? Então podemos ir para a segunda, que diga-se de passagem, é extremamente importante. Então abra seu bloco de notas, seu blog testes e vamos colocar os dedos na massa.



Nessa segunda aula iremos aprender a como retirar aqueles fundos cinzas nada agradáveis que são padrão do modelo viagem, que caso não lembre é o modelo que estamos usando como base. Iremos retirar da postagem, da sidebar e dos comentários em um só tutorial

Vamos começar!

Para retirar o fundo do corpo do blog:

Vá em Tema > Editar HTML > Ctrl + F > Pesquise por content-outer .content-cap-top {

Você irá encontrar esse código:

.content-outer .content-cap-top {  height: $(content.imageBorder.top.space);  background: transparent $(content.imageBorder.top) repeat-x scroll top center;}
.content-outer {  margin: 0 auto;  padding-top: $(content.margin);}
.content-inner {  background: $(content.background);  background-position: left -$(content.imageBorder.top.space);  background-color: $(content.background.color);  padding: $(content.padding);}
.main-inner .date-outer {  margin-bottom: 2em;}

Apague tudo  e cole o código abaixo, visualize e salve.:

.content-outer .content-cap-top {
   height: ;
   background: transparent ;
}
.content-outer {
   margin: 0 auto;
   padding-top: ;
}
.content-inner {
   background: ;
   background-position: ;
   background-color: ;
   padding: ;
}
.main-inner .date-outer {
  margin-bottom: 2em;
}

Para retirar o fundo cinza da sidebar:

Pesquise por .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
você irá encontrar o seguinte código:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {  margin-left: $(content.padding);  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Apague e cole o código abaixo:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {  margin-left: $(content.padding);  background: ;}

Para retirar o fundo dos comentários:

 Pesquise por Comments Background, ao encontrar o código abaixo, apague até top center.

 <Variable name="comments.background" description="Comments Background" type="background"

       default="#cccccc none repeat scroll top center"

Após apagar, cole o seguinte código no mesmo lugar. Visualize e salve.

<Variable name="comments.background" description="Comments Background" type="background"       default="transparent none repeat scroll top center" value="transparent url() repeat scroll top center"/> 

Nosso layout agora está sem nenhum fundo, nada agradável mas terá um tutorial apenas para arrumar esse detalhe de uma forma bem fácil e interessante. Inclusive, vou ficando por aqui mais encontro vocês logo logo. <3