Tutorial:Programando um Layout - parte 2

xega mais,vamos fazer a segunda parte do tuto hoje....colocar as imagens do header,outher e footer.



desculpe não colocar as tags nas caixas de ode,pq quando eu coloco , ta dando bug ¬¬

lembrando quais são as imagens:

Topo:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3egPbBJVxSchJMkloTGcdl_KRhgKe4O8i8jc4lcxmYMWf6W3C5B5XxSBE0KpsKSdatBXfioc79NHitYfmInOVaDQsV1Q8FgkXI_IOGZ7asajW0LO2d7MW44hMk-cFILDsFJBshlZPR5g/s1600/topo.png

meio:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjriB9is758UmPSucEFUfJdBrxOVdzVTbhtn54OJNOGr2_pTozTyr3xy_Z8BijsUyOvPu3rySAoHyBdvH5MEL4KmzlU6FU1fUAvARjM0IKLKzFUjPCEiwwrLVPSUkKPUZYaWale-9phjH8/s1600/meio.png

rodapé:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLoEwV5gZnvwDFn_uAiLjHAE_YnIu1Ye2jPPTs2sdQJoaTBc7yoSFx_pWhwtPwAR5OapOTjvPBLNQcFHRz6rgZAuHQXO75E1nLtXZBJ1shHAqCkMFqjFEbKUPef5YUa-RD_C1G5p3-Eo/s1600/footer.png

primeiro procure por :

#header-wrapper


abaixo acrescente :

background:url(o url da imagem do header)no-repeat;
height:XXpx;


altere o "XX" pela altura da imagem
e o width,pela largura

da um visualizar e veja o header ja instalado

vamos agora procurar por

#outer-wrapper


abaixo acrescente :

background:url(url da imagem do outher)repeat-y;

altere o width para a largura da imagem.

OBS:Não coloque o height ,por que a imagem vai repetir.

por fim,procure por:

#footer


abaixo acrescente :

background:url(imagem do footer)no-repeat;
height:XXpx;

troque o "XX" pela altura
e no width,troque pela largura.

extra : vou colocar como retirar aquelas bordas das sidebares e do post

procure por :

border-bottom:1px dotted $bordercolor;


apage essa linha.

agora procure novamente por essa linha,e apague outra vez...

agora visualize,e veja que esta sem as bordas.


só isso ^^,na próxima aula ensinarei como instalar os gadgets ,colocar as publicidades e talz....

por favor pessoal,peço que deixe nos comentarios o url de onde esta sendo programando o seu template,para ver se vocês estão seguindo corretamente o tutorial