Big Tutorial criando seu layout

Personalizando o Modelo

1. A primeira coisa a se fazer é arrumar a base do template. Vá em Modelo > Personalizar e deixe no modelo Viagem azulzinho, igual da imagem abaixo.

2. Agora vá em Plano de Fundo > Remover imagem e adicione um background de sua preferência. Tem vários sites que disponibilizam utilitários. Infelizmente eu não tenho tantos backgrounds salvos pra mostrar pra vocês, mas é só procurar um pouquinho que vocês acham.

3. Faça os ajustes exatamente como está nas imagens abaixo:

Isso é o básico! Depois é só ir personalizando links, textos, etc de acordo com a sua preferência.

Personalizando o HTML

1. Se vocês fizeram como eu falei e colocaram no modelo Viagem, vão reparar que ele possui bordinhas e ondinhas na parte superior. Nós vamos removê-las! Procure por .content-outer .content-cap-top { e você vai achar  um trecho assim:

.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);
}

Apague TODAS as partes destacadas em vermelho. Visualize se deu certo e salve.

2. Agora vamos juntar a barra lateral (sidebar) com as postagens. Caso você não queira fazer isso, desconsidere essa parte. Procure por .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { e você vai achar isso:

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

Apague as partes em vermelho, visualize se deu certo e salve.

3. Vamos juntar o cabeçalho com a área das postagens. Novamente, se você não quiser fazer isso, desconsidere essa parte. Procure por /* Tabs e um pouco abaixo dessa tag você vai achar isso:

margin: 1em 0 0;

Apague essa parte! Agora procure por padding: $(content.padding) 0; e abaixo dessa tag acrescente o seguinte código:

margin-top:-10px;

Altere esse número até que o cabeçalho junte com as postagens.