Oi gente! Hoje eu vou ensinar a como você pode colocar diferentes efeitos no título das postagens para deixa-la bem bonitinha.
1. Vá em Modelo >>Editar HTML. Procure por:
/* Posts
Você vai encontrar algo parecido com isso:
/* Posts
----------------------------------------------- */
h3.post-title {
margin-top: 20px;
}
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
h3.post-title a:hover {
text-decoration: underline;
}
Esse grupinho é o responsável pelos títulos das postagens.Agora vamos identificar os códigos e descobrir a função de cada um.
h3.post-title { :É o responsável pelo título da postagem e sua configurações.
margin-top: 20px; : É o espaço entre título e área reservada aos posts.Se você aumentar o valor o título ira descer,se diminuir ira subir.
h3.post-title a { : Configurações do título quando o mouse não está sobre ele.
font: $(post.title.font) : Quer dizer que a fonte do título será a mesma da variável(a mesma que você ajustou no ''Designer de Modelo''.)Se não quiser apague essa linha.
color: $(post.title.text.color) : Determina que a cor do título será a que você ajustou no ''Designer de Modelo''.Se não quiser apague essa linha.
h3.post-title a:hover { : Configurações do título em estado houver,ou seja,quando o mouse está pairado sobre ele.
text-decoration: underline : Determina que o título ficará sublinhado quando passarmos o mouse sobre ele. (Você já vai aprender a tirar.)
Agora você modifica tudo do seu jeito. ''Mas Anna eu não sei fazer isso!'' Eu explico.
Modificando o h3.post-title { :
Para colocar:
Background: Com cor: background: #cor; Com imagem: background: url (link_da_imagem) repeat;
Linha no título: Veja aqui os estilos de linhas(leia ''Tipos de bordas[border-Style].
Embaixo do título: border-bottom: 2px dotted #ccc; Substitua dotted pela linha que quiser.
Em cima do título : border-top: 2px dotted #ccc; Substitua dotted pela linha que quiser.
Direita do título: border-right: 2px dotted #ccc; Substitua dotted pela linha que quiser.
Esquerda do título: border-left: 2px dotted #ccc; Substitua dotted pela linha que quiser.
text-align: isso determina em qual posição o título ficará alinhado, center (centro),right (direita) ou left (esquerda).
As propriedades descritas acima dever ser adicionadas embaixo de h3.post-title {
Modificando h3.post-title a { e h3.post-title a:hover { :
Para mudar:
Fonte : font-family: Georgia; Aonde está em vermelho coloque o nome da fonte escolhida.
Cor: color: #666666; Aonde está em vermelho coloque a cor que quiser,use a Tabela de Cores.
Tamanho da fonte: font-size: 24px; Modifique pelo valor que desejar.
Itálico: font-style: italic;
Negrito: font-weight: bold;
Para tirar o efeito sublinhado do título quando ele está em estado houver: Procure por
text-decoration: underline; e substitua underline; por none;
As propriedades descritas acima dever ser adicionadas embaixo de h3.post-title a { ou h3.post-title a:hover {
O post de hoje ficou gigante mas acho que deu pra entender tudo,é só prestar bastante atenção.
Kissus.
Neste tutorial,irei ensinar a você reproduzir este efeito, usando o PhotoFiltre (também pode ser no Photoshop)
