Oi oi galeraa!!
Nos posts anteriores nós aprendemos à colocar um background no nosso blog, colocar cores no #main e na #sidebar, aprendemos a mexer com o Padding, e aprendemos a ajustar a largura do nosso template, hoje começaremos a dar estilo no layout colocando um banner no lugar do título e da descrição padrão do nosso template.
Personalizar o cabeçalho é algo bem fácil de se fazer. Venha conferir!!
Personalizando
o cabeçalho
Primeiro você deve fazer um banner
para o seu blog e utilizar nele as mesmas medidas que o seu template possui.
Depois procure usando
o esqueminha do Ctrl+F pelo trecho: /* Header
#header-wrapper
{
width:660px;
margin:0 auto
10px;
border:1px solid $bordercolor;
}
Acrescente
as seguintes linhas de código:
height: “altura”px;
background: url(link da sua imagem)no-repeat top left;
Agora faça as seguintes modificações:
Mantenha
a margin em 0 auto, e tire o 10px.
Apague
a linha border:1px solid $bordercolor;
O código
deverá ficar assim:
#header-wrapper {
width:660px;
height: “altura”px;
background:
url("link da sua imagem") no-repeat top left;
margin:0 auto;
}
Mas
Elen, o que é cada uma dessas linhas? Pera ae, já vou explicar!!
width:
é a largura do cabeçalho, substitua 660px pela largura total do seu banner
height:
é a altura. Substítua “altura”px pela altura do seu banner.
margin
0 auto: vai deixar o nosso cabeçalho centralizado.
background:
é onde você vai colocar o link do seu banner. Hospede-o,eu aconselho que faça
conforme a imagem a seguir:
no-repeat
top left: vai deixar seu banner sem repetição e alinhado no topo.
Editando
seu código, deverá ficar parecido com o meu:
Meu Banner tem a largura de 700px e altura de 350px
#header-wrapper {
width:700px;
height:350px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjisB0kPGsfOkAnv3r8wJA_WE2F8CMPhjAFSsk35nAo77ZD_OUckACChewpgYBGrNuL17xJkd54eaCDUP9B4PKjxMAOHvwqhlA24Jey2BrOC3Ratb4nd6kWA9mcujHvwOtBJ_LLZ7DIE7Y/s1600-r/banner+blog+teste.jpg)no-repeat
top left;
margin:0 auto;
}
Agora usando
o esqueminha Ctrl+F procure por #header {
E o
código deverá ser esse:
#header {
margin: 5px;
border: 1px
solid $bordercolor;
text-align:
center;
color:$pagetitlecolor;
}
Mude a
margem para 0px, e apague a linha border, o código deverá ficar assim:
#header {
margin: 0px;
text-align:
center;
color:$pagetitlecolor;
}
Agora
o nosso Banner está colocadíssimo!!
Cliquem
em visualizar e verifique se ele está lá!!
Mas Elen,
o título e a descrição do blog estão por cima do meu banner! E agora? O que eu
faço?
Bom,
agora é só colocar display:none; no código.
Mas
onde exatamente?
Aqui
ó:
Use o
esqueminha Ctrl+F e digite #header h1 { e você coloca isso ai, dentro da nossa
chave que está aberta, dê uma olhadinha no meu código:
#header
h1 {
margin:5px 5px 0;
padding:15px
20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font:
$pagetitlefont;
display:none;
}
Agora
faça o mesmo, porém, agora é com #header .description {
#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.
Agora deu tudo certinho, né? Se não deu, deixe seu problema ai nos comentários, vou tentar ajudar você!!
Se
gostou do Tutorial deixe seu comentário ai embaixo, o seu comentário serve de
incentivo para que haja continuação!!
Links
extras:
Template
usado para o tutorial: Minima Blogger
XoXo
0 comentários:
Postar um comentário