Comandos básicos de uma sidebar

Neste post vamos falar sobre a variavel #sidebar-wrapper que corresponde a uma coluna.

Esta variavel está localizada no corpo do seu html, mais precisamente neste trecho abaixo:

#sidebar-wrapper { width: 200px; float:left; margin-left:10px; margin-top:10px; line-height: 1.5em; font-size:100%; 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 */ }

Se você quiser modificar a largura da coluna na sidebar, altere os valores que estão em width. Quanto maior for o valor da widht, mais larga será a sua coluna.

#Lembrando que o nome da sidebar pode variar, por exemplo: o nome dessa é "sidebar-wrapper" mais também pode ser "newsidebar-wrapper", em fim ele pode variar de nome.

Personalizando o título da sidebar

Procure pela tag:

.sidebar h2 {

Agora adicione logo abaixo desta tag os seguintes comandos:

color: #FFFFFF; /*--cor da fonte--*/ background: #000000 ; /*--cor de fundo--*/ margin: 10px 0 10px 0; border: 1px solid $bordercolor; /*--borda em toda coluna do titulo--*/ line-height: 1.5em; padding: 10px 0 10px 0; text-align: center; /*--alinhamento do texto do titulo--*/

Vamos identificar o que corresponde cada variável, para que você possa defini-las de acordo com sua preferência:

color: é a cor da fonte
background: é aqui que você estabelece a cor do fundo, se quiser pode acrescentar uma imagem
margin: determina a distância entre uma coluna e outra
border: é a borda em volta de toda coluna
line-height: é onde você define a altura da linha
padding: determina as margens internas, é a distância entre o texto e a borda
text-align: é o alinhamento do texto (pode ser: center= Centro, left= esquerda ou right= direita)

Acrescentar listas de links na sidebar:

Se no seu template não tiver a linha de código referente a linha de links da sidebar e você quiser acrescenta-la, para poder personalizar a maneira que seus links deverão se apresentar na sidebar. E acrescente este trecho:

.sidebar ul { list-style:disc; margin:0 0 0 0; padding:0 0 0 0; } .sidebar li { margin:0; padding:0 0 0 15px; }

#Lembrando que você deverá estabelecer os valores de margin e padding de acordo com o seu gosto. Uma dica é sempre ir visualizando antes de salvar as alterações.

Se você quiser acrescentar uma borda abaixo dos links da sidebar, acrescente:

border-bottom: 1px dotted $bordercolor;

No trecho:

.sidebar li{

do código acima, devendo ficar assim:

.sidebar ul { list-style:none; margin:0 0 0 0; padding:0 0 0 0; } .sidebar li { margin:0; padding:0 0 0 15px; border-bottom: 1px dotted $bordercolor; }

Entendendo melhor cada elemento da sidebar

.sidebar-wrapper -> é a área total da coluna.
.sidebar -> é o interior da Coluna.
.sidebar h2 -> é a área do titulo da coluna.
.sidebar. widget -> É a área de cada elemento (widget) da coluna. É onde fica o contéudo.
.main .widget -> É a área que trata do widget do post. Tudo que você alterar nesta coluna vai ser alterado também na postagem.
.sidebar li -> Se refere aos itens das listas de links.
.sidebar ul -> Se refere a lista de links inteira.

Alterando a posição da sidebar

Se e sua sidebar está no lado direito e você quiser mudá-la para o lado esquerdo
Encontre a tag: #sidebar
 E altere: “float:right;” para “float:left;
 Se for o oposto (sidebar no lado esquerdo trocada para o lado direito) é só alterar: “float:left;” para “float:right;”

#Tem várias outros comandos que podem ser aplicados em uma sidebar, tais com:

Shadown no título das sidebars
Glown em links
Arredondar as bordas da imagem de fundo do título de uma sidebar...

e várias outros comandos, se você acompanhar nossos tutos com certeza irá aprender, por isso não deixe de nos visitar... rsrs