2 Tutoriais - Postagens em caixa + Data bloquinho

Boa tarde donuts, tudo bom com vocês? Comigo, estou bem, mesmo que segunda-feira inicie a semana de provas. Hoje eu iria trazer duas postagens mas acabei me lembrando que tem o aniversário de 5 anos de meu priminho, e só vou poder postar um post mesmo.

Hoje vou trazer 2 toturiais: dividir os posts em caixa e personalizar a data em estilo bloquinho, previews aqui. É muito importante usar estes dois tutos juntos, pois a data só funciona quando os posts estão divididos em caixas. Se quiser aprender, basta seguir este post.

Posts em caixa:

Vá em modelo > editar HTML > aperte F3 > e procure por: .main-inner .column-center-outer {

Você encontrará algo parecido com isto:

.main-inner .column-center-outer {

background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image:none;}

Apague esse código todo e cole este:

.post-outer {

background: #fff; /* Fundo da postagem */

padding-top: 4px; /* Espaço do topo */

padding-left: 5px; /* Espaço da esquerda */

padding-right: 5px; /* Espaço da direita */<

margin: 5px 3px 25px;

} 

Visualize e salve, agora vamos vamos personalizar a data e deixá-la no estilo bloquinho
Aperte F3 e procure por: .main-inner h2.date-header {

E apague esse código e substitua por este, alterando o que estiver em negrito:

.main-inner h2.date-header {

font: normal 10px Tahoma;

color: #F6CFAE;

background: #fff;

border: 1px #eee solid;

margin-top: -10px;

margin-right: 3px;

margin-left: 3px;

text-align: center;

padding: 2px;

-webkit-transition-duration: 1.00s;

}

.main-inner h2.date-header:hover {

color: #FF8F98;

-webkit-transition-duration: 1.00s;

}

Visualize e se estiver dado tudo certo é só salvar. Pronto, agora suas postagens e datas estão no estilo bloquinho.  O crédito das postagens em caixas vão para o blog Part Of Me, já a personalização da data, foi encontrada a muito tempo e não lembro bem onde encontrei.

Enfim, se usar credite. Tenham novamente uma boa tarde e espero que tenham gostado bastante do post de hoje, o meu primeiro tutorial aqui no Rain HTML, talvez o único, mas se eu encontrar algo único, eu posto aqui pra vocês. Xoxo.