Barra de rolagem personalizada

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:

Olá!
Aceda a "Folha de Estilo CSS":

Painel de Controle Visualização Imagens e Cores Cores 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!

Obrigado, isso mesmo que eu queria!