Oi oi galera!!!
Sexta parte do tutorial "Criando um template" do quadro "Para Blogueiras(os)"!!
No tutorial de hoje vamos personalizar o título e rodapé (área dos marcadores, comentários e nome do autor) das nossas postagens.
Personalizando o título e o rodapé das postagens
Vamos começar, e para isso devemos localizar (usando o
Ctrl+F) .post h3 {
Deverá aparecer o seguinte código:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight: normal;
line-height:1.4em;
color:$titlecolor;
}
Agora podemos modificar cada linha do código do jeito que
você bem quiser, da mesma forma que mudamos os títulos da #sidebar-wrapper, você se lembra?
Se não lembra, veja, vou ensinar novamente!
Lembre-se: Muito cuidado com a linha padding.
De resto você pode mexer em tudo!
Coloque um background, uma fonte diferente, coloque bordas,
personalize do seu jeito.
Olhe como eu fiz no meu:
.post h3 {
margin:.25em 0 8px;
padding:0 0 2px;
font-family: Sacramento;
font-size:20px;
font-style: oblique; /* Texto Obliquo */
line-height:1.2em;
color: #000000;
background: #FFFFFF; /*Fundo Branco */
text-align:center; /* Texto centralizado */
border: 2px dotted #FE2E2E; /* Borda vermelha em volta do título */
}
Eu mudei tudo, deixei ao meu gosto, e você pode fazer o mesmo.
Agora vamos alterar a cor do título em estado a:hover
(quando o mouse passar por ele), atualmente no blog está uma cor marrom, e
quando passamos por cima fica preta.
Usando o Ctrl+F procuraremos por .post h3 a
E o seguinte código deverá ser encontrado:
.post h3 a,
.post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3
strong, .post h3 a:hover {
color:$textcolor;
}
O que você vai fazer é alterar as variáveis (partes em que
contenham um cifrão “$”). Em color:$titlecolor coloque a cor do título da
postagem, em color:$textcolor coloque a cor que o título terá quando o mouse
passar sobre ele.
Veja como eu fiz no meu:
.post h3 a,
.post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color: #FE2E2E; /* Vermelho */
font-weight:normal;
}
.post h3
strong, .post h3 a:hover {
color:#000000; /* Preto */
}
Eu determinei que o meu título será vermelho e quando passarmos
o mouse sobre ele, ele ficará preto.
Primeira parte do tutorial concluída!!
Personalizando o
Rodapé das postagens
Usando o Ctrl+F procure por .post-footer {
Deverá aparecer o seguinte código:
..post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Essa parte do código é a responsável pelo #footer (rodapé)
das postagens. Por padrão do modelo Minima é tudo simples, sem estilo nenhum.
Agora altere da forma que quiser, do mesmo jeito que fizemos
com o título.
Veja o meu:
.post-footer {
margin: .75em 0;
background: #000000; /* Fundo Preto */
padding: 4px;
color:#FFFFFF; /* Texto em Branco */
text-transform:normal;
letter-spacing:.0em;
font-family: Sacramento;
font-size: 12pt;
font-style: Oblique; /* fonte obliqua */
line-height: 1.8em;
border: 2px dotted #FE2E2E; /* Borda vermelha em volta */
}
Esse é o modo como eu deixei o rodapé das minhas postagens para deixar bem visivel a mudança,
você irá fazer da forma que você bem quiser!!
Bom, esse foi mais um tutorial, espero que tenham gostado!
Se gostou deixe seu comentário ai!! Ele serve de incentivo para a continuação do quadro "PARA BLOGUEIRAS(OS)"
Se tiver alguma dúvida use os comentários para tirá-las!!
0 comentários:
Postar um comentário