Para criar uma Sidebar é simples.
Voces primeiro tem que ter a noção básica de HTML e alguns comandos. Como margin-left, margin-top, os positions e width.
MINI DICIONÁRIO AQUI
margin-left: para definir se é mais para direita ou esquerda.
margin-top: para definir o quão distante ficará do topo da tela. Quanto maior o número mais distante do topo vai ficar.
position: fixed; relative; ou absolute;: é para definir se ele vai ficar fixado, relativo a outra div e em movimento ou em movimento e absoluto.
width: o tamanho em largura da sidebar.
OBS* Quando se coloca o position:relative; numa div o “margin-left”, “margin-top” e seus opostos não funcionam assim, eles só funcionam se colocados como apenas, top, left, bottom, right.
EXEMPLO DE SIDEBAR:
NO CSS
#sidebar {position:fixed; margin-left:30px; margin-top:100px; width:200px; }
Já expliquei todas as funções desses comandos e a partir daí vocês podem fazer como desejarem.
Podem por background, border, alterar os números e por aí vai.
NO <BODY> (depois da div de centralização)
<div id=“sidebar”>
AQUI DENTRO VAI TITULO, IMAGEM, DESCRIÇÃO, LINKS E O QUE MAIS VOCÊS QUISEREM
</div>
COISAS QUE VÃO DENTRO DA SIDEBAR:
TITULO NO CSS:
Vocês pode fazer o titulo dessa maneira colocando a div com h3, assim:
#sidebar h3 {text-transform:uppercase; font-size:20px; text-align:center;}
E depois, arrumarem o tamanho da fonte, cor e etc.
PS* para deixar a cor do título de outra cor é só adicionar “color: #codigo da cor aqui” dentro da div. Tabela de cores aqui.
MINI DICIONÁRIO.
font-size:20px; é o tamanho da fonte;
text-align: center; é para deixar o título alinhado no meio; também tem text-align:left; e text-align:right;
text-transform:uppercase é para que as letras fiquem em maiúsculo
TITULO DENTRO DA DIV NO <BODY>
<div id=“sidebar”>
<h3>{title}</h3>
</div>
IMAGEM NO CSS.
Vocês pode fazer a imagem dessa maneira colocando a div com img, assim:
#sidebar img { width:100px; }
E depois, arrumarem o tamanho, que é o width. Depois modifiquem como quiserem, deixando redonda, colocando efeitos e etc.
IMAGEM DENTRO DA DIV NO <BODY>
<div id=“sidebar”>
<h3>{title}</h3>
<img src=“LINK DA IMAGEM AQUI’ />
</div>
LINKS NO CSS.
Vocês pode fazer dessa maneira colocando a div com a, assim:
#sidebar a { margin:5px; color:#aaa; font-size:11px; }
E depois, arrumarem o tamanho da fonte, cor e etc.
O hover se faz assim: (hover é quando passa o mouse sobre o link e etc)
#sidebar a:hover { color:#fedada; }
Depois vcs fazem o hover que desejarem. Eu apenas mudei a cor.
LINKS DENTRO DA DIV NO <BODY>
<div id=“sidebar”>
<h3>{title}</h3>
<img src=“LINK DA IMAGEM AQUI’ />
<a href=“LINK AQUI”> NOME LINK 1 </a>
<a href=“LINK AQUI”> NOME LINK 2 </a>
<a href=“LINK AQUI”> NOME LINK 3 </a>
<a href=“LINK AQUI”> NOME LINK 4 </a>
</div>
DESCRIÇÃO
Gente a descrição é bem simples, vcs apenas vão por {description} dentro da div e pronto, assim:
<div id=“sidebar”>
<h3>{title}</h3>
<img src=“LINK DA IMAGEM AQUI’ />
{description}
<a href=“LINK AQUI”> NOME LINK 1 </a>
<a href=“LINK AQUI”> NOME LINK 2 </a>
<a href=“LINK AQUI”> NOME LINK 3 </a>
<a href=“LINK AQUI”> NOME LINK 4 </a>
</div>
E se quiserem customizar a fonte e etc é só ir na div principal e por lá, fonte, tamanho, cor e afins. Assim:
#sidebar {position:fixed; margin-left:30px; margin-top:100px; width:200px; font-family:verdana; font-size:11px; }
E ESTÁ FINALIZADA A SIDEBAR
SEGUNDA SIDEBAR
E AGORA PARA FAZER UMA SEGUNDA SIDEBAR É SIMPLES DEMAIS
Vcs vão fazer exatamente igual a outra, o que vai mudar é:
margin-left e o nome da div.
Então uma segunda sidebar ficaria assim:
#seg-sidebar {position:fixed; margin-left:200px; margin-top:100px; width:200px; font-family:verdana; font-size:11px; }
<div id=“seg-sidebar”>
<h3>{title}</h3>
<img src=“LINK DA IMAGEM AQUI’ />
{description}
<a href=“LINK AQUI”> NOME LINK 1 </a>
<a href=“LINK AQUI”> NOME LINK 2 </a>
<a href=“LINK AQUI”> NOME LINK 3 </a>
<a href=“LINK AQUI”> NOME LINK 4 </a>
</div>
Viram que eu mudei apenas o margin-left e o nome da div.
VCS PODEM COLOCAR O NOME DA DIV DO QUE QUISEREM, E O VALOR DO MARGIN-LEFT COMO DESEJAREM.
Lembrando também que vcs não precisam colocar o titulo, a imagem, descrição e links na mesma ordem que eu. Alterem a vontade.
Essas são as principais noções básicas que vocês tem de ter para fazer um sidebar e qualquer coisa num theme.
TUTORIAL POR: DAI.
