26.11.13

Dividir a área de post e a sidebar em caixas


Ok, último post de hoje. Eu hoje não trouxe nada de muito interessante ou exclusivo, mas são tutoriais que importam imenso na altura de criar um layout, e todos referentes à área de post e sidebar simultaneamente. São das primeiras coisas que eu vejo se quero fazer. Então, gómen pela falta de criatividade, mas eu tinha de postar isto. E em breve trarei coisas bem mais interessantes, já tenho 36 rascunhos prontos para vocês ^^ 
Bakice do dia: Comecei a ver um anime chamado Bleach e acho que o Ichigo vai destronar o Ed-kun de Fullmetal alchemist *.* Eu achava que isso era impossível, mas são os dois tão perfeitos :3 ...............

Vamos ao tutorial ;)



Dividir a área de post em caixas:

Procure por 
.main-inner .column-center-outer {
ou
.post-outer {
Substitua toda a área correspondente (www) por:
.post-outer {
background: #ffffff;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}

Para aumentar ou diminuir a distância entre um post e outro, apenas mude os primeiros 5px da linha da margin. Pode aumentar, mas se colocar 0px, o espaçamento anula-se.


Dividir os gadgets em caixas:

Primeiro, não usaremos HTML. Iremos colocar o fundo da side transparente, para isso vá a:
Design de modelos» Avançados» Plano de fundo da barra lateral » transparente (www)

Agora sim, no HTML, procure por
.sidebar .widget {

Acrescente dentro da chaveta:
background: #ffffff;
padding: 5px 5px 5px 5px;

Se quiser mudar a distância entre os gadgets, altera a linha dentro da chaveta que diz "margin: 10px 0;" e troque pela seguinte, substituindo alguns valores se quiser. O primeiro valor é a distância entre os gadgets:
margin: 5px 5px 5px 5px;

Ok, tudo pronto. Eu imagino que possam querer personalizar mais coisas como sombras, fundos, bordas e algo assim, mas este tutorial não se refere a isso. Ah, mas não se preocupem, estou a preparar ótimos tutoriais que ensinarão com TODOS os detalhes sobre cada uma dessas coisas. Além de que amanhã ou assim postarei, pelo menos, um post com todas as personalizações possíveis na área de post e gadgets, incluindo o título. Expliquei bem este tutorial, ou deixei confuso?


4 comentários: