...

View Full Version : CSS-Where to place scrollbar color code



Mark Schneider
10-28-2002, 07:07 PM
The following is from a coding site...



There are 7 CSS attributes responsible for controlling the scrollbar's coloring, everything from the background, foreground, to the little arrow at the two ends of the scrollbar. So without further adieu, here are our attributes!

Attributes (move mouse over them for description)
1) scrollbar-3dlight-color
2) scrollbar-arrow-color
3) scrollbar-base-color
4) scrollbar-darkshadow-color
5) scrollbar-face-color
6) scrollbar-highlight-color
7) scrollbar-shadow-color
8) scrollbar-track-color

These attributes can be applied not only to the BODY element, but basically any element on your page that contains a scrollbar (such as <TEXTAREA>), for refinement. This page would look nice with a gentle greenish right bar, wouldn't you say?

<style>
BODY{
scrollbar-face-color:#DFFFBF;
scrollbar-shadow-color:green;
}
</style>
<BODY>
"
"
</BODY>




So I'm confused about whether this is suggesting the...

<style>
BODY{
scrollbar-face-color:#DFFFBF;
scrollbar-shadow-color:green;
}
</style>

...code should be put in a linked CSS document or in the page code. I've tried putting...

BODY{
scrollbar-face-color:#DFFFBF;
scrollbar-shadow-color:green;
}

...in the linked CSS document with no result.
Other elements of the CSS document are working on the linked page.

If I want to put it in the page itself, instead of linking it to a CSS document, where should the code go?

Thanks for any help with this basic question!

Revelle
10-28-2002, 07:19 PM
Throw your scrollbar codes inbetween your HEAD tags if you want the codes on the same page instead of linking a CSS file.

<HTML>.....
<HEAD>

<style>
<!--
BODY
{
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-BASE-COLOR: #000000;
}


//-->
</style>

</HEAD>
<BODY>.....



--as for the codes not working from the attached CSS into your page, that's odd.
I have the above codes in a CSS file and on a page and both work...
Is the <link....> tag to link to your CSS correct? as in directory and name of css file?

--
yep, edited out some comments.

jkd
10-28-2002, 08:18 PM
Originally posted by Revelle

Some browsers will not support the scrollbar colours. Like the great Netscape (input sarcasm here)


--Hex codes are better to use, tho some again might disagree.
i.e. black --> #000000

What is that supposed to mean? I don't see scrollbar coloring in any W3C CSS Recommendation. There is no mention of it in the W3C CSS3 drafts either. Why?

It is utterly pointless. The scrollbar is drawn by the user agent, not the web page. The browser should be consistent to offer a decent GUI experience.

What's more important? How about a decent CSS implementation? NS7 has the best of any branded web browser in existence. However, I see tons of properties and selectors from CSS2 IE/Windows doesn't support, and that isn't even including that properties it attempts doing, but incorrectly.

Anyway, that's my rant for people who don't realize exactly what they are saying.


And as for using hex values as opposed to other ways of defining color, it really doesn't matter. #rrggbb and rgb(r, g, b) are both equally valid. As well as #rgb. But only 16 color keywords are in the HTML specs... so you should be careful which keywords you use.

Bosko
10-28-2002, 09:09 PM
Plus,the W3C CSS Recommendation say that propriatary CSS properties should start with "-vendor-" (vendor would be ms or ie in this case).

Mark Schneider
10-29-2002, 09:26 PM
Thanks Bosko, jkd, and Revelle.

I'll try your suggestions, although I think I've already tried them! Waaaa!

Maybe I'll set up a page with my attempts, and give y'all the address to check the coding.

Howzat sound?

Revelle
10-29-2002, 09:36 PM
sounds good to me :thumbsup:

and sorry 'bout that jkd

beetle
10-29-2002, 10:52 PM
Dorry worry about jkd. He takes every opportunity possible to grab his picket sign and go burn some IE effigies (hehe, eh jkd? j/j :D) Besides, since he's using Moz or NS, he probably forgot that codingforums.com has green scrollbars ;)

Anyhow...What version of IE are you using? Only IE 5.5+ versions support the scrollbar colors

Mark Schneider
10-29-2002, 10:59 PM
Thanks for your reply. I'm using IE 6.0.2800 and getting all of the colored scrollbars active on other sites...like this one!

PlatinumProject
10-29-2002, 11:02 PM
<head>
<STYLE TYPE="text/css"><!--
BODY {
scrollbar-arrow-color:Red;
scrollbar-track-color:black;
scrollbar-shadow-color:light blue;
scrollbar-face-color:#ff8040;
scrollbar-highlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-3dlight-color:light blue;
}
//--></STYLE>
</head>

try that one i think it's because your missing the
<STYLE TYPE="text/css">

the type meh try it and tell me:thumbsup:

Mark Schneider
10-29-2002, 11:25 PM
I'm now experimenting with the code you gave me.

I sure hope "To ask will unmask the obvious."

Soon I'm going to post my experiments on a testing server so you can have a look at it.

Thanks for your help.

Nightfire
10-29-2002, 11:47 PM
Originally posted by PlatinumProject
<head>
<STYLE TYPE="text/css"><!--
BODY {
scrollbar-arrow-color:Red;
scrollbar-track-color:black;
scrollbar-shadow-color:light blue;
scrollbar-face-color:#ff8040;
scrollbar-highlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-3dlight-color:light blue;
}
//-->
</STYLE>
</head>


Make sure the </style> tag isn't on the same line as the //--> as you'll be commenting out the </style> tag :)

Mark Schneider
10-30-2002, 12:00 AM
Click here for the page (http://home1.gte.net/res0tdzj/scrollbartest/scrollbar_test.html)
See if you get a colored scrollbar...then let me know!

beetle
10-30-2002, 12:19 AM
You are using an HTML 4.0 doctype, so I suspect your capitilization of BODY may be causing the problem...
<style type="text/css"><!--
body {
scrollbar-arrow-color:red;
scrollbar-track-color:black;
scrollbar-shadow-color:light blue;
scrollbar-face-color:#ff8040;
scrollbar-highlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-3dlight-color:light blue;
}
//-->
</style>

Mark Schneider
10-30-2002, 01:06 AM
Thanks for your reply beetle.
I changed the code (on my local copy of the files) and it didn't change anything. I'll try to change the remote code too, as if that might make a difference!

Q. Is there a different HTML doc type you recommend?

PlatinumProject
10-30-2002, 02:02 AM
i found out the problem here is the code of you page
----------------------------------------------------------------------------
<!doctype html public "-//w3//dtd html 4.0//en">
<!-- -->
<html>



<head>
<link rel=stylesheet type="text/css" href="style.css">
<style type="text/css"><!--
body {
scrollbar-arrow-color:red;
scrollbar-track-color:black;
scrollbar-shadow-color:light blue;
scrollbar-face-color:#ff8040;
scrollbar-highlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-3dlight-color:light blue;
}
//-->
</style>
</head>

<body>

Here's a test of font sizes and color attributes to check the CSS from a linked document...
<p>

<h1>Text with h1</h1>
<p>
<h2>Text with h2</h2>
<p>
<h3>Text with h3</h3>
<p>

<table height="500" width="200" border="1">
<tr>
<td><h2>Well, here's another scrollbar test!</h2></td>
</tr>
</table>
<p>
And here's the code from the linked CSS document, in case that helps...
<p>

h1 {font-family: Arial, helvetica, Verdana, sans-serif; font-size: 15pt;color: #0066cc}<br>
h2 {font-family: Arial, helvetica, Verdana, sans-serif; font-size: 13pt;color: red}<br>
h3 {font-family: Arial, helvetica, Verdana, sans-serif; font-size: 10pt;color: #00ff00}<br>
p {text-indent:14pt}<br>
body {<br>
scrollbar-face-color:#red;<br>
scrollbar-shadow-color:green;<br>
}
<p>

Well what do you think?

</body>

</html>

-------------------------------------------------------------------

now if you take out the
<!doctype html public "-//w3//dtd html 4.0//en">
<!-- -->
and leave the code like this
--------------------------------------------------------

<html>



<head>
<link rel=stylesheet type="text/css" href="style.css">
<style type="text/css"><!--
body {
scrollbar-arrow-color:red;
scrollbar-track-color:black;
scrollbar-shadow-color:light blue;
scrollbar-face-color:#ff8040;
scrollbar-highlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-3dlight-color:light blue;
}
//-->
</style>
</head>

<body>

Here's a test of font sizes and color attributes to check the CSS from a linked document...
<p>

<h1>Text with h1</h1>
<p>
<h2>Text with h2</h2>
<p>
<h3>Text with h3</h3>
<p>

<table height="500" width="200" border="1">
<tr>
<td><h2>Well, here's another scrollbar test!</h2></td>
</tr>
</table>
<p>
And here's the code from the linked CSS document, in case that helps...
<p>

h1 {font-family: Arial, helvetica, Verdana, sans-serif; font-size: 15pt;color: #0066cc}<br>
h2 {font-family: Arial, helvetica, Verdana, sans-serif; font-size: 13pt;color: red}<br>
h3 {font-family: Arial, helvetica, Verdana, sans-serif; font-size: 10pt;color: #00ff00}<br>
p {text-indent:14pt}<br>
body {<br>
scrollbar-face-color:#red;<br>
scrollbar-shadow-color:green;<br>
}
<p>

Well what do you think?

</body>

</html>

-------------------------------------------------------

it will work try it :thumbsup:

Mark Schneider
10-30-2002, 07:50 AM
PlatinumProject...YOU ROCK!!!!! Your solution worked!!

Taking out the...

<!doctype html public "-//w3//dtd html 4.0//en">
<!-- -->

...was the ticket.

I would never have considered removing that code as an attempt at getting the desired effect.

OK...two questions...

1. Why did this work?
2. What are the ramifications of not having this code on the page?

Signed,
(tremendously grateful...but not yet completely satisfied...)
Mark

PlatinumProject
10-30-2002, 01:45 PM
this sit could explain it to u http://www.htmlhelp.com/tools/validator/doctype.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum