how can i style these scoll bars ?

[Former Member]

The 2 grey scroll bars on the side of the shoutbox and the container above ... where do i style this in css please.

[Tumbleweed]

Aug 12, 2015 9:04:04 GMT -8 @joecool111 said:

The 2 grey scroll bars on the side of the shoutbox and the container above ... where do i style this in css please.

There is no css to style a scroll bar in FF, but you can in IE and Chrome. If you add an id to your scroll div like so:

<div id="my_scroll">

Stuff here

</div>

Then the css would be:

#my_scroll{width:100px;height:50px;

overflow-x:hidden;overflow-y:scroll;scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}

::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

Of course if your div already has an id, replace the my_scroll with that id. You can replace the color names with hex or rgb.

There are some codes out there that you can download for a custom scroll bar but I think they are geared more to the browser scroll bar but if I remember correct, they also affected other scroll bars too.

I never understood why FF is so adamant about not allowing people to customize scroll bars. It makes a page look so much nicer.

[Former Member]

Aug 13, 2015 20:17:40 GMT -8 Tumbleweed said:

Aug 12, 2015 9:04:04 GMT -8 @joecool111 said:

The 2 grey scroll bars on the side of the shoutbox and the container above ... where do i style this in css please.

There is no css to style a scroll bar in FF, but you can in IE and Chrome. If you add an id to your scroll div like so:

<div id="my_scroll">

Stuff here

</div>

Then the css would be:

#my_scroll{width:100px;height:50px;

overflow-x:hidden;overflow-y:scroll;scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}

::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

Of course if your div already has an id, replace the my_scroll with that id. You can replace the color names with hex or rgb.

There are some codes out there that you can download for a custom scroll bar but I think they are geared more to the browser scroll bar but if I remember correct, they also affected other scroll bars too.

I never understood why FF is so adamant about not allowing people to customize scroll bars. It makes a page look so much nicer.

thanks for the info, but youve gone way above my head sorry .......  what do i do with this  <div id="my_scroll">
Stuff here
</div> 

and whats 'stuff here' ?


i understand the css bit though

[Tumbleweed]

Aug 14, 2015 2:22:23 GMT -8 @joecool111 said:

Aug 13, 2015 20:17:40 GMT -8 Tumbleweed said:

There is no css to style a scroll bar in FF, but you can in IE and Chrome. If you add an id to your scroll div like so:

<div id="my_scroll">

Stuff here

</div>

Then the css would be:

#my_scroll{width:100px;height:50px;

overflow-x:hidden;overflow-y:scroll;scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}

::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

Of course if your div already has an id, replace the my_scroll with that id. You can replace the color names with hex or rgb.

There are some codes out there that you can download for a custom scroll bar but I think they are geared more to the browser scroll bar but if I remember correct, they also affected other scroll bars too.

I never understood why FF is so adamant about not allowing people to customize scroll bars. It makes a page look so much nicer.

thanks for the info, but youve gone way above my head sorry .......  what do i do with this  <div id="my_scroll">
Stuff here
</div> 

and whats 'stuff here' ?


i understand the css bit though

Sorry. You have two scroll bars and the first one I see is this so add the id like I did in blue and do the same for the other one.

<div id="my_scroll" style="height: 100px; overflow: auto;">
<center><br>
MEMBERS SCROLL AND READ FIRST PLEASE<br>
<br><br>
<br><br>

<br><br>
<div align="center"><img alt="" src="http://i.imgur.com/ldxFBzR.jpg" border="0"></div>
</center></div>

and then the css would go in the bottom of your style sheet and then change the colors to suit your preference. Hope that helped.

[Former Member]

Aug 14, 2015 4:49:04 GMT -8 Tumbleweed said:

Aug 14, 2015 2:22:23 GMT -8 @joecool111 said:

thanks for the info, but youve gone way above my head sorry .......  what do i do with this  <div id="my_scroll">
Stuff here
</div> 

and whats 'stuff here' ?


i understand the css bit though

Sorry. You have two scroll bars and the first one I see is this so add the id like I did in blue and do the same for the other one.

<div id="my_scroll" style="height: 100px; overflow: auto;">
<center><br>
MEMBERS SCROLL AND READ FIRST PLEASE<br>
<br><br>
<br><br>

<br><br>
<div align="center"><img alt="" src="http://i.imgur.com/ldxFBzR.jpg" border="0"></div>
</center></div>

and then the css would go in the bottom of your style sheet and then change the colors to suit your preference. Hope that helped.

your losing me sorry .... you need to start again REAL SLOW

[Former Member]

Aug 14, 2015 4:49:04 GMT -8 Tumbleweed said:

Aug 14, 2015 2:22:23 GMT -8 @joecool111 said:

thanks for the info, but youve gone way above my head sorry .......  what do i do with this  <div id="my_scroll">
Stuff here
</div> 

and whats 'stuff here' ?


i understand the css bit though

Sorry. You have two scroll bars and the first one I see is this so add the id like I did in blue and do the same for the other one.

<div id="my_scroll" style="height: 100px; overflow: auto;">
<center><br>
MEMBERS SCROLL AND READ FIRST PLEASE<br>
<br><br>
<br><br>

<br><br>
<div align="center"><img alt="" src="http://i.imgur.com/ldxFBzR.jpg" border="0"></div>
</center></div>

and then the css would go in the bottom of your style sheet and then change the colors to suit your preference. Hope that helped.

iv just tryed this and i could only change the height and width and not the colour ... any ideas?

[Former Member]

iv deleted this one sorry .... i meant the scrollbars in my shoutbox, not the actual side bars in my browser.

i thought id mentioned it in my op ... sorry.

im good here thanks.

[Tumbleweed]

Aug 14, 2015 6:29:17 GMT -8 @joecool111 said:

iv deleted this one sorry .... i meant the scrollbars in my shoutbox, not the actual side bars in my browser.

i thought id mentioned it in my op ... sorry.

im good here thanks.

That's not for your browser scroll bar but it could be. It was for both the shout box and that other div. I accidently left the width/height in there but the point was to color your scroll bars like you asked.

In the css I gave you, you'd just change the id to the class: .shoutbox

.shoutbox{
scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}
::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

See, I  used it on a scroll bar in a table at the top of my forum and the shout box at the bottom. Again, will not work in FF.

putteraround.boards.net/

[Former Member]

Aug 14, 2015 19:26:54 GMT -8 Tumbleweed said:

Aug 14, 2015 6:29:17 GMT -8 @joecool111 said:

iv deleted this one sorry .... i meant the scrollbars in my shoutbox, not the actual side bars in my browser.

i thought id mentioned it in my op ... sorry.

im good here thanks.

That's not for your browser scroll bar but it could be. It was for both the shout box and that other div. I accidently left the width/height in there but the point was to color your scroll bars like you asked.

In the css I gave you, you'd just change the id to the class: .shoutbox

.shoutbox{
scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}
::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

See, I  used it on a scroll bar in a table at the top of my forum and the shout box at the bottom. Again, will not work in FF.

putteraround.boards.net/

its not working on the shoutbox bars

is this right ?


<div id="my_scroll"style="overflow:auto;height:100px;">
<center><br>

MEMBERS SCROLL AND READ FIRST PLEASE<br>
<br><br>
$[register_link]$[login_link] <br><br>

<br><br>
<div align="center"><img src="http://i.imgur.com/ldxFBzR.jpg" alt="" border="0"></a></div>

[Tumbleweed]

Your shoutbox is somewhat different than mine for some reason. Try .shoutbox_messages instead as that is the part the has the overflow for the scroll bar. 

.shoutbox_messages{
scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}
::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

And yes, your html is correct but put a space between the last L in scroll and the "s" in style.

<div id="my_scroll" style="overflow:auto;height:100px;">

And then you can just add that id to the css too if you want them both the same color with a comma separating them:

shoutbox_messages, #my_scroll{

rest of the scroll bar code here

[Former Member]

Aug 14, 2015 20:55:54 GMT -8 Tumbleweed said:

Your shoutbox is somewhat different than mine for some reason. Try .shoutbox_messages instead as that is the part the has the overflow for the scroll bar. 

.shoutbox_messages{
scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;}
::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

And yes, your html is correct but put a space between the last L in scroll and the "s" in style.

<div id="my_scroll" style="overflow:auto;height:100px;">

And then you can just add that id to the css too if you want them both the same color with a comma separating them:

shoutbox_messages, #my_scroll{

rest of the scroll bar code here

this isnt working either, it just changing the browser scroll bar and not the shoutbox

[Former Member]

sorry it has .... it just didnt show on the preview in the css thing lol


something ill have to remeber in the future.

i'll go do it all correct now and get back to you.

[Former Member]

Tumbleweed im good here thanks, iv made it all black so you can see it .. thanks for the help i owe u a beer

[Tumbleweed]

Aug 14, 2015 21:32:55 GMT -8 @joecool111 said:

Tumbleweed im good here thanks, iv made it all black so you can see it .. thanks for the help i owe u a beer

No beer for me yet as I see a problem in Chrome and then I'll take a strawberry milkshake because I don't drink.

Try this to not affect the Chrome browser scroll bar: (I added the bold to make sure it was targeting just the class and id designated.)

Edit: Hold off on adding this below, I'm still seeing problems. Who knew a dumb scroll bar could be such a pain. I'll remove this line when  have it right.

I found I had to do a separate one for each thing, the shout box and #my_scroll for webkit. And it was fussy, had to make sure there were no spaces between things, the bolded part and the width had to go so I just stuck a arbitrary style that wouldn't affect anything in that first part: This should be good now.

/*For IE*/

.shoutbox_messages,#my_scroll{scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;
}

/*For Chrome-Webkit Browsers*/
 #my_scroll::-webkit-scrollbar {color:red;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}
.shoutbox_messages::-webkit-scrollbar {color:red;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

And hopefully, we are all done with this.

[Former Member]

Aug 14, 2015 22:42:15 GMT -8 Tumbleweed said:

Aug 14, 2015 21:32:55 GMT -8 @joecool111 said:

Tumbleweed im good here thanks, iv made it all black so you can see it .. thanks for the help i owe u a beer

No beer for me yet as I see a problem in Chrome and then I'll take a strawberry milkshake because I don't drink.

Try this to not affect the Chrome browser scroll bar: (I added the bold to make sure it was targeting just the class and id designated.)

Edit: Hold off on adding this below, I'm still seeing problems. Who knew a dumb scroll bar could be such a pain. I'll remove this line when  have it right.

.shoutbox_messages, #my_scroll{scrollbar-base-color:pink;scrollbar-arrow-color:purple;scrollbar-base-color:pink;scrollbar-arrow-color:purple;

}

.shoutbox_messages, #my_scroll::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(234,203,223,1.0);
-webkit-box-shadow: inset 0 0 6px rgba(234,203,223,1.0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(4,3,3,0.9);
}

And hopefully, we are all done with this.

im fine here thanks, i dont want the browser bar there anyways.