Firefox XUL Toolbar background image
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 consoleNote 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="quicklin开发者_如何学运维ks">
<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");
}
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#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?
精彩评论