Move the SharePoint 2013 Notification and Status Bar in HTML Master Pages

A while back I wrote a series of posts on customizing the modern SharePoint Ribbon (SharePoint Online, SharePoint 2013 and now SharePoint 2016). Let’s continue this series after a long break with a look at the notification and page status bars (notification bar).

The notification bar is included by default in the Seattle and Oslo master pages within the #s4-workspace, in particular in a manner that is simple to move, copy and replace as your branding requires.

The notification HTML that we can use in our custom master pages includes:

1
2
3
4

In traditional master pages, simply include this block of HTML and SharePoint controls in your custom master page where you want to display your notifications in your portal, just be sure to only include this block of code once in your Master Page.

Design Manager / HTML Master Page

If on the other hand you are using HTML Master Pages as found in Design Manager, the notification control is included by default as part of the SharePoint snippet ribbon control.

1	<!--SID:02 {Ribbon}-->

This snippet ID gets converted to a SharePoint control:

1	<PublishingRibbon:PublishingRibbon runat="server" />

This snippet id and ribbon control are difficult to edit for many on-prem developers without access to the hive. We could always use JavaScript / jQuery to migrate this control into our required place after the document loads on the client browser, but this seems to like lazy coding to me. If we can customize the Master Page, I prefer to send as much of the correct HTML to the browser as possible on the first request.

This notification bar snippet is defined in an ascx file, ribbon.ascx found in /controltemplates/ribbon.ascx. For HTML Master Pages, we can take the controls and code found in ribbon.ascx and turn this into snippets. The following snippet is the ribbon.ascx code converted to a HTML Master Page ready snippet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<div id="suiteBar" class="ms-dialogHidden noindex">
<div id="suiteBarLeft">
<div class="ms-table ms-fullWidth">
<div class="ms-tableRow">
<div class="ms-tableCell ms-verticalAlignMiddle">

</div>

<div id="suiteLinksBox">

</div>

</div>
</div>
</div>
<div id="suiteBarRight">

<div id="welcomeMenuBox">

</div>
<div id="suiteBarButtons">
<span class="ms-siteactions-root" id="siteactiontd">














</span>
<span id="ms-help">

</span>
</div>

</div>
</div>
<div id="s4-ribbonrow">
<div id="globalNavBox">
<div id="ribbonBox">
<div id="s4-ribboncont">








<span id="fullscreenmodebox" class="ms-qatbutton">
<span id="fullscreenmode">

</span>
<span id="exitfullscreenmode" style="display: none;">

</span>
</span>





</div>



</div>

<div id="WebPartAdderUpdatePanelContainer">








</div>

</div>
</div>

If you add this to your HTML Master Page in place of the ribbon control <!–SID:02 {Ribbon}–> and save, SharePoint will decide to add the original ribbon control back into your HTML Master Page.

It ends up that HTML Master Pages require the <!–SID:02 {Ribbon}–> snippet. Although we must include the ribbon snippet, we can ensure that it is not actually used by surrounding the ribbon snippet in a hidden panel. This provided SharePoint with what it expects while at the same time providing only our proper ribbon.

1
2
3

The complete code added to the HTML Master Page:

<div id="suiteBar" class="ms-dialogHidden noindex">
<div id="suiteBarLeft">
<div class="ms-table ms-fullWidth">
<div class="ms-tableRow">
<div class="ms-tableCell ms-verticalAlignMiddle">

</div>

<div id="suiteLinksBox">

</div>

</div>
</div>
</div>
<div id="suiteBarRight">

<div id="welcomeMenuBox">

</div>
<div id="suiteBarButtons">
<span class="ms-siteactions-root" id="siteactiontd">














</span>
<span id="ms-help">

</span>
</div>

</div>
</div>
<div id="s4-ribbonrow">
<div id="globalNavBox">
<div id="ribbonBox">
<div id="s4-ribboncont">








<span id="fullscreenmodebox" class="ms-qatbutton">
<span id="fullscreenmode">

</span>
<span id="exitfullscreenmode" style="display: none;">

</span>
</span>





</div>



</div>

<div id="WebPartAdderUpdatePanelContainer">








</div>

</div>
</div>

SharePoint Online Users

Fortunately the issue with including the notification and status bar controls in the ribbon control for HTML Master Pages was corrected in SharePoint Online. By default the notifications are not found in custom HTML Master Pages in SPO. Just add the following snippet to your desired spot in your SPO HTML Master Page and you are set.

1
2
3
4

This post is part of my series on modifying the SharePoint Online and SharePoint 2013/2016 suite bar and ribbon in a safe and SharePoint friendly manner.

Part one: "Collapse the Suite Bar and Ribbon to One Line"
Part two: "On Demanding Hiding the Suite Bar and Ribbon"
Part three: "Animated Hiding Ribbon"
Part four: "Use SharePoint Online Composed Looks and Theming Engine to Brand spcommon.png"
Part five: "Hide the SharePoint Online Ribbon for Anonymous Users"

Comments

farid says:

May 30, 2018 at 2:47 am

merci pour ce bon article il m’a beaucoup aider bravo 🙂

Dmytro Lapshyn says:

May 1, 2016 at 8:02 am

May I ask what’s the trick with using a syntax like

SPM:<SharePoint:SPSharePromotedActionButton

As far as the official documentation goes, the SPM prefix is intended only for registering namespaces in the very beginning of the master page, but surely you have used them in within AjaxDelta on purpose?

- Eric Overfield says:
  
  May 3, 2016 at 5:57 pm
  
  SPM: may be used any time you have a self closing tag, in fact you need to use it when you want to have a self closing tag. In the above example I had to use it for the DelegateControl as well.
  
  I have not seen documentation stating that SPM is primarily for register tags only. It has worked fine for me anywhere in a HTML Master Page or HTML Page layout, including in how SP created snippets as well.

Move the SharePoint 2013 Notification and Status Bar in HTML Master Pages

Comments

Speak Your Mind Cancel reply

About Eric

Recent Posts

Categories