Coding Forum

**eyedam** · 03-08-2003, 04:28 PM

Hello!

Can someone, please, tell me how can I change the colour of the standard scroll bar like it is done on your board (it is dark blue --->).

Thanks!
eyedam

**MikeyB987** · 03-10-2003, 08:47 AM

Hi eyedam,

Got here from your PM over at Aimoo.
(I didnt even know I had a logon on this site, but I have so must have been here before!)

Anyway, its all done with CSS style sheets, two ways you can do it, a quick & easy way, or a lonfer way.

1:Simple, this will change the scrollbar colours based aroud the one colour you provide:
<style type="text/css">
body {
scrollbar-base-color: #FF0000;
}
</style>

Or you can have more control over each individual part of the scrollbar:
<style type="text/css">
body {
scrollbar-arrow-color: #123456
scrollbar-base-color #123456
scrollbar-DarkShadow-Color #123456
scrollbar-Face-Color #123456
scrollbar-Highlight-Color #123456
scrollbar-Shadow-Color #123456
scrollbar-Track-Color #123456
}
</style>

To see how each part of the scrollbar is affected by this, see here:
http://www.htmlgoodies.com/tutors/scrollcolor02.html

Cheers
Mikey

**eyedam** · 03-10-2003, 09:06 AM

Thanks, Mikey!

In what section of HTML I need to put it? (I put it after </head> and before <body> and it worked, but is it the right place?)

And what about a framed web site? Do I need to put this in every page that is loaded or can I set this in the main framset page so that every page that is loaded somewhere within it, has the custom scroll bar?

Thanks again!

eyedam

**AhmedF** · 03-10-2003, 09:14 AM

You have to put it in the header tags

so before </head>

**MikeyB987** · 03-10-2003, 09:53 AM

As AhmedF said, it needs to go before </head>

You will need to have it on every page, and as such may be better putting it into an external file & linking to it:

Copy the code (without <style> & </style> into a new file, call it something like styles.css

Then in the <head> section of your pages, add this code:
<link rel="stylesheet" type="text/css" href="styles.css">

This means you can change the one .css file & change every page, rather cool