Olá!!! Respondendo a uma dúvida feita lá no UserVoice do Reino Kawaii, hoje vou mostrar como posicionar as barras laterais ou sidebars e a área de postagem de um blog, isso é, deixá-las mais para cima, mais para baixo, perto do cabeçalho ou longe; mais para a esquerda ou direita você pode deixar de forma básica no Designer de Modelo (Modelo-Personalizar), modificando as larguras do blog (Modelo-Personalizar-Ajustar Larguras). Façam em um blog de testes primeiro para não danificar nada na estrutura de seu layout, apesar de ser super fácil sempre é bom testar neh. Vamos lá!
1. Sidebar Esquerda
Em Modelo - Editar HTML procure por uma área semelhante ou igual a essa:
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
Acrescente margin-top, que faz com que possamos posicionar elementos em um layout com relação ao topo, ficando assim:
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
margin-top: -200px;
}
Troque o -200px por outro número de acordo com o que desejar fazer, lembrando que o número negativo fará com que a sidebar suba, o positivo fará com que ela desça.
2. Sidebar Direita
Em Modelo - Editar HTML procure por uma área semelhante ou igual a essa:
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
Acrescente margin-top, que faz com que possamos posicionar elementos em um layout com relação ao topo, ficando assim:
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
margin-top: -200px;
}
Troque o -200px por outro número de acordo com o que desejar fazer, lembrando que o número negativo fará com que a sidebar suba, o positivo fará com que ela desça.
3. Área de Postagens
Em Modelo - Editar HTML procure por uma área semelhante ou igual a essa, que fica geralmente dentro de /* Posts:
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
Acrescente margin-top, que faz com que possamos posicionar elementos em um layout com relação ao topo, ficando assim:
.main-inner .column-center-inner {
padding: 0 $(main.padding);
margin-top: -100px;
}
Troque o -100px por outro número de acordo com o que desejar fazer, lembrando que o número negativo fará com que a área de postagem suba, o positivo fará com que ela desça.
Só isso. Simples não é? Beijus ;3
Que bom que você postou sobre isso!!
ResponderExcluirSempre me perguntei e procurei sobre como posicionar a sidebar e área das postagens,seu tutorial vai me ajudar muito!
Muito Obrigada!!
http://sarang-cute.blogspot.com.br/
muito bom tuto, gostei :)
ResponderExcluir-kissus-
Amei <3
ResponderExcluiresse post salvou meu layout
Amei, ótimo tutorial!
ResponderExcluirvaleu ajudou muito
ResponderExcluirOe, amei o tuto e me ajudou tipo super, kiss...
ResponderExcluir~> Mini Realeza<~