Scroll bar customization

**Defender1** · Jun 19, 2001 15:23

anyone know where i can find the style command and attributes/descriptions for customizing the look of the scroll bar like on this site?
Ex: chaning the bar and arrows bg color etc.
Thanks all.

**mic2020** · Jun 19, 2001 15:34

It is quite simple to change the scollbar colour, this was one of those things that used to puzzle me, but now I know how its done, I realise it's quite easy.

If you put this in your <head> section or within a css style sheet.

i.e.

SCROLLBAR-FACE-COLOR: #5566aa; SCROLLBAR-HIGHLIGHT-COLOR: #5566aa; SCROLLBAR-SHADOW-COLOR: #5566aa; SCROLLBAR-3DLIGHT-COLOR: #7788cc; SCROLLBAR-ARROW-COLOR: #334488; SCROLLBAR-TRACK-COLOR: #334488; SCROLLBAR-DARKSHADOW-COLOR: #7788cc

I hope this has been of some use, and if you are using Dreamweaver you can download an extension which will make it even easier. If you need more help, PM me, and I will be more than happy to show you some examples.

Michael Prosser

**Defender1** · Jun 19, 2001 15:42

i don't generally use WYSIWIG's

**Defender1** · Jun 19, 2001 15:44

what tag? <style> tags are used in the <head> i thought?

**mic2020** · Jun 19, 2001 16:20

Sorry I have changed my error you are right defender1, put it in the head section.

**c-pr0mpt** · Jun 19, 2001 17:23

Defender> Yes it goes in Style tags bro.

**Defender1** · Jun 19, 2001 21:59

so you'd use this:

Code:

<head>
<style>
SCROLLBAR-FACE-COLOR: #5566aa; SCROLLBAR-HIGHLIGHT-COLOR: #5566aa; SCROLLBAR-SHADOW-COLOR: #5566aa; SCROLLBAR-3DLIGHT-COLOR: #7788cc; SCROLLBAR-ARROW-COLOR: #334488; SCROLLBAR-TRACK-COLOR: #334488; SCROLLBAR-DARKSHADOW-COLOR: #7788cc
</style>
</head>

also would it work if i tossed a
A:hover {color: #ffffff} in there?

**c-pr0mpt** · Jun 19, 2001 23:24

You mean to hover the scrollbar? Or you mean just for the rest of your site for link rollovers?

**tubedogg** · Jun 20, 2001 04:52

Originally posted by Defender1
so you'd use this:

Code:

<head>
<style>
SCROLLBAR-FACE-COLOR: #5566aa; SCROLLBAR-HIGHLIGHT-COLOR: #5566aa; SCROLLBAR-SHADOW-COLOR: #5566aa; SCROLLBAR-3DLIGHT-COLOR: #7788cc; SCROLLBAR-ARROW-COLOR: #334488; SCROLLBAR-TRACK-COLOR: #334488; SCROLLBAR-DARKSHADOW-COLOR: #7788cc
</style>
</head>

No, you have to do it like this:

Code:

<head>
<style>
body { SCROLLBAR-FACE-COLOR: #5566aa; SCROLLBAR-HIGHLIGHT-COLOR: #5566aa; SCROLLBAR-SHADOW-COLOR: #5566aa; SCROLLBAR-3DLIGHT-COLOR: #7788cc; SCROLLBAR-ARROW-COLOR: #334488; SCROLLBAR-TRACK-COLOR: #334488; SCROLLBAR-DARKSHADOW-COLOR: #7788cc; }
</style>
</head>

Also keep in mind the only one you *have* to specify is SCROLLBAR-BASE-COLOR. IE will make an intelligent guess based on that color to fill in the rest of the colors.

also would it work if i tossed a
A:hover {color: #ffffff} in there?

Yes.

**Defender1** · Jun 25, 2001 00:40

Originally posted by c-prompt
You mean to hover the scrollbar? Or you mean just for the rest of your site for link rollovers?

No, i mean all in one style tag.
so like this:

Code:

<head>
<style>
body { SCROLLBAR-FACE-COLOR: #5566aa; SCROLLBAR-HIGHLIGHT-COLOR: #5566aa; SCROLLBAR-SHADOW-COLOR: #5566aa; SCROLLBAR-3DLIGHT-COLOR: #7788cc; SCROLLBAR-ARROW-COLOR: #334488; SCROLLBAR-TRACK-COLOR: #334488; SCROLLBAR-DARKSHADOW-COLOR: #7788cc; }
A:hover {color: #ffffff}
</style>
</head>

**JMulder** · Jun 25, 2001 01:23

Ofcourse it would work, just two different defined styles, right?

**prowsej** · Jun 26, 2001 10:26

Waht if I wanted to amek the scrollbar a different color on hover?

[javascript scrollbars?]

**Anarchos** · Jun 26, 2001 10:30

You would have to use a dhtml scrollbar because regular ones won't trigger hover or onmouseover.

**JMulder** · Jun 26, 2001 13:03

Hey, you can always check http://www.hotscripts.com

I know they got such a script/tutorial there.

User Tag List

Thread: Scroll bar customization

Thread Tools

Display

Scroll bar customization

Bookmarks

Bookmarks

Posting Permissions