eBlogzilla

Wednesday, September 1, 2010

How to change background color of notificationbox

If you take a look on official documentation for notificationbox, you will not find any attributes or properties which allows to change background color. But it is possible to do. Let's assume that you have create notification box with the next code:
    var nb = gBrowser.getNotificationBox();
    nb.appendNotification(
        "This is my message",
        "my-notification",
        "chrome://myext/skin/notification.gif",
        nb.PRIORITY_INFO_MEDIUM,
        [
            {
                label: "More info",
                accessKey: "M",
                callback: function() {alert('More info action!')}
            }
        ]);
Take a look on the second parameter of appendNotification function. This parameter will be used as value attribute for notification element which will be created. We can use this fact. So only one thing that you need is to add one rule in CSS file of the extension. Something like this:
  notification[value='my-notification'] {
    background-color: green;
  }
You will see your notification with green background color. You can also add more CSS rules and specify value of color property and etc.