Oi oi Galera!!
Essa é a segunda parte do tutorial "Criando um Template", do quadro "Para Blogueiras(os).
Ajustando as larguras do template
No post anterior começamos a modificação do modelo Minima mudando o background do template, nesse post vou explicar como ajustar as medidas do layout. O nosso ultimo passo foi adicionar a propriedade padding no código da área de postagens e da sidebar para dar um espaço entre as margens e o texto, se lembram? Se não lembram clique aqui e refresque sua memória.
Se você começou a modificação do Minima e não alterou a largura do template, provavelmente, após adicionar o padding no código e visualizar o modelo, deve ter percebido que o seu layout ficou desalinhado, assim:
Se isso aconteceu com o seu template, e é para ter acontecido, não entre em desespero, vamos resolver isso, fácil, fácil, siga o tutorial:
O que vamos fazer é aumentar a largura do #outter-wrapper de modo que a soma das medidas do #main-wrapper e da #sidebar-wrapper seja menor ou igual ao tamanho do #outter-wrapper.
Por padrão o Minima apresenta uma largura total de 660px, sendo 410px para a #main-wrapper e 220px para a #sidebar-wrapper. Dê uma olhadinha no código:
Obs.: Para encontrar os códigos eu fiz aquele esqueminha do Ctrl+F e digitei os seguintes códigos (um de cada vez)
/* Header
/* Outer-wrapper
/* Footer
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Agora vamos alterar as medidas.
O que iremos fazer é alterar o valor de 660px (no #header-wrapper, #outter-wrapper e #footer) por outro valor de sua preferência, alterando a largura principal você deverá modificar a largura do #main-wrapper e da #sidebar-wrapper de modo que a soma desses valores seja menor ou igual à largura total do template, assim o layout irá ficar bem alinhado.
No meu caso, eu não mexi nas larguras originais do #main-wrapper (410px) e da #sidebar-wrapper (220px) mexi apenas nas larguras #header-wrapper, #outter-wrapper e do #footer, mudando ambas para 700px.
Obs.: Para encontrar os códigos eu fiz aquele esqueminha do Ctrl+F de novo e digitei os seguintes códigos (um de cada vez)
/* Header
/* Outer-wrapper
/* Footer
#header-wrapper {
width:700px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 700px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#footer {
width:700px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Como podem ver, eu aumentei 40px nas larguras principais (header, outter e footer) e mantive a largura normal nas áreas secundárias (main-wrapper e sidebar). Esses 40px à mais fazem uma enorme diferença, fizeram com que o layout que antes estava bem desalinhado após a adição do padding, ficasse novamente alinhado.
Depois de mexer nas larguras o meu blog ficou assim:
Depois de mexer nas larguras o meu blog ficou assim:
A largura do seu blog fica totalmente à seu critério. Mas lembre-se sempre, que as larguras do #main-wrapper e da #sidebar-wrapper, deveram ser menores ou iguais à sua largura total.
Por hoje é isso pessoal!!
Se gostou do Tutorial deixe seu comentário ai embaixo, o seu comentário serve de incentivo para que haja continuação!!
Se ficou alguma dúvida, ou se você fez e o seu não deu certo, pode deixar sua pergunta nos comentários, responderei e resolverei seu problema o mais rápido possível!!
Links extras:
Template usado para o tutorial: Minima Blogger
XoXo
0 comentários:
Postar um comentário