Neste post vou ensinar como fazer a caixa da sidebar e dos posts. Antes de tudo, isso nĂŁo Ă© algo de sete cabeças, mas tambĂ©m nĂŁo Ă© tĂŁo simples assim. Por um mĂnimo detalhe o seu theme todo pode ficar desconfigurado, entĂŁo preste bastante atenção na hora de colocar as divs no local correto.
Os cĂłdigos que colocarei a seguir sĂŁo os que eu uso nos meus themes, entĂŁo credite de usar.
Em todo theme tem uma largura determinada, pode ser de 900 a 800, dependendo de quem esta fazendo. Nesses valores Ă© onde ficarĂĄ a nossa sidebar e os nossos posts.
P.S.: Os seguintes cĂłdigos devem ser colocados no css.
text-align:justify;
color: #999;
font: 11px tahoma;
background: #COR;}
o BODY é a configuração do seu plano de fundo.
O background Ă© o que aparece no fundo. se vocĂȘ quiser uma imagem deve colocar assim no lugar:
background: url('URL DA IMAGEM');
O content serve para centralizar as caixas sidebar e post. Ele é a soma dos valores da sidebar e dos posts, e às vezes mais um pouquinho para separar as duas caixas e dar mais espaço, dependendo da pessoa.
#content {
width: 900px;
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;}
o width é o tamanho, nesse caso é 900. A soma das caixas da sidebar e post é 800, mas para dar mais espaço entre elas a gente coloca mais do que deveria ser, ou seja, 900 ou 820, mas isso varia dependendo da pessoa.
background-repeat: repeat-y como eu quero que ele se repita para baixo e deixar tudo centralizado eu coloco o repeat-y.
Na sidebar pode ficar a descrição do seu tumblr e o que vocĂȘ quiser. Normalmente ela tem o valor entre 200 e 300, sempre variando de acordo com a pessoa. Pode ficar tanto na esquerda (left), direita (right), topo (top) e baixo (down).
#sidebar {
background: #fff;
width: 300px;
float: left;
margin-top: 130px;
position: absolute;
padding: 1px;}
background Ă© a cor da sidebar, nesse caso ela estĂĄ branca (#fff).
width Ă© o tamanho dela, Ă s vezes vem acompanhado com o height (largura).
float Ă© se ela vai ficar na direita ou esquerda, como jĂĄ expliquei antes.
o margin pode ser top ou down e left ou right, nesse caso Ă© o top, entĂŁo quanto de valor vai ficar para cima.
position pode ser absolute ou relative, ou seja, se quando a pĂĄgina for para baixo ela irĂĄ acompanha-lĂĄ ou ficar no seu lugar determinado.
padding Ă© quanto de valor o conteĂșdo fica grudado na caixa.
Os posts tem em média o valor entre 490 e 550, sempre variando de acordo com a pessoa.
.caixa {background: #fff;
padding: 8px;
width: 500px;
margin-bottom: 30px;
margin-left: 350px;
overflow: hidden;}
background Ă© a cor dos posts, nesse caso ela estĂĄ branca (#fff).
padding Ă© quanto de valor o contĂșdo fica grudado na caixa.
width Ă© o tamanho da caixa dos posts, a maioria das pessoas usam 500px.
margin-bottom: Ă© quanto de valor uma caixa ficarĂĄ separada da outra.
margin-left Ă© a distĂąncia da esquerda para a direita.overlow: hidden Ă© para o conteĂșdo nĂŁo sair da caixa.
overlow: hidden Ă© para o conteĂșdo nĂŁo sair da caixa.
Passando para a tag body:
<body>
<div id="content">
<!----------------- FECHAR SIDEBAR ---------------->
<!----------------- FECHAR CAIXA ---------------->
<!----------------- FECHAR CONTENT ---------------->
P.S.: O content deve envolver a sidebar e os posts e deve ser fechada no final.
Ă isso, aguardem o prĂłximo passo e qualquer dĂșvida sĂł ir na ask.
areudirty
yousharknotpass
kianamaiart
pixelskylines
andulkaphoto
blakekathryn
theartofmadeline