Home/ Questions/Q 6476253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:48:09+00:00

so I’m building a custom firefox extension and I got to the step where

  • 0

so I’m building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css

If you look at feedly’s button (Feedly is a firefox extension), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/

whereas default extension buttons have no background behind it….

how do you style a custom extension button such that it has a button-like background just like the feedly button?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The <toolbarbutton> element has an image attribute that allows you to specify an image:

    <toolbarbutton image="chrome://.../icon.png" label="My button"/>

    However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:

    <toolbarbutton id="myButton" label="My button"/>

    You would have the following CSS code:

    #myButton
{
  list-style-image: url("chrome://.../icon.png");
}

    More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images

    • 0