dreamweaver templates | responsive designs | frontpage templates | expression web templates | wordpress templates | css templates | website templates

Home > Help files >> Colored scrollbars

Colored scrollbars

You've probably seen recently an increasing number of sites using colored scroll bars instead of the default gray. I've added an example here, if you can't see a different color it's because your browser doesn't recognise it - you'll need Internet Explorer 5.5+ (Firefox and Opera browsers will just ignore the code and show the gray).

How's it done?
You'll need to add a bit of CSS code and then play around with the color combinations to get the look you are after.
Here's the code we've used for the scrollbars you can see on this page:

BODY{
scrollbar-3d-light-color: #ff8000;
scrollbar-arrow-color: #000080;
scrollbar-base-color: #000080;
scrollbar-dark-shadow-color: #24369C;
scrollbar-face-color: #99B3CC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #24369C;
}

...and here's the explanation:
scrollbar-3d-light-color: #ff8000; the color on the outside providing the shading
scrollbar-arrow-color: #000080; the arrow color
scrollbar-base-color: #000080; the base color but is covered by all the other colors
scrollbar-dark-shadow-color: #24369C; shadow to the right of the scrollbar
scrollbar-face-color: #99B3CC; the color of the scrollbar
scrollbar-highlight-color: #FFFFFF; color that goes immediately around the scrollbar
scrollbar-shadow-color: #24369C; provides the shadow in conjunction with the dark shadow

How to implement it
If you're going to use this across your site the best thing is to make a linked stylesheet, save your code as stylebars.css for example and then insert this line of code before your closing </head> tag to call the CSS:

<link rel=stylesheet type="text/css" href="stylebars.css">

Alternatively you can insert the whole code in the page, again above the closing </HEAD> tag like this:

<style type="text/css">
<!-

BODY{
scrollbar-3d-light-color: #ff8000;
scrollbar-arrow-color: #000080;
scrollbar-base-color: #000080;
scrollbar-dark-shadow-color: #24369C;
scrollbar-face-color: #99B3CC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #24369C;
}
-->
</style>

That's about it for changing the colors to the scroll bars on the right, but remember that this will also change the color of the bars round the <TEXTAREA> form field (if you have a form on your page of course). If you want to set a different effect for your form, you'll need to add a class rule to your <TEXTAREA> tag.
Using the above example you would have something like:

.formarea{
scrollbar-3d-light-color: #ff8000;
scrollbar-arrow-color: #000080;
scrollbar-base-color: #000080;
scrollbar-dark-shadow-color: #24369C;
scrollbar-face-color: #99B3CC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #24369C;
}

...and then call it by changing the <TEXTAREA> tag to <TEXTAREA CLASS=FORMAREA>

It's pretty straightforward, and a bit of trial and error can get a smart effect for your site, at least if you're using Internet Explorer 5.5 +

 

Features
News

Frontpage CSS Templates

New section with 100% CSS based XHTML valid Frontpage templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Dreamweaver CSS Templates

New section with 100% CSS based XHTML valid Dreamweaver templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Website Templates

We now have a selection of website templates with full PSD source files.

CSS Templates

New range of 100% CSS layouts and XHTML compatible.

read more read more...


Resellers
Check out our reseller program and earn 20% commission on all templates sold through your site - that's over $30 per sale for our ecommerce plus templates.

read more read more...

Affiliate program
5% discount promo

Find us on Twitter

Follow us on twitter

We accept credit card and Paypal paymentsFind us on FacebookFollow us on twitterJoin us on Linkedin

Frontpage Templates | Dreamweaver Templates |  Website Templates |  Expression Web Templates
License + Terms | Privacy Policy | Contact us | Help | Shopping Cart

© 2001 - 2019 The Template Store - All Rights Reserved
Shopping cart software by ecommercetemplates.com