Personalizar barra de rolagem

Qual é minha questão:
Olá! Gostaria de personalizar a barra de rolagem do fórum.

Segue abaixo as mudanças:

- Fundo transparente da rolagem
-Barra com cor bege do fórum, arredondada nos cantos

Endereço do meu fórum:
http://www.jogodostronos.forumeiros.com

Versão do fórum:
INVISION

Olá!


Aceda à "Folha de estilo CSS":
Painel de Controle    Visualização    Imagens e cores    Cores    Folha de estilo CSS

Código:

/* ---------------- Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
width: 15px; <!-- largura da barra de rolagem -->
height: 5px;
::-webkit-scrollbar-track-piece {
background: #aebcbf; <!-- Cor do fundo da barra de rolagem -->
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background: #000; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px; <!-- Largura da barra de rolagem na horizontal-->
background-color: #FFA500; <!- cor da barra de rolagem na horizontal-->
}

Salve.

Até mais.

Olá, não funcionou. Eu adicionei um colchete que estava faltando mas mesmo assim não surtiu efeito.

Olá,

O senhor colocou o código sobre o inicio de teu CSS? Outra coisa, mande para mim teu CSS.

Até mais.

Foi sim, coloquei no inicio

Segue abaixo meu CSS

Código:

  .spoiler dt {
        background-color: rgb(48, 48, 48) !important;
        color: rgb(190, 131, 4) !important;
        border: 0px solid rgba(190, 141, 4, 0.64) !important;
        border-radius: 5px;
        }
        .spoiler dd {
        background-color: rgb(48, 48, 48) !important;
        color: rgb(190, 131, 4) !important;
        }

.member {
        background-color: #363636;
        }
.icon, .status {
margin-left:-39px !important;
padding-right:5px;
padding-top:8px;
}
#profile-advanced-details div.separator {
        border-bottom: 1px solid #242323;
        clear: both;
        }

#chatbox_header {
background-color: #8C705C;
  height: 30px;}

#gfooter {background-color: rgba(170, 80, 80, 0.25) !important;color: #fff !important;font-size: .8em !important;margin: 8px 0 !Important;padding: .5em !important;text-align: right !important;}   
           


.postprofile-details.postdetails {
        text-align: center !important;
        }



.chatbox_row_2.clearfix {
        -moz-box-shadow: 2px 2px 5px rgba(50,50,50,0.75);
        -webkit-box-shadow: 2px 2px 5px rgba(50,50,50,0.75);
        background-color: #1C1C1C;
        box-shadow: 2px 2px 5px rgba(50,50,50,0.75);
        padding: 6px;
        margin: 3px;
        }
        .chatbox_row_1.clearfix {
        -moz-box-shadow: 2px 2px 5px rgba(50,50,50,0.75);
        -webkit-box-shadow: 2px 2px 5px rgba(50,50,50,0.75);
        background-color: #1C1C1C
        box-shadow: 2px 2px 5px rgba(50,50,50,0.75);
        padding: 4px;
        }#chatbox {
        line-height: 15px !important;
        }blockquote cite {
        background-color: transparent !important;
        }
        blockquote cite {
        background-image: none !important;
        }
        blockquote, blockquote blockquote, blockquote blockquote blockquote {
        -webkit-box-shadow: #CD8500 0px 1px 5px;
        background: #242323
        border: 2px #CD8500;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 5px;
        padding: 10px 20px;
        }.avatar { background-color: rgb(37, 36, 36); border: 1px solid #232323; width: 50px; position: relative; left: 27px; }#profile-advanced-details .avatar {float: none !important;}.centerer del ul li strong a, .current-time, #ipbwrapper center strong {
color: #363636 !important;
}#ipbwrapper {
color: #828282;
}body{background:url(http://i.imgur.com/h1u8hPn.jpg)repeat-x ,url(http://i.imgur.com/h1u8hPn.jpg);background-attachment:fixed!important;color:#333;font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:normal;line-height:150%;scrollbar-3dlight-color:#CDCDCD;scrollbar-arrow-color:#FFF;scrollbar-base-color:#EFEFEF;scrollbar-darkshadow-color:#CDCDCD;scrollbar-face-color:#CDCDCD;scrollbar-highlight-color:#EFEFEF;scrollbar-shadow-color:#CDCDCD}.tipsy {
padding: 5px;
font-size: 10px;
position: absolute;
z-index: 999;
}

.tipsy-inner {
padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
}

.tipsy-inner {
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.tipsy-arrow {
position: absolute;
background: url('http://onehackoranother.com/projects/jquery/tipsy/stylesheets/../images/tipsy.gif') no-repeat top left;
width: 9px;
height: 5px;
}

.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;
}

.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}

.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}

.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}

.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}

.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}

.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}

.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;
}#profile-tip {
position: fixed;
top: 50%;
left: 30%;
background: white;
padding: 10px;
border: 1px solid black;
box-shadow: 0 0 50px black;
border-radius: 20px;
z-index: 9999 !important;
}
#profile-tip .panel {
background: transparent !important;
}
.column2 {
float: none !important;
}
#close-profile {
cursor: pointer;
padding: 5px;
position: absolute;
left: -15px;
top: -25px;
}

form#quick_reply:hover #textarea_content textarea#text_editor_textarea:hover, form#quick_reply textarea#text_editor_textarea:hover, form#quick_reply textarea#text_editor_textarea.post:hover {
position: relative;
height: 155px;
width: 100%!important;
}
/* Fim do código *//* Fancybox by Baivong */
.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:absolute;top:0;left:0;z-index:1002}
.fancybox-outer{background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:0;padding:0}
.fancybox-opened{z-index:1003}
.fancybox-opened .fancybox-outer{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.fancybox-inner{width:100%;height:100%;position:relative;outline:none;overflow:hidden;margin:0;padding:0}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;vertical-align:top;margin:0;padding:0}
.fancybox-image{max-width:100%;max-height:100%}
#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-21px;margin-left:-21px;width:42px;height:42px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb10.gif);opacity:0.8;cursor:pointer;z-index:1010}
.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb10.png)}
.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:1004}
.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;overflow:visible;visibility:hidden;padding:0}
#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index: 999;background:#000}
.fancybox-title{display:none}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index: 999;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{margin-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}#message { color: white !important; }.mainmenu:hover {
background: transparent !important;
} #submenu ul li a hover {
    background-color: none;
}

#submenu ul li a {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}
 a.mainmenu:hover {
background: transparent;
}


input, textarea, select { color: "#000000" !important; }
#navstrip {
background: #363636
}#submenu {background:transparent!important;}
div#logostrip {background: transparent!important;}
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp11.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp12.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://i46.servimg.com/u/f46/16/56/73/62/select10.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp10.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp13.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp14.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp15.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp16.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp17.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp18.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/colorp19.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://i46.servimg.com/u/f46/16/56/73/62/aceita10.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

.module li {list-style-type: none !important;}

#userlinks.not-connected {
background: #8B6914;
}.avatar img {
width: auto!important;
height: auto!important;
}body {
cursor: url('http://www.hiveworkshop.com/forums/attachments/world-editor-help-zone-98/2323d1171206607-reskin-wow-cursor-arrow.png'), url('http://www.hiveworkshop.com/forums/attachments/world-editor-help-zone-98/2323d1171206607-reskin-wow-cursor-arrow.png'), auto;
}
a:hover {
cursor: url('http://www.hiveworkshop.com/forums/attachments/world-editor-help-zone-98/2324d1171206607-reskin-wow-cursor-hand.png'), url('http://www.hiveworkshop.com/forums/attachments/world-editor-help-zone-98/2324d1171206607-reskin-wow-cursor-hand.png'), auto;
}
.ipbform2 dl dd textarea.inputbox {
background-color: white!important;
}
a:link,
a:visited,
a:active{

text-decoration: none;
}

table.ipbtable tfoot td {
background-color:#1d1d1d;
}



div.maintitle .expand,div.maintitle .contract {
float: right;
width: 80px;
height: 20px;
background: url('http://img20.imageshack.us/img20/3273/80645717.jpg') no-repeat 50% 50%;
cursor: pointer;
}
div.maintitle .expand {
background: url('http://img20.imageshack.us/img20/130/99148459.jpg') no-repeat 50% 50%;
}



.popupmenu li {
background-color: #1d1d1d;
}


.box-content {
border-bottom: transparent;
}
table.ipbtable tfoot td {
background-color: transparent;
}


.post {
border-bottom:10px solid #1d1d1d;
}





#navstrip li.begin {
padding-left: 15px;
background: url('http://img35.imageshack.us/img35/9853/ae1e.png') no-repeat left 50%;
}

Cordial membro,

Tente então colocar este código agora:

Código:

::-webkit-scrollbar {
background: blue;
}
Pseudo ::-webkit-file-upload-button element
::-webkit-scrollbar-thumb {
-webkit-box-shadow: 4px;
background: #2B2B2B;
border-radius: 10px;
height: 60px;
}

<li> Sempre no inicio de teu CSS, para que não haja conflitos entre o mesmo.

Até mais.

Não funcionou Mikeé, poderia ser porque estou usando o mozilla?

Pode ser sim... O código usado é para modificar a barra de rolagem do Google Chrome, tente novamente pelo Google Chrome.

Até mais.

funcionou, obrigado ^^