Scrollbar CSS colors...

[_maf_]

Hi, I was wondering how I can get custom CSS scrollbar colors to work in Firefox. I think the only web pages I've seen that actually do this is Nero's site - eg. http://tinyurl.com/5zzzj

Thanks for any help

[Atropos]

Using CSS to alter the appearance of the scrollbars is not supported; it alters the appearance of the browser UI elements and for that reason its doubtful it will ever be supported.

As for the Nero site: No, they are not using CSS. They are using a header in a META to tell the browser the web page is not compatible with MS Themes:

Code: Select all

else if (aHeader == nsHTMLAtoms::msthemecompatible) {
397     // Disable theming for the presshell if the value is no.
398     nsAutoString value(aValue);
399     if (value.EqualsIgnoreCase("no")) {
400       nsIPresShell* shell = mDocument->GetShellAt(0);
401       if (shell) {
402         shell->DisableThemeSupport();
403       }
404     }
405   }

Basically this means Mozilla developers have implemented this functionality "innovated" by Microsoft:

MSThemeCompatible META Tag

Microsoft Internet Explorer 6 supports a META tag to enable themes within the body of a Web page. The most obvious effect of themes within a Web page is to override the defaults for certain elements such as the text used for form input or general appearance of <INPUT> or <SELECT> controls and related buttons. It might take some experimentation to find all possible impacts this META tag has on the tab's design.

I imagine one reason that Mozilla developers support this is because usually the FORM controls will try to use the operating system controls, which like the scroll bar may be themed by the operating system itself. This means on the Nero page, you are not seeing a scrollbar designed by Nero, but the scrollbar is it was designed by the Firefox theme designer (vs the Windows theme desginer).

[_maf_]

Someone over at The Shodown Forum said the Nero site plays with the chrome files:

Code: Select all

chrome://global/content/xul.css

*    (line 13)
{
    -moz-user-focus: ignore;
    display: -moz-box;
}

scrollbar    (line 763)
{
    direction: ltr;
}

scrollbar, scrollbarbutton, slider, thumb    (line 772)
{
    -moz-user-select: none;
}


chrome://global/skin/scrollbars.css

scrollbar    (line 33)
{
    -moz-appearance: scrollbartrack-horizontal;
    -moz-binding: url(chrome://global/content/bindings/scrollbar.xml#scrollbar);
    cursor: default;
    background-color: scrollbar;
    background-image: url(chrome://global/skin/scrollbar/slider.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    -x-background-x-position: 0%;
    -x-background-y-position: 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}

scrollbar[orient=vertical]    (line 40)
{
    -moz-appearance: scrollbartrack-vertical;
}

[Atropos]

That's funny. Exactly how is the Nero site going to "play with the chrome files"? Those snippets are from the CSS files that ship with the browser, and that is loaded in XUL, and the Nero site is not using XUL at all, nor would the site be able to alter the files on your system, so "plays with the chrome files" is not accurate. Especially when you consider that loading the Nero site in Internet Explorer causes the same results! On Windows XP, with the Luna theme (default WinXP theme), the scrollbar is baby blue with "ridges" middle. When loading the Nero site, IE 6 shows the old-style scrollbar ("Classic" WinXP theme, looks like Win95/Win2k).

What they probably mean to say is that if the browser theme wants to, it can pick up the theme style from Windows. But if the web page says not to use the Windows theme style, it won't be used.

[_maf_]

Hmm, well I don't know. It doesn't really matter that much anyway.

[HR_]

do like that:

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

scrollbar{
-moz-appearance: none !important;
...
}

[trolly]

This thread is over four years old. I doubt that anyone is still watching. Locking.