Hello guys!Sou a nova postadora do DW (vamos dizer assim).Na verdade eu não sou bem uma nova postadora, é só uma postagem mesmo ver se eu vou me sair bem.Bem, aqui a minha "área" vai ser de tutos.
Agora sobre a postagem, foi difícil escolher um tuto pra vocês,então eu estava em duvida sobre um e outro, e resolvi postar os dois.Vamos lá?
Vamos começar primeiro, com o mais fácil, depois vamos para o maiscomplicadinho.
1.Personalizando a Barra de Rolagem.
Agora sobre a postagem, foi difícil escolher um tuto pra vocês,então eu estava em duvida sobre um e outro, e resolvi postar os dois.Vamos lá?
Vamos começar primeiro, com o mais fácil, depois vamos para o mais
1.Personalizando a Barra de Rolagem.
A barra de rolagem tem dois modelos, quadrada e redonda.Resolvi ensinar os dois modelos porque tem gente que gosta de um modelo e a outra não gosta, prefere de um modelo diferente.
Vamos parar de enrolar porque temos mais coisa pela frente.
Vá em modelo > Editar HTML > Procure por > ]]></b:skin>
Em seguida, escolha o código da sua barra, redonda ou quadrada.
Barra Redonda
::-webkit-scrollbar-thumb:vertical {
background: #e7b3c2;height:50px;
border: 2px solid #fff;box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #bebdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }:
::-webkit-scrollbar {height:10px; width:20px; background: url(fundo da barra de rolagem) repeat;box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
Barra Quadrada
{
scrollbar-face-color:#9B30FF;
scrollbar-highlight-color:#9B30FF;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#9B30FF;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#000000;
}
::-webkit-scrollbar {width: 12px; height: 4px; background: #000000; }
::-webkit-scrollbar-thumb { background: #9B30FF; }
Pronto.Agora é só personalizar do seu jeito.
2.Coluna de gadgets em cima
O resultado será esse:
1.Modelo > Editar HTML > Ctrl + F (ou F3) > Pesquise por:
.main-inner .column-left-outer { - Se sua coluna for do lado esquerdo
.main-inner .column-right-outer { - Caso ela seja no lado direito
Então adicione o código abaixo, depois do código que você procurou.
margin-top: -150px;
Vá aumentando os números se você quiser que fique mais acima.
Expliquei direitinho?Ufa!Espero que sim!Beijos!
Nenhum comentário:
Postar um comentário
Que bom que vai comentar !!
Mais para fazer isso leia as regrinhas:
- Aceito criticas ,sugestões e opiniões.
- Seguindo segue de volta,se comentar sobre o post.
- Não retribuirei a visita se não comentar sobre a postagem.
- Deixe o link do blog para eu retribuir a visita.
Eu e o DW agradecemos ! Fique com Deus .