Barra de rolagem personalizada

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Barra de rolagem personalizada

Mensagem por RodrigoNunes em 25/11/12, 05:11 pm

Ola, quero saber os procedimentos para deixar a barra de rolagem do meu forum igual ao desse:
http://narutorpgstorm.ultimaterpg.net/forum




Fórum: http://darkgames.forumeiros.com (phpBB 3)

Imagens do problema:


Última edição por RodrigoNunes em 25/11/12, 10:57 pm, editado 1 vez(es)
avatar

RodrigoNunes
Nível 8

Masculino
Inscrito dia : 15/09/2012
Mensagens : 130
Pontos Ativos : 184

Ver perfil do usuário http://darkgames.forumeiros.com

Resolvido Re: Barra de rolagem personalizada

Mensagem por BrunoH. em 25/11/12, 05:23 pm

Olá!
Aceda a "Folha de Estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS
Código:
Código:
::-webkit-scrollbar{background:#fff;height:16px;overflow:visible;width:20px}::-webkit-scrollbar-button{display:none;height:0;width:0}::-webkit-scrollbar-track{-moz-background-clip:border;-webkit-background-clip:border;background-clip:border-box;border:solid transparent;border-width:0 0 0 4px}::-webkit-scrollbar-track:hover{-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1);-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1);background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.1)}::-webkit-scrollbar-track:active{-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07)}::-webkit-scrollbar-track:horizontal{border-width:4px 0 0}::-webkit-scrollbar-track:horizontal:hover{-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,.1);-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}::-webkit-scrollbar-track:horizontal:active{-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);box-shadow:inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb{-moz-background-clip:border;-moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);-webkit-background-clip:border;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);background-clip:border-box;background-color:rgba(0,0,0,.2);border-width:1px 1px 1px 5px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);min-height:28px;padding:100px 0 0}::-webkit-scrollbar-thumb:hover{-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}::-webkit-scrollbar-thumb:active{-moz-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);background-color:rgba(0,0,0,0.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)}::-webkit-scrollbar-thumb:horizontal{-moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.07);-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.07);border-width:5px 1px 1px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.07);padding:0 0 0 100px}::-webkit-scrollbar-corner{-moz-background-clip:border;-moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);-webkit-background-clip:border;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);background:transparent;background-clip:border-box;background-color:#f5f5f5;border:solid #fff;border-width:3px 0 0 3px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.14)}::-webkit-scrollbar-track-piece{-moz-background-clip:border;-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);-webkit-background-clip:border;-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);background-clip:border-box;background-color:#f5f5f5;box-shadow:inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07)}::-webkit-scrollbar-track-piece:horizontal{-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07);border-width:3px 0 0;box-shadow:inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(0,0,0,.07)}
e Valide!

Até mais! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Barra de rolagem personalizada

Mensagem por RodrigoNunes em 25/11/12, 10:56 pm

Obrigado, isso mesmo que eu queria!
avatar

RodrigoNunes
Nível 8

Masculino
Inscrito dia : 15/09/2012
Mensagens : 130
Pontos Ativos : 184

Ver perfil do usuário http://darkgames.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum