Como personalizar a sidebar

Você quer saber tudo sobre como personalizar a sidebar? Então chegou ao lugar certo :-)
Neste post vou detalhar todas as maneiras possíveis (que eu conheço, óbvio) de personalizar a sidebar (ou coluna do perfil, para alguns).

Primeiro quero lembrar que sempre pego o código do template Mínima (do Blogger) como base para ensinar as modificações. Templates que já foram alterados ou que são criações de outros blogs, podem apresentar algumas diferenças, por isso fique atento principalmente aos títulos que geralmente são os mesmos.

Onde encontrar o código da sidebar?

Procure por (ou algo semelhante):

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Como modificar a largura da coluna?

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Altere o valor de width (o que está em vermelho no código acima). Quanto maior o valor, mais larga será a coluna. Aqui o valor se apresenta em pixels, mas poderá ser determinado em % também. Vá alterando e visualizando por várias vezes, antes de salvar.

Como acrescentar um fundo colorido na sidebar?

acrescente a seguinte linha:
background-color: #000000;

o valor da cor aqui representada é a que equivale ao preto. A cor pode ser determinada por seu código html (como coloquei) ou por seu nome, por exemplo gray, red, black...O código todo então deverá ficar assim:

#sidebar-wrapper {
width: 220px;
background-color: #000000;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Como acrescento uma imagem ao fundo da coluna?

Para acrescentar uma imagem que deve se repetir continuamente, coloque:
background: url(endereço da imagem) repeat;

sobre este endereço da imagem, leia aqui (até o final)

para que a imagem se repita somente na horizontal:
background: url(endereço da imagem) repeat-x;

para que a imagem se repita somente na vertical:
background: url(endereço da imagem) repeat-y;

para usar uma imagem que não se repete:
background: url(endereço da imagem) no-repeat;

e ainda, para usar uma imagem que não se repete na vertical e manter o restante do fundo de uma cor determinada (como após uma imagem gradiente) use:
background: #7E7E7E url(http://i26.tinypic.com/2z9lkzk.jpg) repeat-x;

ou seja, criei uma imagem de 20X150 para que se repita horizontalmente (preenchendo a largura real da coluna). Para que haja continuação da cor do final do gradiente, copio o valor desta última cor que se apresenta e coloco antes do endereço da imagem.
Veja como:


e a imagem já colocada na sidebar:



Como personalizar os títulos na Sidebar?

No template Mínima não existe o trecho referente aos títulos da Sidebar, então, se você está usando este template, crie o código, caso contrário, se estiver usando um template cujos títulos deseja modificar, procure por:

.sidebar h2{
margin: 0px;
padding: 8px 5px 3px 15px;
}

Para colocar cor ou imagem no fundo dos títulos, segue as mesmas fórmulas para o background da coluna, descritos acima.

Para centralizar o título use:
text-align: center;
para alinhar à esquerda:
text-align: left;

padding cria um espaço entre as letras e os limites determinados para o título e se apresentam
no sentido horário:
padding:8px 5px 3px 15px;

8px: espaçamento do título para o topo
5px: espaçamento do título para a direita
3px: espaçamento do título para a base
15px: espaçamento do título para à esquerda.

Vá testando os valores e visualizando, até que fique do seu agrado.

Para estabelecer uma fonte diferente no título, leia aqui

Como separar as widgets na Sidebar?

Para separar as widgets da sidebar procure por (se já não estiver separada no seu template):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Separe desta maneira:

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

sendo que o que está em azul refere-se a Sidebar (esqueça o outro trecho por enquanto).

Para que as widgtes fiquem distintamente separadas, como nesta imagem:



deixe o código assim:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #CFC6AF; (aqui coloque o valor da cor escolhida)
border: 2px solid #34201F; (aqui o valor da cor da borda)
}

Óbviamente, para que haja contraste entre o background das widgets e da coluna toda, os valores (cores) escolhidos devem ser diferentes.
Veja que aqui, tanto para margin quanto para padding os valores correspondem aos quatro cantos em sentido horário, como explicado acima

margin: 0px 0px 20px 0px;
margin: topo, direito, base, esquerdo

uma margem de 20px na base garante o afastamento de uma widget da outra.

Edit: à pedidos....

Como colocar uma linha sob os links da Sidebar

Procure por :
.sidebar li{

e acrescente:
border-bottom: 1px dotted $bordercolor;

Para colocar bullets ou ícones antes do link, leia aqui

Se tiverem outras dúvidas, deixem nos comentários que vou acrescentando.

E é isso :-)