Dividindo a Sidebar

E ai galera, qui quem fala é Lord Schiffer e hoje venho trazer mais um tutorial pra vocês! Bom, no tutorial de hoje, vou ensinar a dividir a sidebar, você deve ter ter visto este sistema, que é dividir a sidebar em: Header, Outer e Footer. Confira a Demo logo abaixo:

Demonstração

No mínima já vem como padrão os seguintes códigos:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Portanto, vá em >> Design >> Editar HTML >> e procure pela seguinte linha:

h2 {
e substitua todo trecho conforme citado acima, pelo seguinte trecho:

#sidebar-wrapper h2 {
background:url(TOPO DA SIDEBAR)no-repeat;
width:XXpx;
height:XXpx;
text-align:left;
font-weight:normal;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-family:XXX;
font-size:XXpx;
color:#XXXXXXX !important;
letter-spacing:1px;
line-height:XXpx;
}

#sidebar-wrapper .widget-content {
background:url(MEIO DA SIDEBAR)repeat-y;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#sidebar-wrapper .widget{
background:url(RODAPÉ DA SIDEBAR)no-repeat bottom;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
Agora basta editar as seguintes partes:

width:XXpx; ------LARGURA DA SUA IMAGEM
height:XXpx; -----ALTURA DA SUA IMAGEM
font-family:XXX;--DEFINA A FONTE DO TÍTULO(Arial, Calibri, Impact, etc)
font-size:XXpx;---DEFINA O TAMANHO DA FONTE(DO TÍTULO)
color:#XXXXXXX !important;--DEFINA A COR DO TÍTULO
line-height:XXpx;-----------É A PARADA QUE DEFINE SE O TÍTULO DA SIDEBAR VAI SUBIR(COM NÚMEROS NEGATIVOS) OU DESCER (COM NÚMEROS POSITIVOS

É só editar as partes mostradas acima, posicionando título, editando cores, fontes, etc.

Provavelmente as imagens vão ficar separadas, e para juntar você precisa usar padding ou até mesmo margin, como aqui já tem ensinando como usar Margin, não vou explicar aqui, peço que caso não saibam usar confira o seguinte tutorial:

Caso precise de padding e eu sei que vão precisar, só precisa ter esse conceito em mente: Margin afasta tudo que estar fora e Padding Tudo que estar dentro.

É isso ai pessoal, espero que tenham gostado e entendido como funciona que é o mais importante, caso tenham alguma dúvida que é normal, faça um comentário ou fale comigo no chat... até mais.