18 março 2014

Tutorial - Como separar as postagens


Holla!! Como vão? Eu estou cansada pra caramba! Mas como já faz um tempinho que eu não posto, não podia deixar de dar uma atualizada! Por que, se não daqui a pouco as pessoas começam a achar que eu desapareci e não. Ainda não. Ainda estou aqui!
Separar as postagens é um tutorial bem simples e deixa o blog bem bonito, na minha opinião, porque eu pessoalmente acho, que quando uma postagem é colada na outra e não tem algo que indique uma divisória, fica confuso.
Eu sei que tem uma quantidade mais ou menos grandes de tutoriais como os que eu faço, mas eu não publico igual a todos, porque na realidade cada pessoa tem um jeito de explicar, né? E é muito frustrante chegar em um tutorial que você estava procurando e a postagem simplesmente mostrar o código e só. Eu nunca acerto fazer! Por isso eu tento fazer meus tutoriais o mais explicadinho possível, pra não restarem dúvidas de como fazer!
Bem, chega de blá blá blá, vamos ao tutorial!





PS. Tutorial testado no modelo de Viagem.

Clique em Design > Modelo > Editar HTML. Em seguida aperte Ctrl F para abrir a barra de pesquisa e procure por .main-inner .column-center-outer {. Se você nunca alterou a margem entre as postagens, aparecerá direitinho algo como:

.main-inner .column-center-outer {  
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none; 
}

Então, apague todo esse código e no lugar cole:

.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 5px;
border-radius: 50px;
}

- A última linha, border-radius: 50px;, se refere ás bordas arredondadas. Se você quiser que sejam quadradas, sem o arredondamento, diminua o "50" por "00". O mesmo se quiser diminuir as bordas arredondas. É só ir aumentando ou diminuindo o número de acordo com o que você quer.

- As partes verdes, se referem ao espaçamento entre as imagens e os textos das postagens, quando maior o número, maios a distância.

Após fazer as alterações, se necessárias, aperte em Salvar modelo e visualize para conferir se está tudo certo.



Espero ter ajudado!

Nenhum comentário:

Postar um comentário