I am using SP.UI.Status to display announcements. Some announcements are using the default yellow status and icon and some are using the red status and icon. Both of these work fine on their own.

The problem I am running into is when I am trying to use one or more yellow and one or more red announcements simultaneously. It seems that SharePoint, by default, finds the most severe of the statuses and makes all announcements that color/icon.

Is there a way to break these up so they are read as individual statuses but have them contained in the same banner?


There doesn't seem to be any way to do what you are asking out of the box.

I did a quick test and see that SharePoint sets the colour value on the #pageStatusBar container as a whole and the messages are contained within that.

If you wanted to use some custom JavaScript and CSS, you could achieve what you want. As you create each status message, you could assign your own classes to the messages so that you could override the Microsoft styles.

For the icons, there are rules in corev15.css that set the position of the background image, therefore setting the icon. Override these with your own styles and it will work.

.ms-status-blue > .ms-status-status > .ms-status-iconSpan > .ms-status-iconImg
  • So far I have been able to do just that. I've got the colors differing and looking like individual announcements. The hold up now is the icon. The #pageStatusBar seems to control all icons for each #status_n.
    – Jordan
    Sep 2 '15 at 14:00

You could achieve this by cloning #pageStatusBar container with jQuery and changing class attribute. For example:

var msg = "Some text";
var new_msg = "New text";

var initStatus = SP.UI.Status.addStatus("Initial Status", msg);
SP.UI.Status.setStatusPriColor(initStatus, 'blue');

initBar = $("#pageStatusBar");
initBar.css("margin-bottom", "5px");

var noticeBar = initBar.clone();
noticeBar.find(".ms-status-body").html(function () { return $(this).html().replace(msg, new_msg) });
initBar.after(noticeBar.attr("class", "ms-status-yellow"));

We can use following colors, by default: red, yellow, green, blue.

Source: SP.UI.Status.setStatusPriColor

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.