Home | Registration | Catalog | Resources | Hosting | Services | Support | Contact Us | Downloads | Press Room | Search
Give Your Web Site A Professional Makeover Quickly And Easily DPA Software
Colored Scroll Bars  

 

Subscribe to our

Newsletter

Email Address
 

Login
Bookmark this Page
 

Up
Using Splash Pages
Page Redirection
Java & Windows
Screen Captures
Resampling
Scaling GIFs
Server Type
FP2003 FAQs
Adding Media
Thumbnails
Web Backup
Submit Button
FP2003 Shared Borders
Borders Meta Tag
Printable Pages
Favicons
Backup Tips
Bookmarks
Convert Word Art
Getting Hex Colors
Colored Scroll Bars
External Style Sheets
Reverse Publishing
Publishing Fixes
Detect and Repair
Table of Contents
TOC by Categories
FP Extensions
Picture Button
 

Downloads
FREE STUFF
Press Room
Search
Shopping Cart
 

No Items 
 

Check Out
 

 

Need FrontPage?
 

Great Price!
 

FrontPage How To

Volume 1 - Issue 21 - August 2004

Colored Scroll Bars
By David Pfeiffer of FrontLook.com
Adding Colored Scroll Bars to your web pages are quite easy to do with a little bit of Cascading Style Sheet (CSS) code. This tip will help you colorize your browser scroll bars for the IE browser.

Step 1: Determine the desired colors for your Scroller Bar
You will need basically 5 color numbers to setup your scroll bar. These colors numbers will need to be in a Hexadecimal format. You will need 5 colors for the face, highlight, track, arrow and shadow color. Some of these color numbers will be used twice in the style code.

The easiest way to determine the hex color number is to measure the color with an eyedropper tool. This technique is described in our Get Color Values using an Eye Dropper Tool tip.

Step 2: Edit the Color Numbers in the Style Code
Once you have the hexadecimal color numbers, place them in the following code block. where scrollbar-arrow-color and scrollbar-highlight-color will be the same color. Also scrollbar-shadow-color and scrollbar-3dlight-color will be the same color.


Style Code Template

Where "scrollbar-arrow-color" and "scrollbar-highlight-color" will be the same color. Also "scrollbar-shadow-color" and "scrollbar-3dlight-color" will be the same color.

Step 3: Copy and Paste the Edited Style Code
Select the Style code text in the "Style Code Template" Edit Area field above and then press Control-c to copy the selected text to clipboard. Now bring up the page you wish to set your colored scroll bars and switch to "HTML" or "Code" view and paste somewhere between the head tags near the top of the page as illustrated below.

 


Pasted Style code in HTML or Code View

Step 4: Preview in Browser
Now preview the page in the IE browser and check out your colored scrollbars.

Adding Colored scroll bars to the entire site
If you really like the colored scroll bars and want to add them to the entire site, we would strongly recommend an external style sheet to setup these scroll bars. Using a common style sheet for the whole web will allow you to make color changes in one place instead of having to make changes to every page in the Web. This will be discussed in the next FrontPage How-to tip.
 

DPA Software

 Copyright 2004 DPA Software - All Rights Reserved

Last Modified : 03/06/2008 11:15 PM
We accept the following payment forms
POs and Checks and PayPal accepted
Privacy
Statement
Questions or Problems?
 Click here
Download Policy
Secured by SSL Certificate

All products come with a

FrontLook, Theme Chameleon, Image Chameleon and FrontLook Super Themes are trademarks of DPA Software. Microsoft FrontPage, SharePoint, Microsoft and the Office logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries. Java is a trademark of Sun Microsystems. *PC Magazine is a registered trademark of Ziff Davis Publishing Holdings Inc. Used under license from Ziff Davis Media Inc.