Forums have moved

Keefe · #1 08-28-2001, 03:23 PM

If you use IE 5.5, you may have noticed that your browser's scrollbars get a little fancy when you visit NetSmog.com. . It's actually quite simple to make them and I will show you how.
The trick involves cascading style sheets (CSS), which allow you to set the styles for your entire website. If you haven't worked with CSS before, now is the time to learn. Follow these steps to beautify your own website.

CSS information lives in the header of your page between the <head> and </head> tags.

Here is some sample code:

Code:

<style>
body {
scrollbar-face-color: #99c0e6;
scrollbar-shadow-color: #dceaf4;
scrollbar-highlight-color:#dceaf4;
scrollbar-3dlight-color: #99c0e6;
scrollbar-darkshadow-color: #dceaf4;
scrollbar-track-color: #dceaf4;
scrollbar-arrow-color: #003366;
}
</style>

All told, your code should look something like this:

Code:

<html>
<head>
<style>
body{
scrollbar-face-color: #99c0e6;
scrollbar-shadow-color:#dceaf4; 
scrollbar-highlight-color: #dceaf4;
scrollbar-3dlight-color:#99c0e6; 
scrollbar-darkshadow-color: #dceaf4;
scrollbar-track-color: #dceaf4; 
scrollbar-arrow-color: #003366;
}
</style>
</head>
<body> 
Lots of cool stuff
</body>
</html>

It's a little hard to describe which attribute affects which part of the scroll bar. I'd recommend making a simple page using the hex colors mentioned above. To get a solid understanding of which attribute controls which color, try replacing your hexes with black (#000000). The black will help you see clearly which hex corresponds to which feature of the bar.

If you want to learn more about CSS, try clicking on these helpful links.

Mulders style sheets tutorial via Webmonkey
Project Cool's CSS Reference

#2 08-30-2001, 04:10 PM

Thanks admin! I am going to add a bar like that to my site. One question though, what happens to netscape users that try to go to your site?

#3 09-15-2001, 01:53 PM

Netscape users will just see a normal bar

I think that code works for netscape 6.x users though

Forums have moved

See this announcement for more details, or just go directly there.