Toolbar button similar to Back/Forward buttons of

问题:

I am developing a Firefox addon. I need to create two buttons which exactly looks and operates like back and forward buttons. But the difference is I need to put my own icon inside them. I am completely blank. Any directions will be really helpful.

[Edit] I am asking for creating two buttons with the look and feel of back/forward button(Although there are two buttons, it seems like one) in the latest Firefox on windows environment.

Thanks.

回答1:

It's really easy to add your own Image to toolbar buttons. Read these links you'll have your answer & don't forget to link your images for the buttons in CSS file.

https://developer.mozilla.org/en/XUL_School/Adding_Toolbars_and_Toolbar_Buttons

https://developer.mozilla.org/en/XUL_Tutorial/Toolbars

https://developer.mozilla.org/en/CSS/-moz-border-image

https://developer.mozilla.org/en/custom_toolbar_button

https://developer.mozilla.org/en/XUL/Toolbars/Creating_toolbar_buttons

For example:

<window id="main-window">
  <toolbox id="navigator-toolbox">
    <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarName.label;"
      accesskey="&xulschoolhello.toolbar.accesskey;"
      customizable="true" mode="icons" context="toolbar-context-menu" 
      defaultset="xulschoolhello-hello-world-button"
      insertbefore="PersonalToolbar" />
  </toolbox>
</window>

CSS File:

 //LInk you image here//
    toolbarbutton.xulschoolhello-toolbarbutton,
    window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
    toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
      list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
    }