Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Scrollbar

This example shows how to style the scrollbars in your xul application. Scrollbars inside browser elements will be styled to. Tested on windows xp.

Example assumes a structure like this:

app/chrome/chrome.manifest
app/chrome/skin/global/

Copy the scrollbars.css from xulrunner/chrome/classic.jar/skin/classic/global to app/chrome/skin/global/scrollbars.css

Open the app/chrome/chrome.manifest and add:

skin app-global standard/1.0 skin/global/
override chrome://global/skin/xulscrollbars.css chrome://app-global/skin/scrollbars.css

xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx. So to make this work with osx, make an extra override:

override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css

Change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used.

Example xul window:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="sampleWindow" width="320" height="240"
   xmlns="https://www.mozilla.org/keymaster/gat...re.is.only.xul">
<hbox flex="1">
   <browser type="content" src="https://mozilla.org" flex="1"/>
   <scrollbar orient="vertical"/>
</hbox>
</window>

Document Tags and Contributors

Tags: 
 Contributors to this page: wbamberg, fscholz, Ma gu
 Last updated by: wbamberg,