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="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
<hbox flex="1">
   <browser type="content" src="http://mozilla.org" flex="1"/>
   <scrollbar orient="vertical"/>
</hbox>
</window>

Document Tags and Contributors

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