Stylesheet.css - Custom scroll bars

[jackgilbert]

I have edited the stylesheet.css file because i wanted to add a custom scroll bar. The original code was:

BODY { background: #E3EBEF; margin: 8px; font-family: Verdana,Arial,Sans-serif; margin-left: 0px; margin-top: 0px; color:#666666;}
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #70d250; text-decoration: underline; }
A { color: #2F5A73; text-decoration: none; }
A:hover { color: #133447; text-decoration: underline; }
FORM { display: inline; }
TR.header { background: #ffffff; }
TR.headerNavigation { height:29px;}
TD.headerNavigation { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: bold; padding: 6px; }
A.headerNavigation { color: #FFFFFF; }
A.headerNavigation:hover { color: #C0C0C0; }
TR.headerError { background: #ff0000; }
TD.headerError { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; background: #ff0000; color: #ffffff; font-weight: bold; text-align: center; }
TR.headerInfo { background: #00ff00; }
TD.headerInfo { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; background: #00ff00; color: #ffffff; font-weight: bold; text-align: center; }
TD.footer { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #FFFFFF; padding: 6px; }
.infoBox { background-color: transparent; }
.infoBoxContents { font-family: Verdana, Arial, sans-serif; font-size: 10px; color:#355D75; }
.infoBoxNotice { background: #FF8E90; }
.infoBoxNoticeContents { background: #FFE6E6; font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #ffffff; background-color: #5386C6; padding: 2px; border-bottom: 1px solid; border-color: #163D6E; }
TD.infoBox, SPAN.infoBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd { background: #f8f8f9; }
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even { background: #f8f8f9; }
TABLE.productListing { border-color: #b6b7cb; }
.productListing-heading { font-family: Verdana, Arial, sans-serif; font-size: 10px; background: #96969E; color: #FFFFFF; font-weight: bold; padding: 2px; border-bottom: 2px solid #FFFFFF; }
TD.productListing-data { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
A.pageResults { color: #0000FF; }
A.pageResults:hover { color: #0000FF; background: #FFFF33; }
TD.pageHeading, DIV.pageHeading { font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #666666; }
TR.subBar { background: #f4f7fd; }
TD.subBar { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #666666; }
TD.main, P.main { font-family: Verdana, Arial, sans-serif; font-size: 11px; line-height: 1.5; }
TD.smallText, SPAN.smallText, P.smallText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TD.accountCategory { font-family: Verdana, Arial, sans-serif; font-size: 13px; color: #aabbdd; }
TD.fieldKey { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; }
TD.fieldValue { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
TD.tableHeading { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; }
SPAN.newItemInCart { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
CHECKBOX, RADIO, SELECT { font-family: Verdana, Arial, sans-serif; font-size: 11px; }
INPUT { background-color: #F8F8F8; font-size: 11px; }
TEXTAREA { width: 100%; font-family: Verdana, Arial, sans-serif; font-size: 11px; }
SPAN.greetUser { font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #E80000; font-weight: bold; }
TABLE.formArea { background: #f1f9fe; border-color: #7b9ebd; border-style: solid; border-width: 1px; }
TD.formAreaTitle { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; }
SPAN.markProductOutOfStock { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; color: #c76170; font-weight: bold; }
SPAN.productSpecialPrice { font-family: Verdana, Arial, sans-serif; color: #ff0000; }
SPAN.errorText { font-family: Verdana, Arial, sans-serif; color: #ff0000; }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: pointer; }
.moduleRowSelected { background-color: #E9F4FC; }
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
.site_table { background-color: #FFFFFF; }
TD.left { background-color: #BDDBE8; color:#304663; }
TD.right { background-color: #ffffff; }
TABLE.content { padding: 20px 10px 10px 10px; color:#666666; }
.copy { font-family: Verdana, Arial, sans-serif; font-size: 10px

 

and i changed this code to the following to add a custom scroll bar:

BODY { background: #E3EBEF; margin: 8px; font-family: Verdana,Arial,Sans-serif; margin-left: 0px; margin-top: 0px; color:#666666;}
<style type="text/css">BODY 
{ 
scrollbar-face-color: #5386c6;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #bddbe8;
scrollbar-arrow-color: #ff0000;
}</style>
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #70d250; text-decoration: underline; }
A { color: #2F5A73; text-decoration: none; }
A:hover { color: #133447; text-decoration: underline; }
FORM { display: inline; }
TR.header { background: #ffffff; }
TR.headerNavigation { height:29px;}
TD.headerNavigation { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: bold; padding: 6px; }
A.headerNavigation { color: #FFFFFF; }
A.headerNavigation:hover { color: #C0C0C0; }
TR.headerError { background: #ff0000; }
TD.headerError { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; background: #ff0000; color: #ffffff; font-weight: bold; text-align: center; }
TR.headerInfo { background: #00ff00; }
TD.headerInfo { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; background: #00ff00; color: #ffffff; font-weight: bold; text-align: center; }
TD.footer { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #FFFFFF; padding: 6px; }
.infoBox { background-color: transparent; }
.infoBoxContents { font-family: Verdana, Arial, sans-serif; font-size: 10px; color:#355D75; }
.infoBoxNotice { background: #FF8E90; }
.infoBoxNoticeContents { background: #FFE6E6; font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TD.infoBoxHeading { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #ffffff; background-color: #5386C6; padding: 2px; border-bottom: 1px solid; border-color: #163D6E; }
TD.infoBox, SPAN.infoBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd { background: #f8f8f9; }
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even { background: #f8f8f9; }
TABLE.productListing { border-color: #b6b7cb; }
.productListing-heading { font-family: Verdana, Arial, sans-serif; font-size: 10px; background: #96969E; color: #FFFFFF; font-weight: bold; padding: 2px; border-bottom: 2px solid #FFFFFF; }
TD.productListing-data { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
A.pageResults { color: #0000FF; }
A.pageResults:hover { color: #0000FF; background: #FFFF33; }
TD.pageHeading, DIV.pageHeading { font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #666666; }
TR.subBar { background: #f4f7fd; }
TD.subBar { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #666666; }
TD.main, P.main { font-family: Verdana, Arial, sans-serif; font-size: 11px; line-height: 1.5; }
TD.smallText, SPAN.smallText, P.smallText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
TD.accountCategory { font-family: Verdana, Arial, sans-serif; font-size: 13px; color: #aabbdd; }
TD.fieldKey { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; }
TD.fieldValue { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
TD.tableHeading { font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; }
SPAN.newItemInCart { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
CHECKBOX, RADIO, SELECT { font-family: Verdana, Arial, sans-serif; font-size: 11px; }
INPUT { background-color: #F8F8F8; font-size: 11px; }
TEXTAREA { width: 100%; font-family: Verdana, Arial, sans-serif; font-size: 11px; }
SPAN.greetUser { font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #E80000; font-weight: bold; }
TABLE.formArea { background: #f1f9fe; border-color: #7b9ebd; border-style: solid; border-width: 1px; }
TD.formAreaTitle { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; }
SPAN.markProductOutOfStock { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; color: #c76170; font-weight: bold; }
SPAN.productSpecialPrice { font-family: Verdana, Arial, sans-serif; color: #ff0000; }
SPAN.errorText { font-family: Verdana, Arial, sans-serif; color: #ff0000; }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: pointer; }
.moduleRowSelected { background-color: #E9F4FC; }
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
.site_table { background-color: #FFFFFF; }
TD.left { background-color: #BDDBE8; color:#304663; }
TD.right { background-color: #ffffff; }
TABLE.content { padding: 20px 10px 10px 10px; color:#666666; }
.copy { font-family: Verdana, Arial, sans-serif; font-size: 10px

 

I have uploaded stylesheet.css back up to the server and there is no change. Can anyone help me?

[Jack_mcs]

This will work. Then you can build on it as needed:

BODY {

background: #b3d2fd;

color: #000000;

margin: 0;

scrollbar-3dlight-color: #4682B4;

scrollbar-arrow-color: Black;

scrollbar-base-color: Silver;

scrollbar-darkshadow-color: #696969;

scrollbar-highlight-color: White;

scrollbar-shadow-color: Black;

scrollbar-face-color: #8bb7f5;

scrollbar-track-color: #d7f0ff;

}

 

Jack

[rabbitseffort]

I just tried the suggestion here by Jack and it didnt do anything to mine either--am I missing something? this should affect the scrollbar on the right side of the page right? Thanks for any help

[Jack_mcs]

The code works fine but only in IE. If you are using IE, besure you are not overriding the code with aother class with the same name.

 

Jack

[rabbitseffort]

ahh-you are right--I never use IE

is there a way for firefox to recognize it? I have seen other sites that have this work in firefox

[Jack_mcs]

I've never seen it work in any broser other than IE and I don't think it will but I could be wrong. If you search the web for "color scrollbar and firefox" I would think there would be a lot of results.

 

Jack