Scrollbar Colors

The first thing you should note is that if you are striving to write valid XHTML and CSS, these properties are illegal. They are not defined in the CSS specification nor are they marked as proprietary. In this article, I'm going to do two things:

1. Show you how to create a user style sheet to prevent Web designers from taking over the look and feel of your browser.
2. Show you how to add these styles to your pages

These two things are at odds with one another, but in order to learn how to do one you need to understand the other. As a developer who strives to follow the standards, I would recommend that you not use these styles on your pages. While it is perfectly acceptable for a designer to want to control the look and feel of the Web pages she creates, it crosses a line to try to take control of the software used to view that page. It's as if an artist wouldn't allow his or her paintings to be displayed in a room that they hadn't first re-ordered to suit themselves.

Creating a User Style Sheet

Some browsers (Internet Explorer, Konqueror) have begun supporting the illegal properties that change the scrollbar colors. But it is possible to make sure that your browser keeps the normal colors, even in the face of style sheets. To do this, you would create a user style sheet with the "!important" declaration. Here's how you do it:

1. If you don't already have a user style sheet, open a blank CSS file. You can place it anywhere on your hard drive, but I would recommend placing it in your IE or Konqueror program folders, so you remember what it is.
2. Call the style sheet
   userstylesheet.css
3. Add the following lines to the style sheet:
   body, html {
     scrollbar-face-color: ThreeDFace !important;
     scrollbar-shadow-color: ThreeDDarkShadow !important;
     scrollbar-highlight-color: ThreeDHighlight !important;
     scrollbar-3dlight-color: ThreeDLightShadow !important;
     scrollbar-darkshadow-color: ThreeDDarkShadow !important;
     scrollbar-track-color: Scrollbar !important;
     scrollbar-arrow-color: ButtonText !important;
   }
4. Add the path to the style sheet to your browser:
   Internet Explorer:
   Go to the Internet Options button in the Tools menu. Click on the Accessibility button, and check the box titled "Format documents using my style sheet". Then browse to the style sheet you created.
   
   Konqueror:
   Go to the settings menu and choose the Stylesheets tab. Then browse to the style sheet you created to use as your user style sheet.
5. Restart your browser and it should stay with the default colors.

Next page > Using CSS to Change the Scrollbars of Your Web Sites > Page 1, 2

Previous Features