Cabeçalho em toda a largura do blog - Go Imagine atualizado

Muita gente pediu para eu ensinar como fiz o cabeçalho ocupando toda a largura do blog, e hoje vou revelar o segredo. Na verdade não é um cabeçalho e sim um background (HÁ! por essa você não esperava!) 

Há uns tempos atrás eu visitei o Madtown e vi que o cabeçalho ocupava toda a largura, achei lindo e só depois raciocinei que era um background. Me inspirei na ideia e coloquei aqui no blog também! :3 Tava só esperando a Laís postar o tuto primeiro (já que foi ela que inventou seria injusto eu postar antes né?).

É bem simples de fazer e existem duas formas, uma com HTML e outra sem! Go!

Materiais

Obviamente você vai precisar de uma imagem (cabeçalho) pra colocar no background. Recomendo a largura1365px (é a que eu uso) mas pode ser maior. Aqui no meu note dá direitinho! Quanto a altura, 400px tá de bom tamanho.

Você também vai precisar de um cabeçalho transparente, pra que? Porque sem nada no cabeçalho, as postagens e a sidebar vão para cima e vão tapar seu background, então já faça uma imagem transparente de altura um pouquinho maior que o back e coloque no lugar do cabeçalho normal (no gadget do cabeçalho na guia design)

1ª forma: Pelo designer do modelo

Essa é a maneira que eu mais recomendo, pois é bem mais prático e fácil do que da outra forma que vou ensinar, mas tem um porém: Só da pra fazer upload de imagens com até 300KB, no meu caso não deu, pois a minha imagem é bem maior. Então se sua imagem  tem mais que 300KB tente a outra forma porque essa não dá :(

Após ter feito a imagem vá até: Design >> Designer do Modelo >> Plano de fundo e faça o upload da imagem, deixe na opção "não dividir em blocos" ou "dividir horizontalmente", as duas são boas! 

Para deixar o fundo cinza no resto do blog -como aqui no GI- vá em Design >> Designer do Modelo >> Avançado >> Planos de fundo e na caixinha "Plano de fundo externo" coloque a cor que desejar.

2ª forma: Pelo HTML

1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

3°) Substitua o código acima por esse:

body, html {
height: 400px;
margin: 0;
padding: 0; }

body {
background: url("URL do cabeçalho") repeat; }

html {
background: #cor; }

Substitua onde esta escrito "URL do cabeçalho" pela url da imagem e onde está #cor coloque o código da cor que desejar. Lembre-se de mudar a altura (400px) para a altura do seu cabeçalho/back!

É isso, desculpem-me por ter escrito tanto e ter dito quase nada, isso é fato nos meus posts né? haha

Boa dia gente! Hoje vou ensinar vocês a deixar o cabeçalho por toda largura do blog. 

Primeiramente, procure por body {

Você irá encontrar isso:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

Então apague, e no lugar cole este:

 body, html {
 height: 325px;
 margin: 0;
 padding: 0;  }
body {
color: $(body.text.color);
background: url("LINK DO CABEÇALHO") repeat; }
html {
 background: url("LINK DO PLANO DE FUNDO ABAIXO DO CABEÇALHO") repeat; }

Substitua 325 pela altura do seu cabeçalho.  A largura sugiro que seja de 1500px.
Agora, faça uma imagem transparente com a mesma altura do cabeçalho. Vá até Layout >> Adicione um cabeçalho, alias, essa imagem transparente. Veja uma demostração aqui.

Bom, o LINK DO PLANO DE FUNDO ABAIXO DO CABEÇALHO é a imagem cinza cheia de ''bolinhas'' abaixo do cabeçalho. (explicação perfeita né? kkk).   Se não quiser  uma imagem troque

background: url("LINK DO PLANO DE FUNDO ABAIXO DO CABEÇALHO") repeat; }

Por  background: #CódigoDaCor

Créditos ao blog Go Imagine!