howto_user
in
howto
Custom Scrollbar colors
Prereqs
GLOBAL_HEAD tutorial
General CSS knowledge
One of the interesting layout options possible with Internet Explorer v5.5 and beyond is the ability to manipulate the colors in the scrollbar by means of CSS. Instead of the flat gray colors that everyone has become used to, you can add flair to your scroll bar by adding reds and greens and blues and many more!
In CSS, scrollbars are part of the body portion of a webpage, so all of the color codes would fit between a body { } mark, like so :
where color would be the hexademical value of a color; ex. "white" is equal to "#ffffff".
To point out where each color area change occurs, here is a small diagram :
Since this is IE specific bit of CSS code, it would be best to include a separate body {} expression for anything you may currently have, such as layout colors and background images. Other browsers that don't support this option by means of CSS will ignore any other body {} modifications, if placed in the same area.
To be safe, and for an example, here is some sample code that will give you a background image and change your scrollbars at the same time :
GLOBAL_HEAD<=
<=GLOBAL_HEAD
Notes:
Links :
GLOBAL_HEAD tutorial
Hex Color Code Chart
MSDN scrollbars page (can't find containg link :-/)
GLOBAL_HEAD tutorial
General CSS knowledge
One of the interesting layout options possible with Internet Explorer v5.5 and beyond is the ability to manipulate the colors in the scrollbar by means of CSS. Instead of the flat gray colors that everyone has become used to, you can add flair to your scroll bar by adding reds and greens and blues and many more!
In CSS, scrollbars are part of the body portion of a webpage, so all of the color codes would fit between a body { } mark, like so :
where color would be the hexademical value of a color; ex. "white" is equal to "#ffffff".
To point out where each color area change occurs, here is a small diagram :
Since this is IE specific bit of CSS code, it would be best to include a separate body {} expression for anything you may currently have, such as layout colors and background images. Other browsers that don't support this option by means of CSS will ignore any other body {} modifications, if placed in the same area.
To be safe, and for an example, here is some sample code that will give you a background image and change your scrollbars at the same time :
GLOBAL_HEAD<=
<=GLOBAL_HEAD
Notes:
- To have a custom scroll bar with the "magazine" style, you need to use 'html' in place of 'body' in the CSS code.
Links :
GLOBAL_HEAD tutorial
Hex Color Code Chart
MSDN scrollbars page (can't find containg link :-/)