Personalizando o content-wrapper – Parte 1

Content-wrapper, pra quem não sabe, é a "coluna principal" onde ficam a sidebar (coluna lateral) e o main-wrapper (área de postagem). Se você usar o Mínima como base para personalizar seu template/layout, você vai perceber que ele não existe no CSS, só no HTML, deste jeito (veja o sublinhado):

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
<b:widget id='Text1' locked='false' title='Sobre mim' type='Text'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper –>

Nele mesmo, não dá pra fazer muita coisa. Eu só adiciono quando quero usar transparências no layout, como nesse aqui. Se você perceber, o topo e o footer dele são transparentes pra aparecer o background. Sem o content-wrapper, a imagem que se repete na área dos posts + sidebar ia atravessar por trás deles dois. Exemplos (clique pra ver maior):

Desse lado é SEM o content-wrapper, do lado de lá é COM o content-wrapper. Viram a diferença? Então, pra adicionar o content-wrapper é só repetir o código do outer. Coloque abaixo dele, ficando assim:

#outer-wrapper {
  width: 638px;
  margin:0 auto;
  padding:0;
  text-align:$startSide;
  font: $bodyfont;
  }
#content-wrapper {
  width: 638px;
  margin:0 auto;
  background: url(url da imagem aqui) repeat-y;
  padding:0;
  text-align:$startSide;
  font: $bodyfont;
  }

Por hora, é isso. Nos próximos tutoriais vou mostrar como personalizar a área de postagem e a sidebar, separadamente. /love