www.webdeveloper.com
Results 1 to 6 of 6

Thread: Scroll bar color

Hybrid View

  1. #1
    Join Date
    Nov 2011
    Posts
    138

    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,217

  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
    138
    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,143
    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.

  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