Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Kirkland, Washington
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS-Where to place scrollbar color code

    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!

  • #2
    New Coder
    Join Date
    Oct 2002
    Location
    Go CANADA!
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Revelle; 10-28-2002 at 08:33 PM.
    Be ReActive.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Plus,the W3C CSS Recommendation say that propriatary CSS properties should start with "-vendor-" (vendor would be ms or ie in this case).

  • #5
    New Coder
    Join Date
    Oct 2002
    Location
    Kirkland, Washington
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New Coder
    Join Date
    Oct 2002
    Location
    Go CANADA!
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sounds good to me

    and sorry 'bout that jkd
    Be ReActive.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ) 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
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    New Coder
    Join Date
    Oct 2002
    Location
    Kirkland, Washington
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #9
    PlatinumProject
    Guest
    <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

  • #10
    New Coder
    Join Date
    Oct 2002
    Location
    Kirkland, Washington
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    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

  • #12
    New Coder
    Join Date
    Oct 2002
    Location
    Kirkland, Washington
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's the page with the attempt at a colored scrollbar!

    Click here for the page
    See if you get a colored scrollbar...then let me know!

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are using an HTML 4.0 doctype, so I suspect your capitilization of BODY may be causing the problem...
    Code:
    <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>
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #14
    New Coder
    Join Date
    Oct 2002
    Location
    Kirkland, Washington
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #15
    PlatinumProject
    Guest
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •