Firefox XUL Toolbar background image

Question

I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console

Note that Image #logoimage is displaying correctly

XUL

<toolbox id="navigator-toolbox" class="nav-box" crop="end">
        <toolbarpalette id="BrowserToolbarPalette">
            <image id="logoimage"/>
            <toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
                <menupopup>
                    <menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
                </menupopup>
            </toolbarbutton>
        </toolbarpalette>
        <toolbar id="test-toolbar"
             class="nav-bar"
             mode="full"
             iconsize="small"
             customizable="true"
             context="toolbar-context-menu"
             toolbarname="Toolbar"
             crop="end"
             defaultset="logoimage,toolbarseparator,quicklinks">
        </toolbar>
    </toolbox>

CSS

toolbar.nav-bar {
    background-image: url("chrome://tbar/skin/tbg.png");
}

#logoimage {
    list-style-image: url("chrome://tbar/skin/logo.png");
}

This shouldn't be related but why are you styling your toolbar by class name rather than ID? #test-toolbar would make more sense as a selector (and it would be faster). — Wladimir Palant
this is related to link I posted on top of my question, they suggest to use class-name, so I tried, but using ID or DOM/CSS path doesn't make any difference — Marek Sebera

Marek Sebera Marek Sebera · Accepted Answer · 2011-09-13T13:05:38

As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer

Try adding "-moz-appearance: none;" to your CSS stanza. This turns off OS-defined theming.

And that thing simply worked ! It also removes all OS specific look and feel effects

see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#

Firefox XUL Toolbar background image

3 Answers