HOME ServicesI FAQ Company Info Client Care Policy
  Date  
151126-11-05 00:00:00

  HTML Tutorial  
 HEAD Elements
 Comments
 Headings
 Fonts
 Lists
 Text Flow
 Tables
 Horizontal Rules
 Form Elements
 Colors
 Images
 Character Entities
 CCS Scrollbar Colors

  Company Info  
  General Information
  Contact Us
  FAQ
  Policy
  HTML Tutorial
  cPanel Language File


  Directory Links  
Directory Free linking

  Portfolio  
Gioielli / DEVIANTSILVER / Argento Silver Jewelry
.: Deviant Silver :.

  Contacts  
Sales Tel.:
+39 071 2917323
Support Tel.:
+39 071 2864306
Fax:
+39 071 2901232
E-mail Sales:

E-mail Support:

E-mail DNS:

  Payments  


  13. CCS Scrollbar Colors  

13.1

With this tutorial I would like to explain how to make a style sheet where you can change the colors of the scrollbars. This style sheet will only work in IE and some other mostly used browsers. Netscape does not support this style so for that the users using Netscape will not be able to see the changes.

13.2

Now there are two ways to add this style to your pages. One of the two add the style directly into html page using the method explained in point 13.2.1. The second method is to created a external style sheet where you have to link the style sheet see point 13.2.2

13.2.1

Style inserted directly into the page.

<style type="text/css">

BODY {
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
</style>

13.2.1

Create a style sheet and call it style.css. Now paste the the code here below into this style sheet. In your html pages you have make link to tis style sheet. You have to place this link in the header part of the html lik this:

<head>

<title>Your Title</title>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>

The style sheet has to be in your root directory or any directory below this directory. If you put the style sheet in a directory called style you have to change the link in you header where you have placed the style sheet.

Copy this part into your style sheet that you have created.

BODY {
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

13.3

Here is a image that shows for what all these code means and what color will change if you make changes to the color:

Generate the code right here using this simple tool.

Simply Fill in the form fields with HEX codes, use the image as a guide.

  3D Light Colour:
  Arrow Colour:
  Face Colour:
  Highlight Colour:
  Shadow Colour:
  Darkshadow Colour:
  Track Colour:
 

 

 

 

 

 

 

Now if you change the color of the scrollbar-arrow-color: #006699; to #ffffff the arrow will be come white. Now try one on your own and see you can make one of these nice scrollbars that everybody uses these days.

 

  Sponsor  

  Powered by  
Frontpage, PHP, mod_ssl, mod_gzip, RedHat, MySQL

  Partners  

Melbourne IT partner

Thawte Official ISP Partner
Home | Services | Reseller Program | FAQ | Company Info | Support | Policy TOS AUP | Site Map | HTML Tutorials