Personalizar os gadgets + título da sidebar com tudo

Complementando o post de como personalizar a área de post + respetivo título com tudo (www), hoje trago um tutorial que ensina algo semelhante, mas para a sidebar. Lembrando também que já ensinei a dividir os gadgets e os posts em caixinhas, aqui, e avisando que o modelo que darei para os gadgets é o mesmo que dei para os posts. No fim tenho a mesma loooooonnnggaaaaaaaaaa explicação, mas que fala sobre tudinho, para saberem o que estão a fazer caso alterem ou apaguem alguma linha. Também ensinarei a aplicar ribbons - já postei algumas no blog - e deixarei modelos para outro dia. Afinal, tenho toda a vida para postar modelos de TUDO aqui... E ideias de sobra, já agora, embora fique com preguiça de por algumas em prática >.<

Personalizar os gadgets/sidebar

Vá ao seu HTML e procure por:

.sidebar .widget {

Substitua todo o código por isto:

   .sidebar .widget {
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;
}
   .sidebar .widget:hover {
border-radius: 5px 5px 5px 5px;
border: 3px solid #87CEEB;
outline: 1px dashed #DB7093;
-webkit-transition-duration: .60s;
}

Personalizar o título da sidebar

Procure por

/* Mobile

e antes de body.mobile cole o seguinte código:

  .sidebar .widget h2 {
background: url(LINK-DA-RIBBON)  no-repeat;
padding:10px 10px 10px 10px;
margin: -5px -20px 0px -20px;
text-align: center;
font-family: Colonna MT;
font-size: 17px;
color: #87CEEB;
text-shadow: 1px 1px 2px #E6E6FA;
width: 150%;
height: 100px; /*troque pela altura da sua faixinha*/
-webkit-transition-duration: .60s
}
  .sidebar .widget h2:hover {
background: url(LINK-DA-RIBBON-AO-PASSAR-O-MOUSE)  no-repeat;
letter-spacing: 2px;
color: #DB7093;
text-shadow: 1px 1px 2px #E6E6FA;
-webkit-transition-duration: .60s;
}

Entendendo os códigos...

Embora extensa, esta parte é muito importante para as principiantes, ou então, se alterarem algo, correm o risco de estragar o código. Ah, nunca tirem chavetas nem sinais de pontuação, tá?

• 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.

Era "só" isto, para já, Já avisei que podem fazer pedidos? Atenderei o mais depressa possível :) É bastante provável que, pelo menos no título da sidebar, a ribbon não assente como você quer, porque todas têm dimensões diferentes, então sugiro que tente mudar a margin, padding, e possivelmente a altura.

Ja nee ^^