Bom, esse tutorial é meio complicado, mas se você prestar muita atenção eu acho que vocês conseguiram, caso contrario eu não recomendo esse tutorial para quem esta iniciando no ramo de HTML/CSS.
Vamos ao tutorial?
-x-
Gente, antes de mais nada vocês tem que desenhar o theme no PS, AQUI e AQUI tem a vídeo aula que ensinei a desenhar um Theme no PS. Depois do theme desenhado e salvo em formato de PSD, abra ele novamente e salve ele agora em formato PNG para cortarmos ele.
Cortando o theme no PS: Como eu falei, depois que você salvar o theme em PNG, abra a foto dele que você salvou e corte ele em 3 partes: Header (começo), pagina (meio), footer (fim). Irei usar o psd DESSEtheme para ensinar vocês. Aqui esta o theme cortado da maneira que ensinei: Header, page, footer.
Agora é a parte de passar ele para o HTML.
1- Você precisa desse código abaixo no 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;}
Explicação
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.
Outra coisa que preciso alertar:
Vocês tem que ter cuidado, pois uma </div> fora do lugar pode vir a desconfigurar totalmente o seu theme, então TOMEM CUIDADO COM AS </DIV>, elas são malvadas.
-x-
Etapa 2
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:
<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.
Pronto. Se caso não conseguirem ver alguns códigos pela dash entre na página do Lovers.
Se for útil de like (♥) e credite.
