A way to prevent coloring of my browser scrollbars?

Forum Moderators: open

Message Too Old, No Replies

A way to prevent coloring of my browser scrollbars?

I don't want my scroll bars colored in IE ... is there a way to stop this?

us60

12:59 am on Sep 25, 2005 (gmt 0)

Hi,
I open my web site's control panel on my host's site, and the scrollbars are colored a dark purple. Directly adjacent, the right edge of the panel page has a gray stripe that I mistakenly take to be my scrollbar before I realize what I am looking at.

And the actual scrollbars of my Internet Explorer window displaying this control panel blend into my desktop's night sky.

Any way to disable a web site's coloring of my scroll bars?

I think if I go into accessibility options, I can discard the site's choice of colors, but that leaves me looking at a blank white background with objects placed on it. The objects are now laid out in their own cells with colors dividing them.

Thanks

Larry

keyplyr

6:12 am on Sep 25, 2005 (gmt 0)

If you have access to edit the code, look for anything that contains "scrollbar" and remove it. This code will be in the <HEAD> section or the <body> tag of the webpage itself, or in an external CSS file.

Only Internet Explorer users see colored scroll bars. If it bothers you, switch to Firefox [mozilla.org] or Opera [opera.com].

kaled

9:10 am on Sep 25, 2005 (gmt 0)

Are you using Win XP? This feature should not exist in WinXP (I think).

Kaled.

SuzyUK

11:45 am on Sep 25, 2005 (gmt 0)

You can use a user stylesheet in your IE which will avoid coloured scrollbars on all sites if you like.

create a stylesheet - name it something like "ie-user.css", copy the snippet below

body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}

save it where you like (Desktop might be good)

then in Internet Explorer
go to the Internet Options button in the Tools menu. Click on the Accessibility button, and check the box titled "Format documents using my style sheet". Then browse to the style sheet you created and select it. Apply and save.

You shouldn't need to restart to see the effect.

Suzy

us60

11:39 pm on Sep 25, 2005 (gmt 0)

Suzy,
Thank you! Your code block has restored my scrollbars, and is my style sheet in its entirety:

body, html {
scrollbar-face-color: ThreeDFace!important;
scrollbar-shadow-color: ThreeDDarkShadow!important;
scrollbar-highlight-color: ThreeDHighlight!important;
scrollbar-3dlight-color: ThreeDLightShadow!important;
scrollbar-darkshadow-color: ThreeDDarkShadow!important;
scrollbar-track-color: Scrollbar!important;
scrollbar-arrow-color: ButtonText!important;
}

This would be good for another topic, but
IE has an accessibility button that lets me ignore my choice of color, font style or font size. I wish Firefox had a similar feature, or maybe it does but I haven't run across it.

A couple of refinements of that accessibility feature would be to have the button on the front panel, instead of the Internet Options panel, and an ability to save my settings with the site I set them for so I can hop between a clean site without settings and an ugly site with settings to clean it up. There are some pages out there that put purple text on black or black text on some dark blue-purple background. They have good content, but it's a pain to read it.

Thanks again
Larry

Robin_reala

6:33 am on Sep 26, 2005 (gmt 0)

Firefox 1.5 will have per-site user stylesheet support (although no way to turn it on or off instantly - that'd currrently be something for an extension). Example code:

@-moz-document url-prefix(http://www.mozilla.org/) {
 #q { background: white! important; color: black! important; }
}

The three parameters defined are url(x) (x is the url), url-prefix(x) (x is the start of the URL) and domain(x) (x is the domain name).

SuzyUK

6:37 am on Sep 26, 2005 (gmt 0)

Hi Larry

It would make a topic all of it's own ;)

>>I wish Firefox had a similar feature, or maybe it does but I haven't run across it.
It does under Tools >> Options >> General >> Fonts & Colors

which does the same as IE and applies you settings to all sites. BUT! You can do a lot more with FF's built in userContent.css [mozilla.org] file.

>>save my settings with the site I set them for so I can hop between a clean site without settings and an ugly site with settings to clean it up.

This you can do :)

[see this thread [webmasterworld.com]] for some hints, there's temporary ways and more permanent ways.

The problem with using general styles in userContent.css or a user stylesheet.
e.g. body {background: #fff; color: #000;}
if you're looking to always set black text on a white background is that the site itself may have set up their black background on some other element than the body (say a table or a wrapper div)

so the solution is to be able to target (using specific CSS selectors) each site individually. In order to target specific sites it would be nice if they added "CSS Signatures", but likely those that you want to change don't. However there is GreaseMonkey script which does this for you, then you can target any specific site you need to.

For example I use this script and what it does to this site is give the Body an ID.
<body id="www-webmasterworld-com">
which means I can (and have) written rules into my userContent.css so that they apply only to this site.

that's only the surface of what can be done with FF userContent.css and perhaps we should start it's own topic because the power can be added to with The ChromEdit extension, Web-Dev Toolbar and The "Add CSS Signature" Grease Monkey script.

and each bit could be explained much better.

Suzy