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.