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.
gracieabrams
blakekathryn
kianamaiart
baratheonpilled
amandla
