Olá gente, hoje vou ensinar como centralizar seu theme em todos os tipos de telas. Muitas vezes o theme fica “jogado” para um lado da tela ou então o header e outros elementos ficam fora de centro. Com esse tutorial você vai entender como fazer isso.
OBS.: Isso não é um tutorial sobre Tableless, isso não é Tableless, Tableless não é algo centralizado. É como o próprio nome diz: Sem Tabelas.
Vamos ao tutorial!
Você vai criar ids para alinhar seu conteúdo. Vamos começar pela id geral que vai englobar todo o conteúdo do seu theme, você pode chama-la de "conteudo".
Veja:
#conteudo { width:LARGURApx; position: relative; margin-left: auto; margin-right: auto; margin-top: auto;}Vamos dissecar esta parte:
width: LARGURApx: este é o tamanho que ficará seu conteúdo (deve ser calculado largura dos posts+(espaço se houver)+largura da sidebar).
position: relative: Determina que a posição do conteúdo é relativa ao tamanho do mesmo. Ou seja, se os posts/sidebar excederem o tamanho eles ficarão “cortados”.
margin-left: auto; margin-right: auto;: nem pense em mexer neste trecho! É ele que faz a “mágica” acontecer. Com a configuração auto, o browser calcula as distâncias e centraliza o seu conteúdo automaticamente.
margin-top: auto;: você pode deixar essa parte assim ou mudá-la dependendo da distância que quer que o conteúdo fique do topo.
Agora, alinharemos os posts:
#posts { width: LARGURApx; position: relative; float: LADO;}
Aqui, temos apenas uma definição nova, float. Float definirá de que lado ficará seus posts. Pode ser right (direita), left (esquerda) ou center (centralizado).Agora, a sidebar:
#sidebar { width: LARGURApx; postion: relative; float: LADO;}
Se você definiu float como right em #posts deve definir como left em #sidebar e vice-versa.Todos esses códigos devem ser colados na sua área de CSS. Entre <style> e </style> no Tumblr, no arquivo *.css do Wordpress e antes de }]]</b:skin> no Blogger.
Depois de <body> no Tumblr e no Blogger e em um dos arquivos do loop no Wordpress (single, index, archive...), cole isto:
<div id="conteudo"> <div id="posts"> SUA ÁREA DE POSTS </div> <div id="sidebar> SUA ÁREA DE SIDEBAR </div> </div>Agora é só editar conforme for para a plataforma que estejas usando!
Espero que tenham curtido o tutorial <3
boa dica , gostei
ResponderExcluiradorei seu blog haha bom conteúdo
amei
beijos
Fico muito feliz que tenha gostado Tainara!
ResponderExcluirBeeijos <3