|
|
Colored Side Scroll Tutorial by Lady Starlite Nothing makes your pages look more polished than using the Colored Side Scroll setup. It's very simple to place in your html and extremely versatile. The first time I colored my side scroll button I was bursting with pride at how nice it looked. |
Here's the code I used for this page:
This Color<style type="text/css">
body {
scrollbar-arrow-color: #8C412B;
The Colored Side Scroll only works in Internet Explorer, and maybe Netscape, but I'm not sure about Netscape so you might want to look into that yourself. I don't want to install Netscape just to check this out. If you're using IE 5.5 or later, look at the scroll bar on the right side of the browser. Wow - pretty neat huh? This tutorial will show you how to make scroll bars colored anyway you want them.
You begin by using something called " CSS " (cascading style sheet). It's really very simple,...... so come on, lets see what you can come up with........... *Smile*
In the <head> area of your html code, following the
</title> closing code, add the following:
___________________________________________________________________
<STYLE TYPE="text/css">
BODY{
scrollbar-arrow-color:#FF0066;
scrollbar-base-color:#480000;
}
</style>
_________________________________________________________________________
*** NOTE: this is not part of the code,....
it's only for your
information: Change the colors to fit your own preferences. If you are already using a CSS body reference
in your HEAD section, do not add a new body reference, simply add the
scrollbar items to the one you already have. Here are some other colors you can change
too:
scrollbar-darkshadow-color: #A4B9B6; (which is this
color) If you use these additional fields simply place them immediately following the last code line
(before the closing tags.... } </style> )
and your completed code setup will end up looking like this: <STYLE TYPE="text/css"> Just add the desired color codes to the previous code fields, making sure you
separate each one with a semicolon
#FF0066= is RED
#480000= is Dark
Maroon
scrollbar-highlight-color: #FFFFFF; (which is Black)
scrollbar-track-color: #008080; (which is this
color)
BODY{
scrollbar-arrow-color:#FF0066;
scrollbar-base-color:#480000;
scrollbar-shadow-color: #A4B9B6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-track-color: #008080;
}
</style>
( ; ) and you've got a polished page for
visitors to Oooh and Ahhhhhh over. If you use an HTML Editor to create
your pages you can click on any color on your page and get the hex codes you
want to use for your Colored Scroll Bar! This is a lot easier then
trying to use the Hex Code color sheets you'll find on the web because they
are not always accurate as far as actual colors.....
Feel free to copy this tutorial to your own system but please do not direct link to my site. Thank you!
