PDA

View Full Version : scrollbar colors



jkhalbe
Nov 19th, 2004, 03:54 AM
Can someone point me in the right direction to change the color of the scroll bars on my webpage?

Thanx, Jeff

MrSpecial
Nov 19th, 2004, 04:01 AM
I suggest going to this site;
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm

I think this is kind of basic, but it can help to learn it. it submits the code, and if you'd rather have more choices, just copy the code inside the "<STYLE></STYLE>" tags. You may then choose any different colors you had in mind. I hope this helps :)

Serex
Nov 19th, 2004, 05:00 AM
id suggets trying a google search on it before posting.

http://www.google.com.au/search?hl=en&q=changing+scrollbar+color&meta=

plenty of results

ArcticFox
Nov 19th, 2004, 05:54 AM
Maybe they did a google search and found the CodingForums... ever think of that?

This forum is here to help people, why are you trying to get them to go somewhere else, Serex? :rolleyes:

Skyzyx
Nov 19th, 2004, 06:27 AM
Maybe they did a google search and found the CodingForums... ever think of that?

This forum is here to help people, why are you trying to get them to go somewhere else, Serex? :rolleyes:


:rolleyes: Whatever...

Anyways, if you would have done a forum search (http://www.codingforums.com/search.php?searchid=133241) beforehand, you'd see that this has been discussed at great length already.

Most proponents of scrollbar coloring favor it because (a) you can, and (b) because it can look cool.

Most opponents disfavor it because (a) there are basic UI usability issues involved, (b) it requires non-standard CSS that only works in a single browser, and (c) because, in general, the web designer typically does a poor job of it, making the website look even worse.

Now, I'm sure that proponents of colored scrollbars -- like ArcticFox, for example -- could add more reasons why they either pro-actively like them, or are neutral to their usage. The make-the-web-a-better-place-for-everyone-through-the-use-of-web-standards group who, in general, have taken the time to weigh the pros and cons of standardized code over non-standard code, as well as general usability of the web as a whole, tend to discourage people from coloring their scrollbars.

Most of the "standards" people use Firefox, Safari or Opera anyways, so colored scrollbars wouldn't effect them. At the same time, we're wanting to look out for the best interests of both the users as well as the general integrity of the web, rather than the interests of a single web designer who only cares about one browser.

There's a pretty good thread that discusses the usability pros and cons here (http://www.codingforums.com/showthread.php?t=31231).

That being said (and yes, you really should take the time to read more about the usability issues here before haphazardly adding them to your site), here is the basic code for changing the scrollbars of a user's browser:


body{
scrollbar-3dlight-color:#999999;
scrollbar-arrow-color #999999;
scrollbar-base-color:#DDDDDD;
scrollbar-darkshadow-color:#999999;
scrollbar-face-color:#DDDDDD;
scrollbar-highlight-color:#DDDDDD;
scrollbar-shadow-color:#DDDDDD;
scrollbar-track-color #CCCCCC;
}


Hopefully I've adhered to this list (http://codingforums.com/showpost.php?p=168178&postcount=8) (albeit, out of order), as well as this (http://www.codingforums.com/showthread.php?t=33730). Does this satisfy?

AaronW
Nov 19th, 2004, 12:58 PM
You might want to add it between the <head> and </head> as an inline IE-only style:



<head>
...
<!--[if IE]>
<style type="text/css">
body{
scrollbar-3dlight-color:#999999;
scrollbar-arrow-color #999999;
scrollbar-base-color:#DDDDDD;
scrollbar-darkshadow-color:#999999;
scrollbar-face-color:#DDDDDD;
scrollbar-highlight-color:#DDDDDD;
scrollbar-shadow-color:#DDDDDD;
scrollbar-track-color #CCCCCC;
}
</style>
<![endif]-->
...
</head>

llizard
Nov 19th, 2004, 01:54 PM
You might want to add it between the <head> and </head> as an inline IE-only style

Is that necessary? Don't all the other browsers just ignore the scrollbar colour specs? (I'm not being sarcastic here. I really want to know.)

jkhalbe
Nov 19th, 2004, 03:20 PM
i think all your comments will help, but this topic became an argument between all of you.

Thanx anyway

Roy Sinclair
Nov 19th, 2004, 04:47 PM
Is that necessary? Don't all the other browsers just ignore the scrollbar colour specs? (I'm not being sarcastic here. I really want to know.)

No it's not necessary at all because as you guessed, the other browsers will ignore those specs.

AaronW
Nov 19th, 2004, 10:52 PM
But it'll preserve your pages' validity.

Skyzyx
Nov 20th, 2004, 07:07 PM
But it'll preserve your pages' validity.

That's a good point, and one I hadn't thought of. Very good. :thumbsup:

gohankid77
Nov 20th, 2004, 07:44 PM
Don't forget to put your other styles in a separate <style></style> block after that:



<!--[if IE]>
<style type="text/css">
body{
scrollbar-3dlight-color:#999999;
scrollbar-arrow-color #999999;
scrollbar-base-color:#DDDDDD;
scrollbar-darkshadow-color:#999999;
scrollbar-face-color:#DDDDDD;
scrollbar-highlight-color:#DDDDDD;
scrollbar-shadow-color:#DDDDDD;
scrollbar-track-color #CCCCCC;
}
</style>
<![endif]-->

<style type="text/css">
body {
background: #000 url(image.jpg);
}
</style>


IE uses the first section and any duplicates that IE finds in the second section are ignored by it. Other browsers think that the IE part is just a comment and uses the second set of styles.