Html Tutorials - CCS Scrollbar Colors - REM Graphics Web Hosting Provider

Date

155062-02-21 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

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