Home > Help
files >>
Colored scrollbars
Colored scrollbars
You've probably seen recently an increasing number
of sites using colored scroll bars instead of the
default
gray. I've added an example here, if you can't see
a different color it's because your browser doesn't
recognise
it - you'll need Internet Explorer 5.5+ (Firefox and
Opera browsers will just ignore the code and show
the
gray).
How's it done?
You'll need to add a bit of CSS code and then play around
with the color combinations to get the look you are
after.
Here's the code we've used for the scrollbars you can
see on this page:
BODY{
scrollbar-3d-light-color: #ff8000;
scrollbar-arrow-color: #000080;
scrollbar-base-color: #000080;
scrollbar-dark-shadow-color: #24369C;
scrollbar-face-color: #99B3CC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #24369C;
}
...and here's the explanation:
scrollbar-3d-light-color: #ff8000; the color on the
outside providing the shading
scrollbar-arrow-color: #000080; the arrow color
scrollbar-base-color: #000080; the base color but is
covered by all the other colors
scrollbar-dark-shadow-color: #24369C; shadow to the
right of the scrollbar
scrollbar-face-color: #99B3CC; the color of the scrollbar
scrollbar-highlight-color: #FFFFFF; color that goes
immediately around the scrollbar
scrollbar-shadow-color: #24369C; provides the shadow
in conjunction with the dark shadow
How to implement it
If you're going to use this across your site the best
thing is to make a linked stylesheet, save your code
as stylebars.css for example and then insert this line
of code before your closing </HEAD> tag to call
the CSS:
<LINK REL=STYLESHEET TYPE="text/css"
HREF="stylebars.css">
Alternatively you can insert the whole code in the
page, again above the closing </HEAD> tag like
this:
<style type="text/css">
<!-
BODY{
scrollbar-3d-light-color: #ff8000;
scrollbar-arrow-color: #000080;
scrollbar-base-color: #000080;
scrollbar-dark-shadow-color: #24369C;
scrollbar-face-color: #99B3CC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #24369C;
}
-->
</style>
That's about it for changing the colors to the scroll
bars on the right, but remember that this will also
change the color of the bars round the <TEXTAREA>
form field (if you have a form on your page of course).
If you want to set a different effect for your form,
you'll need to add a class rule to your <TEXTAREA>
tag.
Using the above example you would have something like:
.formarea{
scrollbar-3d-light-color: #ff8000;
scrollbar-arrow-color: #000080;
scrollbar-base-color: #000080;
scrollbar-dark-shadow-color: #24369C;
scrollbar-face-color: #99B3CC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #24369C;
}
...and then call it by changing the <TEXTAREA>
tag to <TEXTAREA CLASS=FORMAREA>
It's pretty straightforward, and a bit of trial and
error can get a smart effect for your site, at least
if you're using Internet Explorer 5.5 +
|
