Desculpe pelo titulo enorme
Olá gente! O post de será 2 em 1, dois tutoriais em um só post. Como disse ontem o post de Como Criar Seu Layout só vai voltar amanhã e será a 2ª parte.
Mas não é sobre isso que vim postar, hoje como disse no começo são dois tutoriais em um post, será Como separar as postagens em caixas + 2 Modelos para título dos post.
Vamos lá!
COMO SEPARAR AS POSTAGENS EM CAIXAS
Primeiro vá em Modelo>> Editar HTML>> Aperte Ctrl+F e procure por:
.main-inner .column-center-outer {
Quando achar vai encontrar mais ou mesmo assim:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
Apague todo esse código e no lugar cole esse:
.post-outer {
margin: 4px 2px 10px;
background:#fff;
padding: 20px 10px;
}
Onde está em negrito é o espaço entre as caixas das postagens e onde está em itálico é a cor da caixa.
Créditos: Bunny Crazy
2 MODELOS PARA TÍTULO DOS POSTS
Antes de mostrar os dois modelos, se quiserem somente centralizar o título do post é só procurar por:
h3.post-title {
margin-top: 20px;
}
E no lugar colar isso:
h3.post-title {
text-align:center;
}
Agora vamos aos modelos:
1º Modelo
O primeiro é bem simples, mas ao mesmo tempo fofo quando personalizado.
Vá em Modelo>> Editar HTML>> Aperte Ctrl+F e procure por:
h3.post-title a {
Você vai encontrar mais ou menos assim:
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
No lugar desse cole esse outro:
h3.post-title {
margin-top: 10px;
text-align: center;
border-bottom: 1px solid #000;
}
h3.post-title a {
font-family: Arial;
color: #ffbcd9;
font-size: 23px;
text-shadow: 0px 1px 1px #b5b4b5;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
Você pode mudar o solid por:
dotted (.............)
dashed (--------)
Visualize se estiver tudo certo, Salve!
2º Modelo
Esse eu gostei bastante:
Vá em Modelo>> Editar HTML>> Aperte Ctrl+F e procure por:
h3.post-title a {
Você vai encontrar mais ou menos assim:
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
No lugar desse cole esse outro:
h3.post-title {
margin-top: -5px;
background:#f49bbc;
box-shadow: inset 0 0 5px #ff9aa4,1px 1px 1px #f6f6f6;
text-align: center;
}
h3.post-title a {
font-family: basicl;
color: #fff;
font-size: 20px;
text-shadow:1px 1px 1px #ff9aa4;
letter-spacing: -1px;
font-style: normal;
text-transform: lowercase;
-webkit-transition: all 0.5s ease;
o-font-weight: lighter;
}
Visualize se estiver tudo certo, Salve!
Pronto!!!
Espero que tenham gostado!