Tutorial - Área dos posts separados

~ fofo

Olá meus amores, hoje estou tão feliz -

A pedidos da Stefani (www), vamos aprender a separar a área do posts do blog e deixá-las com as bordas arredondadas.. parte do código é do BC, mas editado por mim. Quem estiver curioso, clica em leia mais para ver o resto!

1. Vá no HTML do seu blog e procure (Crtl + F) por .main-inner .column-center-outer {
Se você ainda não mexeu nesta área do layout ela estará mais ou menos assim:

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

2. Apague tudo e substitua pelo código abaixo:

.post-outer {
margin: 4px 2px 10px;
background: #fff; /* Fundo dos posts, está na cor Branca */
padding: 20px 10px; /* Espaços */
box-shadow: inset 0 0 10px #d6d6d6, 0 0 5px #ccc; /*sombra*/
border-top: 5px solid #FA42A5; /* cor da borda de cima */
border-bottom: 5px solid #FA42A5; /* cor da borda de baixo */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.post-outer:hover {                                                                                                                  border-top: 8px solid #FFB6C1; /* cor da borda superior quando passa o mouse */             border-bottom: 8px solid #FFB6C1; /* cor da borda inferior quando passa o mouse */              }

Se você assim como eu, não quiser o hover apague o código em vermelho :3

 Você pode mudar as cores com essa paleta de cores (www)

O Código acima irá apenas separar as postagens do seu Blog, mas ainda não deixará as bordas arredondadas, para arredondar, acrescente esse código:

border-radius: 11px;

Visualize se estiver tudo ok, salve!

Ufaa! demorei para fazer esse post! Prontinho, as suas postagens já estão separadas e com as bordas arredondadas. Espero ter ajudado a Stefani e a todos vocês também!

Qualquer dúvida comentem, responderei ao visualizar!