Does anybody know how to change the color of the notification popup displayed by the SharePoint 2010 client object model for Javascript? The following always gives me a green popup:

SP.UI.Notify.addNotification('Operation Complete', true);

I'm pretty sure it's possible to get other colors, because I've seen them on various blogs. I'm just not sure how to do it.


Unlike SP.UI.Status you have no direct way of setting the color with notifications, but since it is a simple HTML string you are adding you decide what goes into the notification area.

I havent tested it, but the following syntax should be perferctly legal:

SP.UI.Notify.addNotification('<span style=\'background-color:red\'>Operation Complete</span>', true);

Edit: I debugged the notify class and saw it build up spans depending on weather tooltip and onclickHandler was set (check out the _addNotificationInternal method in CORE.debug.js). The classes used are s4-noti, s4-noti-noti, s4-noti-in1 to -in3 all defined in COREV4.css (_LAYOUTS\\STYLES\Themable\CoreV4.css). Here you will also see that lots of the colors are actually controled by the theme chosen.

I played around with editing them runtime using the css rules:

function notifyMe()
    var sheet = document.styleSheets[6];
    var rules = sheet.cssRules ? sheet.cssRyles : sheet.rules; //cross browser rules
    for (i=0;i<rules.length;i++)
        if (rules[i].selectorText.toLowerCase()==".s4-noti")
           rules[i].style.backgroundColor = 'red';
        if (rules[i].selectorText.toLowerCase()==".s4-noti-noti")
           rules[i].style.backgroundColor = 'green';
        if (rules[i].selectorText.toLowerCase()==".s4-noti-in1")
           rules[i].style.backgroundColor = 'blue';
        if (rules[i].selectorText.toLowerCase()==".s4-noti-in2")
           rules[i].style.backgroundColor = 'purple';
        if (rules[i].selectorText.toLowerCase()==".s4-noti-in3")
           rules[i].style.backgroundColor = 'magenta';
    var nid = SP.UI.Notify.addNotification("test", true); 

This didnt completely style them, but should give you an idea on how to edit them as needed.

  • Thanks, Anders. I tried this, but it only appears to change the background color directly behind the text. The rest of the notification area is still green. Any thoughts on how to change the whole notification area background, or are we all stuck with green? – jason.venema Jul 1 '10 at 14:21
  • check out my updated script where i edit css rules – Anders Rask Jul 2 '10 at 9:45

To Know about the how the color change and more about the SharePoint Notification Status bar Please read this article. http://www.anmolrehan-sharepointconsultant.com/2011/06/sharepoint-status-bar-and-notification.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.