www.webdeveloper.com
Results 1 to 6 of 6

Thread: Scroll bar color

  1. #1
    Join Date
    Nov 2011
    Posts
    118

    Scroll bar color

    I have this scroll bar on the front page. The slider is grey and background is white. I would like to have control of the colors. I like to change them. Can this be done?


    http://www.cjwebconsulting.com/newsite/index.html


    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Charisma Communications</title>
    
    <link rel="stylesheet" href="style.css" media="screen">
    	
    <style type="text/css">
    #container #right-col #support h3 {
    	color: #596a86;
    	font-family: arial, sans-serif;
    	font-size: 18px;
    }
    </style>
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
    
     <h1>Charisma Communications</h1>
     <h3>"...Moving People Beyond Their Limitations..."</h3>
    
    </div><!-- end #header -->
    
    <div id="left-col">
    
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Presentations</a></li>
     <li><a href="#">Videos/Pictures</a></li>
     <li><a href="#">Plan An Event</a></li>
     <li><a href="#">My Blog</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
    
    </div><!-- end #left-col -->
    
    <div id="right-col">
    
    <div id="preamble">
    
      <blockquote>
        <blockquote>
          <h3>About </h3>
          <p class="p1">
            I was was born in June 1962, one of the many thousands of babies born with the birth deformities caused by a drug called Thalidomide, a medication intended to help women lessen the effects of morning sickness. I was born with short upper limbs, known in the medical community as Phocomelia (flipper like limbs).</p>
          <p class="p1"> I spent much of my childhood in and out of the hospital and with these experiences helped make me the strong person that I amtoday. I have never considered myself to be different than anyone else. </p>
        </blockquote>
        </blockquote>
    </div><!-- end #preamble -->
    <br>
    
    </div><!-- end #right-col -->
    
    <div id="footer">
    
    Copyright &copy; 2013 Charisma Communications		       
    <p>
     <a href="http://www.cjwebconsulting.com/">Website Designed By CJ Web Consulting</a>
    </p>
    
    </div><!-- end #footer -->
    
    </div><!-- end #container -->
    
    </body>
    </html>

    Code:
    body { 
        background:#fff url(fond.jpg) repeat-x; 
        margin:0; 
        padding:0;
     }
    #container {
        width:779px;
        margin:auto;
        background-image:url(back.jpg);
        background-repeat:no-repeat;
     }
    #header {
        padding:80px 0 0 250px;
        font-family:georgia,'times new roman',times,serif;
        font-style:italic;
        color:#333;
     }
    #left-col {
        float:left;
        width:239px;
        padding-top:300px;
     }
    #left-col ul {
        width:176px;
        padding:0;
        margin:0 0 0 66px;
        list-style-type:none;
     }
    #left-col li {
        margin-bottom:3px;
     }
    #left-col a,#left-col a:visited {
        display:block;
        padding:2px;
        line-height:12px;
        font-family:verdana,sans-serif;
        font-size:10px;
        background-color:#0b3c77;
        text-decoration:none; 
        color:#d8d7d2;
     }
    #left-col a:hover,#left-col a:active { 
        text-decoration:underline; 
        color:#9aa4bf;
     }
    #right-col {
        float:left;
        width:540px;
        padding-top:74px;
     }
    #preamble {
        width:455px;
        height:180px; 
        margin:26px 0 0 68px;
        text-align:justify;
        overflow:auto;
     }
    #preamble h3 {
    	margin-top:18px;
    	font-family:arial, sans-serif;
    	font-size:18px;
    	font-style:italic;
    	color:#596a86;
     }
    #preamble p.p1 {
    	margin-left: 0px;
    	margin-right: 0px;
        margin-bottom:10px;
        line-height:16px;
        font-family:verdana,geneva,arial,helvetica,sans-serif;
        font-size:14px;
        font-style:italic;
        color:#000;
     }
    #support {
        width:450px;
        height:240px;
        border-top:1px solid #9aa4bf;
        border-bottom:1px solid #9aa4bf;
        margin-left:74px;
        font-family:verdana,geneva,arial,helvetica,sans-serif;
        font-size:12px;;
    	font-style:italic;
        color:#092950;
        overflow:auto;
     }
    #support p {
        padding:10px;
        margin:0 15px;
        font-family:verdana,geneva,arial,helvetica,sans-serif;
        line-height:16px;
        text-align:justify;
     }
    #footer {
        clear:both;
        padding:100px 0 20px;;
        font-family:verdana,sans-serif;
        font-size:small;
        font-weight:bolder;
        text-align:center;
     }
    #footer a {
        color:#9aa4bf;
        text-decoration:none; 
     }
    #footer a:hover {
        color:#999;
        text-decoration:underline; 
     }

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208

  3. #3
    Join Date
    Nov 2013
    Posts
    34
    Thanks Major Payne for the links to get information about Scroll Bars customization.

  4. #4
    Join Date
    Nov 2011
    Posts
    118
    I wasn't referring to browser scroll bars. I was refering to the one i have in my web page

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,112
    Maxxxx, that's still a "browser" scrollbar. It looks like you just need to apply the styles to your "preamble" DIV instead of the body.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  6. #6
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42
    Interesting, so basically create a multi-browser hack, since all browsers have different styling requirements.

    Or use a JQuery plugin called jScrollPane.

    Are there any alternatives to jScrollPane ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles