Como fazer templates - Parte 3

• Personalizando o cabeçalho

Oi :} No post anterior ajustamos a largura do template, hoje começaremos a dar estilo no lay colocando um banner no lugar do título e descrição padrão do Minima.
Personalizar o cabeçalho é algo fácil de se fazer. Primeiro você deve fazer um banner para o seu blog e utilizar nele as mesmas medidas que o seu template possui. Depois procure pelo trecho seguinte no seu html:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Acrescente height: alturapx; após a segunda linha do código e depois, background: url(link_da_imagem)no-repeat top left;. Apague border:1px solid $bordercolor;e deixe a margin em 0 auto. Assim:

#header-wrapper {
  width:660px;
  height: alturapx;
  background: url(link_da_imagem)no-repeat top left;
  margin:0 auto;
  }

Explicando:

width: é a largura do cabeçalho, substitua 660px pela largura total do seu banner
height: é a altura. Substítua alturapx pela altura do seu banner (avá).
margin 0 auto: deixa o cabeçalho centralizado.
background: é onde você vai colocar o link do seu banner. Hospede-o em um site e copie o 'direct link' dele.
no-repeat top left: vai deixar seu banner sem repetição e alinhado.

Editando o código, ficará mais ou menos assim:

#header-wrapper {
  width:660px;
  height:300px;
  background: url(http://i39.tinypic.com/znk4tx.png)no-repeat top left;
  margin:0 auto;
  }

Agora procure por:

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
  }

Apague a linha da borda e deixe a margem em 0, assim:

#header {
  margin: 0px;
  text-align: center;
  color:$pagetitlecolor;
  }

Ok, o banner está posto. #todoscomemora \o/
Mas Micka, o título e descrição do blog estão por cima do banner! E agora? É só colocardisplay:none; nos seguintes trechos:

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
  display:none;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
  display:none;
  }

Visualize o modelo. Suponho que tenha dado certo. Salve.
Por hoje é isso, no próximo post vamos dar estilo aos títulos. Se tiver dúvidas, deixe um comentário, ok? Beijinho e fiquem com Deus.