Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member iain_gf's Avatar
    Join Date
    Mar 2004
    Posts
    6
    Member #
    5207
    Hey guys

    I've been scouring the web looking for a way to implement colored scroll bars like those on the Radio 1 website - http://www.bbc.co.uk/radio1/

    Now all debate on whether I should use them or not aside, a client has requested them and they keep the roof over my head , how do I get them to bloody work? I've tried a number of tutorials which all seem to employ the same method which works some of the time but not all.

    I'm running Windows XP professional IE 6.0.2800.1106.xpsp2.030422-1633. Why does it never work on the site I'm making and only sometimes on sites I browse to?

    Any help would be great.

    Iain

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    The colored scrollbars are only colored in IE, all the other browsers show the default scrollbar.
    See this nice script for creating the code: http://www.nutrocker.co.uk/scrollbarcolor.html

  4. #3
    Junior Member iain_gf's Avatar
    Join Date
    Mar 2004
    Posts
    6
    Member #
    5207
    Thanks for the quick response but just tried it and it doesn't work. Any idea why it's not working on my machine?

    Iain

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    how did you implement it in your html/css?

    can we see the code?
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Junior Member
    Join Date
    Mar 2004
    Posts
    2
    Member #
    5139
    I just recently used the color scroll bars on a site I was building. I used this code:

    <style TYPE="text/css">

    body { scrollbar-base-color:#FFFFFF ; scrollbar-face-color: #000000; scrollbar-highlight-color:; scrollbar-3dlight-color:; scrollbar-darkshadow-color:; scrollbar-track-color:; scrollbar-arrow-color: #FF0000; }

    </style>

    And then just changed the colors to what I wanted them. Hope that helps

  7. #6
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Is the code inside the <head></head> tags? If it isn't, it won't work.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  8. #7
    Junior Member iain_gf's Avatar
    Join Date
    Mar 2004
    Posts
    6
    Member #
    5207
    Hey guys, thanks for the multiple responses. I've posted up a test page with the code I was advised to use and on our browsers here it doesn't display.

    http://www366.pair.com/ajr456/scrollbars.html

    Any more ideas greatly appreciated

    Iain

  9. #8
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    There is no scrollbar in my monitor, probably becuse it is bigger than yours.

    and I use firefox, which can't see coloured scrollbars anywhoo.

    a: the title tag should go before the style tag.
    b: so should meta tags.
    c: your link to the sylesheet and shortcut icon should also be in the head.

    here is a "revised" copy

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Twisted Generation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK REL="SHORTCUT ICON" HREF="favicon.ico">
    <LINK REL="stylesheet" href="stylesheet.css" TYPE="text/css">
    <style TYPE="text/css"> 
    body {scrollbar-base-color:#FFFFFF; scrollbar-face-color:#000000; scrollbar-arrow-color:#FF0000;}
    </style> 
    </head>
    <body>
    
    		<div id="Content">
    				  <p class="logo">twisted <B>GENERATION</B></p>
    
    				  <p class="header">scroll bars test</p>
    				  <p class="general">what color are my scroll bars?</p>
      </div>
    <p class="copyright">copyright 2004 Twisted Generation</p>
    </body>
    </html>

    tekp :cheeky: tekponline.com

  10. #9
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Or easier, paste this in your CSS file. Setting[*] as class does that it changes also the color of the iframe scrollbars.

    * {scrollbar-face-color: #E9E9E9; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #E0E0E0; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #000000;}

    Modify the values to your liking using the page I already mentioned above...


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:22 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com