Photobucket

19 de jan de 2008

Modificar título da sidebar

Uma modificação que, se bem usada, deixa o blog bem bonito é a do o título da sidebar (coluna), que é o que vou ensinar como hoje. Vamos lá:

1º Passo
A primeira parte é procurar por esse trecho do seu código (não precisa expandir o modelo de widget) e colar o que está indicado em vermelho:

/* Sidebar Content
-----------------------------------------------
*/
.sidebar {
color: $sidebartextcolor;
line-height: 1.8em;
margin:
5px 0 10px 0;
}

.sidebar h2 {
color: #FFFFFF;
background: #000000 ;
margin: 30px 0 10px 0;
border: 1px solid $bordercolor;
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center;
}


.sidebar ul {
list-style:none;
margin:10px 0 10px 0;
padding:0 0 0;
}
.sidebar li {
margin: 5px 5px 5px 10px;
padding:10px 5px 5px
10px;
text-indent:-15px;
line-height:3px;
}
.sidebar
.widget,{
padding:0 0 1.5em;
}

ATENÇÃO: Não se esqueça que é para colar apenas o que está em vermelho, o resto é apenas para você se situar.
Agora para modificar:

.sidebar h2{
color: COR DA FONTE
background: COR DO FUNDO, SE PREFERIR PODE POR UMA IMAGEM
margin: MUDE OS VALORES PARA SE ENCAIXAR NO SEU LAYOUT
border: BORDA, MODIFIQUE COMO PREFERIR
line-height: DEFINE A ALTURA DA LINHA (não é o tamanho da fonte)
padding: A DISTÂNCIA ENTRE O TEXTO E AS BORDAS (mesmo que invisiveis)text-align: ALINHE O TEXTO COMO PREFERIR (CENTER, LEFT-esquerda OU RIGHT - direita)
}


Deu para entender o que é "padding", "text-align" e "margin? Ficou meio confuso, ? Vou criar um post e tentar familiarizar mais os elementos do Código CSS, vou tentar fazer um bem simples.

No mais, acho que dá para se modificar direitinho o título da sua coluna, ? Qualquer dúvida já sabem, só dizer!

Até a próxima!

2 Comments:

luztek said...

Olá,
acabei de descobrir o sue blog e estou a gostar bastante. Parabíns!
Sou deficiente visual - baixa visão - e estou a criar o meu primeiro blog, sendo que uma das minhas prioridades é conseguir fazer um blog acessivel a todos. Como as pessoas cegas utilizam leitores de tela, torna-sw obrigatório a descrição de imagens e menus. Contudo não consigo fazer isso nos títulos da sidebar nem nos menus gorizontais - linkbar. Pode ajudar-me?
Cumprimentos
Luís Melo

blogdeoclides said...

a dica é muito boa, realmente faz muita diferença um titulo assim, dá muita mais vizibilidade para o os assuntos,além de deixar o blog mais atraente, mas infelizmente esses recursos não funicionam no meu blog, nele o código é completamente diferente é do modelo rounparders4, até achei o sidebar lá chama sidebar box, mas o código não funciona nele, e pelo que eu vi a maioria do sites que usam isso usam a o modelo mínima.