27.11.13

Personalizar a área de post + título com tudo


Oyahou :) Como eu prometi, hoje irei ensinar a personalizar a área de post e os gadgets/sidebar com tudo. O que quero dizer? fundo, margin, padding, outline, sombra interna, sombra externa, bordas... Não irei explicar detalhadamente exatamente nada, mas isso é porque eu estou a acabar um conjunto de posts que ensinam os básicos, ou seja, que falam com todos os pormenores e possíveis aplicações de cada uma dessas coisas. Mas darei a base do código e, em breve também, possíveis modelos. Então, #enjoy!

Nota: Este post é só sobre a área de post, mas também ensinarei a personalizar o título da postagem. Incluirei hovers.



Personalizar a área de post

Vá ao seu HTML e procure por:
.main-inner .column-center-outer {
ou
.post-outer {
Substitua todo o código por isto:
   .post-outer {
background: #FFFFFF;
box-shadow: inset 0px 0px 10px #ccc, 0px 0px 5px #ccc;
border-radius: 5px 5px 5px 5px;
border: 3px solid #EEEEEE;
outline-offset: -5px;
outline: 1px dashed #87CEEB;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
-webkit-transition-duration: .60s;
}
   .post-outer:hover {
border-radius: 5px 5px 5px 5px;
border: 3px solid #87CEEB;
outline: 1px dashed #DB7093;
-webkit-transition-duration: .60s;
}

Personalizar o título da postagem

Procure por:
h3.post-title {
Substitua toda a área correspondente por:
   h3.post-title {
text-align: center;
font-family: Colonna MT;
font-size: 17px;
color: #87CEEB;
text-shadow: 1px 1px 2px #E6E6FA;
border-bottom: 1px dashed #87CEEB;
-webkit-transition-duration: .60s;}
   h3.post-title:hover {
letter-spacing: 2px;
color: #DB7093;
text-shadow: 1px 1px 2px #E6E6FA;
border-bottom: 1px dashed #DB7093;
-webkit-transition-duration: .60s;}
   h3.post-title a {
text-align: center;
font-family: Colonna MT;
font-size: 17px;
color: #87CEEB;
text-shadow: 1px 1px 2px #E6E6FA;
border-bottom: 1px dashed #87CEEB;
-webkit-transition-duration: .60s;}

Ok, agora explicando algumas coisinhas, tanto para a postagem como para o título da mesma:
  • Coloquei a negrito e em maiúsculas tudo o que são cores, para você poder mudar facilmente.
  • Se não quiser alguma coisa, apague a linha correspondente.
  • Não indico que mude os números, a não ser que seja minimamente experiente.
  • Background: é o fundo. Pode mudar a cor, mas eu não indico. Se quiser que seja uma imagem, troque a linha que diz background por "background: url(LINK-DA-IMAGEM) repeat;" Substitua a url.
  • Border-radius: são os cantos arredondados. 5px são um arredondamento ligeiro, pode aumentar ou diminuir o número, se o souber fazer bem.
  • Border: é a borda à volta de toda a área. Se não quiser a toda a volta, apague a linha e substitua pelas linhas da zona da borda que quiser» border-top: 3px solid #EEEEEE; /*borda do topo*/ border-bottom: 3px solid #EEEEEE; /*borda de baixo*/ border-right: 3px solid #EEEEEE; /*borda da direita*/ border-left: 3px solid #EEEEEE; /*borda da esquerda*/
  • Outline offset: é a distância entre a outline e os limites da área
  • Outline: uma linha fofa, parecida com uma borda, no interior da área
  • Box-shadow: sombra à volta da caixa. Se só quiser interna, troque a linha por "box-shadow: inset 0px 0px 10px #ccc;" e se só quiser externa, troque por "box-shadow: 0px 0px 5px #ccc;". As aspas não fazem parte!
  • Text-shadow: sombra externa do texto. 
  • Font-family: tipo de fonte da letra
  • Font-size: tamanho da letra
  • Text-align: se quer o texto centrado, à direita, à esquerda ou justificado
  • Color: cor da letra.
  • Letter-spacing: espaçamento entre as letras
  • Padding: espaçamento entre as letras e os limites da área. Também chamado de "acolchoamento". 
  • Margin: distância entre a área e alguma parte do blog. Não indico, mas se souber mecher bem nos números, poderia fazê-la subir, mover para algum lado, ou assim...
  • -webki-transition-duration: é o tempo que demora a passar de sem hover para com hover. Ou seja, apague a linha se preferir que a mudança seja repentina, mas eu acho feio. Prefiro a mudança gradual, como está.
  • Hover: é como a área fica ao passar o rato. Se quiser, apague desde a linha que tem hover até ao fim da chaveta correspondente. Assim, não mudará nada ao passar o rato.


Grandes explicações, não? Mas pelo menos podem colocar tudo o que quiserem xD Qualquer erro ou dúvida, avisem ;) Mas penso que não haverão erros. Eu dei códigos extensos não para complicar, mas para permitir que pessoas menos experientes tentam mais com que trabalhar e se vão familiarizando com os códigos. 

15 comentários:

  1. Muito legal *-*' Eu adoro efeitos hovers nos titulos das postagens , eu sou fanatica por eles kkkkkk' Nao sei porq...

    #TOO♥PANDAS

    ResponderEliminar
    Respostas
    1. Exato, eu sou totalmente viciada em hovers, em absolutamente tudo! Desde que aprendi a criar, mais ou menos em Junho, tenho evoluído imenso em HTML e não há nada em que não use pelo menos uma mudancinha :3 Ainda bem que gostou :)

      Eliminar
  2. cara, eu amo esses tutoriais seus onde você ensina coisas em hover, meu blog de testes está para sair do pc de tanto que ele se "move" kkk. Adorei *-*

    ResponderEliminar
  3. Respostas
    1. continua sendo ridículo

      Eliminar
    2. Uau, a discutirem por minha causa, quanta gentileza. Se bem que o layout anterior era meio piroso mesmo, mas ei, já tinha uns anos.

      Eliminar
  4. Amei o tuto; To usando no meu blog. Obg
    mythings2.blogspot.com.br/

    ResponderEliminar
  5. Este comentário foi removido pelo autor.

    ResponderEliminar
  6. Duvida rápida, como faço pra colocar uma imagem no titulo, tipo a de vocês que são 2 coroas?

    ResponderEliminar
  7. E poderia passar o modelo dos comentários com fundo transparente ? achei mt bem feito queria colocar no meu site se você permitir :3

    ResponderEliminar
  8. pode me dar uma ajudinha? Eu to tentando colocar o titulo do post mais pra baixo mas não consigo :(
    Já diminui e aumentei o numero padding mas não dá, help-me!

    ResponderEliminar
    Respostas
    1. Ah, adicione antes da chaveta de fecho dessa área o seguinte:

      margin-top: 20px;

      Mude o valor conforme quiser. E, ao contrário do padding, também funciona com valores negativos. O padding é espaçamento interno, funciona só entre LETRAS e os limites da área/caixinha, ou entre os limites de uma imagem e a área/caixinha, mas não muda a área/caixa em si de local. Para isso tem de ser "margin"

      Eliminar
  9. Amiga, Bom Dia. Eu tinha aumentado a coluna uma vez mas para encontrar os códigos das margens deu um trabalho, só que faz muito tempo e esqueci, por acaso vc sabe? quando aumento vai apena a área e as margens ficam no mesmo lugar.

    ResponderEliminar