Como não postei estas semanas todas, resolvi fazer este post para recompensar!
Este tutorial é bem complicadinho, mas se você prestar atenção nos mínimos detalhes do tuto, você vai conseguir! Não recomendo muito para quem está começando nesta área de HTML, mas se você for super concentrado e tiver muita vontade, vai conseguir!
DESIGN
Você precisa montar seu theme no PS, para isto, veja os seguintes tutoriais AQUI e AQUI. (Não se esqueça de salvar em PSD)
Depois disto, abra ele novamente em seu PS, e salve em PNG.
Depois pegue a foto PNG, e corte em 3 partes: Header (começo), Página (meio) e Footer (fim). Irei usar o PSD deste theme para ensinar vocês.
HTML
1 - Insira o código abaixo em seu CSS:
#pagina {background-image: url('http://static.tumblr.com/eun3dfg/o3ymk466s/page.png');width: 830px; margin-left: auto;margin-right: auto;}
#header {background: url('http://static.tumblr.com/eun3dfg/ZPwmk466i/header.png') no-repeat top center; width: 830px;height: 552px; margin-top: -10px;z-index:1000; margin-left:0px; margin-right:0px;}
#footer {background:url('http://static.tumblr.com/eun3dfg/cjLmk4679/footer.png') no-repeat; width: 830px; height: 66px; clear: both; padding-bottom: 0px; z-index:500;margin-left:0px; margin-right:0px;background-repeat: no-repeat;}
Agora é os códigos: Bom, você tem que ver a altura e a largura das imagens (Width e Height) eles são muito importante nesse código acima. O header vai definir o tamanho do seu Cabeçalho, você tem que colocar a largura e a altura da imagem que você cortou. O Pagina vai definir a largura da sua pagina, ou seja, onde o conteúdo irá ficar. O Footer vai definir a altura e a largura do fim da sua pagina. lembre-se que eles devem ter a mesma LARGURA. Para hospedar as imagens do seu theme vá NESSE site, depois se quiserem trocar é só alterar a url das imagens dos background:url e os valores de acordo com a largura que você fez e recortou o seu theme. As imagens é o que faram o seu theme.
Agora vamos para parte do HTML, logo abaixo de <body> você vai colocar esse código:
<div id="pagina">
<div id="header"></div>
<div id="footer"></div>
</div>
Agora vai vir a parte de colocar o conteúdo do theme dentro dessa coisa que você acabou de fazer.
Bom, volte novamente ao CSS e cole esse código lá:
#sidebar { width: 230px; text-align: justify; padding: 5px; float: left; margin-top: 0px; margin-left: 10px; border-right:0px dotted #c4c4c4;}
#conteudo { width: 540px; font-family: bold;text-align: justify; margin-left:5px; margin-right:26px; float: right; margin-top: 10px;z-index:500;}
O #sidebar vai definir a posição e a largura da sua sidebar. O #Conteudo vai definir a posição e a largura da sua caixa de postagem.
Se você colocar as larguras muito grandes as páginas iram descentralizar e o conteúdo do seu theme irá ficar lá embaixo do theme, então tome cuidado. O que comanda o código é os float e os margin-left e right então tomem cuidado com eles também.
Agora, no HTML o código irá ficar assim:
<div id="pagina">
<div id="header"></div>
<div id="sidebar">
CONTEÚDO DA SUA SIDEBAR AQUI
</div>
<div id="conteudo">
CONTEÚDO DOS POST AQUI
</div>
<div id="footer"></div>
</div>
Pronto, agora é só vocês irem colocando os conteúdos onde se pede cuidadosamente, principalmente na área dos post pq como eu disse, uma única </div> fora do lugar pode desconfigurar o theme. TOMEM CUIDADO. Não recomendo esse tutorial pra quem esta começando agora :/
Resumindo: O código do CSS irá ficar assim:
#pagina {background-image: url('http://static.tumblr.com/eun3dfg/o3ymk466s/page.png');width: 830px; margin-left: auto;margin-right: auto;}
#header {background: url('http://static.tumblr.com/eun3dfg/ZPwmk466i/header.png') no-repeat top center; width: 830px;height: 552px; margin-top: -10px;z-index:1000; margin-left:0px; margin-right:0px;}
#footer {background:url('http://static.tumblr.com/eun3dfg/cjLmk4679/footer.png') no-repeat; width: 830px; height: 66px; clear: both; padding-bottom: 0px; z-index:500;margin-left:0px; margin-right:0px;background-repeat: no-repeat;}
#sidebar { width: 230px; text-align: justify; padding: 5px; float: left; margin-top: 0px; margin-left: 10px; color: #5C4666; border-right:1px dotted #c4c4c4;}
#conteudo { width: 540px; font-family: bold;text-align: justify; margin-left:5px; margin-right:26px; float: right; margin-top: 10px;z-index:500;}
Altere somente o Width e o Height das imagens de acordo com o que você desenhar e cortar.
E o HTML que fica depois de <body> ficará assim:
E o HTML que fica depois de <body> ficará assim:
<div id="pagina">
<div id="header"></div>
<div id="sidebar">
CONTEÚDO DA SUA SIDEBAR AQUI
</div>
<div id="conteudo">
CONTEÚDO DOS POST AQUI
</div>
<div id="footer"></div>
</div>
E no código do HTML é só você ter cuidado com as </div> principalmente nas horas das tags do post.
Bom gente, o tuto é este! Lembrando que os créditos do tutorial é do LOD.
Ele deu muitoo trabalho, por isso, qualquer duvida é só me dizer pelos comentários, e não se esqueçam de comentar! :)
xoxo,
Danielle
Nenhum comentário:
Postar um comentário
-Sempre que comentar seja educado, faça sua crítica, mas com educação e moderação, e não use xingamentos ou palavrões;
-Comente sobre o post, pois não custa nada ler uma coisa que fiz com tanto carinho para você;
-Sempre que comentar deixe o link de seu blog para que eu possa retribuir sua visita
-Se quiser que eu siga seu blog, apenas comente que está seguindo, e já irei retribuir.
-Fico muito feliz por você comentar, sempre irei responder seu comentário com muito carinho!
~Volte sempre~