Modify the SharePoint 2013 Ribbon with Help from Ribbon.ascx

One of the many little changes made to how SharePoint 2013 generates its interface is a snippet / control that SharePoint 2013 uses for the ribbon and suite bar control. This snippet / control links to a control template that may be difficult to find and customize. Part of the reason why it has been removed from the Master Page I would venture.

Back in SharePoint 2010, the ribbon was added to the Master Page as a long series of .NET and SharePoint controls. This would fill up quite a few lines in our custom Master Pages and rarely would we need to make any changes. SharePoint 2013 reduced the ribbon and new suite bar down to the following snippet found in our HTML Master Pages.

1
2
3

This would then typically be translated to the following SharePoint control in an associated Master Page.

1
2
3

What if we want to change something that is included in this PublishingRibbon control? I know, never touch the ribbon right? But what if you want to add a class or move a particular div around? Maybe move notifications or help blocks, or maybe add your own links to the suite bar? There are legitimate reasons why we want to customize the ribbon in simple HTML. But how?

Well it ends up that the PublishingRibbon control output is controlled by the control template, ~/controltemplates/15/Ribbon.ascx. The common, full path would be C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\CONTROLTEMPLATES. We do not want to modify this control template, and making our own control template that the PublishingRibbon control could point to is not supported.

I found the easiest solution was to take the markup found in ribbon.ascx and turn that into a fully articulated snippet. If you are not using HTML Master Pages, then you can simply copy the content from ribbon.ascx into your Master Page.

Caution: The following techniques should be used with your eyes wide open. Although you are not editing an OOTB SharePoint asset, you will end up with a custom Master Page that is not pointing to SharePoint’s ribbon control, thus if a SharePoint updates the suite bar / ribbon, your Master Page will most likely not reflect this change.

Having said that, in your HTML Master Page, replace:

1
2
3

with:

<div id="ms-designer-ribbon">








<div id="s4-ribbonrow" style="visibility:hidden;display:none"></div>


<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>

<div id="pageStatusBar"></div>


</div>

Wait! Why is there a panel at top?

Notice at the top of the above code, the first three lines:

1
2
3

I have found that you still need to include the snippet with ID: 02 or the page will not render correctly. I cannot say for sure why, but I found just including the snippet but placing it in a hidden panel works just fine.

If you are not using a HTML Master Page, rather a standard .master Master Page, then replace:

1
2
3

with:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly" EmitDiv="true">
<div id="s4-ribbonrow" style="visibility:hidden;display:none"></div>
</SharePoint:SPSecurityTrimmedControl>
<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" EmitDiv="true">
<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">
<SharePoint:DelegateControl id="ID_SuiteBarBrandingDelegate" ControlId="SuiteBarBrandingDelegate" runat="server" />
</div>
<SharePoint:AjaxDelta runat="server" id="DeltaSuiteLinks" BlockElement="true" CssClass="ms-core-deltaSuiteLinks">
<div id="suiteLinksBox">
<SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
</div>
</SharePoint:AjaxDelta>
</div>
</div>
</div>
<div id="suiteBarRight">
<SharePoint:AjaxDelta runat="server" id="DeltaSuiteBarRight" CssClass="ms-core-deltaSuiteBarRight" BlockElement="true">
<div id="welcomeMenuBox">
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false" />
</div>
<div id="suiteBarButtons">
<span class="ms-siteactions-root" id="siteactiontd">
<SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
PrefixHtml=""
SuffixHtml=""
ImageUrl="/_layouts/15/images/spcommon.png?rev=23"
ThemeKey="spcommon"
MenuAlignment="Right"
MenuNotVisibleHtml=" "
>
<CustomTemplate>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true"
>
<SharePoint:MenuItemTemplate runat="server"
id="MenuItem_ShareThisSite"
Text="<%$Resources:wss,siteactions_sharethissite%>"
Description="<%$Resources:wss,siteactions_sharethissitedescription%>"
MenuGroupId="100"
Sequence="110"
UseShortId="true"
PermissionsString="ViewPages"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
Text="<%$Resources:wss,siteactions_editpage15%>"
Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
ImageUrl="/_layouts/15/images/ActionsEditPage.png?rev=23"
MenuGroupId="200"
Sequence="210"
PermissionsString="EditListItems"
ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreatePage"
Text="<%$Resources:wss,siteactions_addpage15%>"
Description="<%$Resources:wss,siteactions_createpagedesc%>"
ImageUrl="/_layouts/15/images/NewContentPageHH.png?rev=23"
MenuGroupId="200"
Sequence="220"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="OpenCreateWebPageDialog('~siteLayouts/createwebpage.aspx')"
PermissionsString="AddListItems, EditListItems"
PermissionMode="All" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
Text="<%$Resources:wss,siteactions_addapp15%>"
Description="<%$Resources:wss,siteactions_createdesc%>"
MenuGroupId="200"
Sequence="230"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/addanapp.aspx')"
PermissionsString="ManageLists, ManageSubwebs"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_ViewAllSiteContents"
Text="<%$Resources:wss,quiklnch_allcontent_15%>"
Description="<%$Resources:wss,siteactions_allcontentdescription%>"
ImageUrl="/_layouts/15/images/allcontent32.png?rev=23"
MenuGroupId="200"
Sequence="240"
UseShortId="true"
ClientOnClickNavigateUrl="~siteLayouts/viewlsts.aspx"
PermissionsString="ViewFormPages"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_ChangeTheLook"
Text="<%$Resources:wss,siteactions_changethelook15%>"
Description="<%$Resources:wss,siteactions_changethelookdesc15%>"
MenuGroupId="300"
Sequence="310"
UseShortId="true"
ClientOnClickNavigateUrl="~siteLayouts/designgallery.aspx"
PermissionsString="ApplyThemeAndBorder,ApplyStyleSheets,Open,ViewPages,OpenItems,ViewListItems"
PermissionMode="All" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
Text="<%$Resources:wss,siteactions_settings15%>"
Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
ImageUrl="/_layouts/15/images/settingsIcon.png?rev=23"
MenuGroupId="300"
Sequence="320"
UseShortId="true"
ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/settings.aspx')"
PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_SwitchToMobileView"
Visible="false"
Text="<%$Resources:wss,siteactions_switchtomobileview%>"
Description="<%$Resources:wss,siteactions_switchtomobileviewdesc%>"
MenuGroupId="300"
Sequence="330"
UseShortId="true"
ClientOnClickScript="var mswlh = window.location.href; if (mswlh.indexOf('?')==-1) { window.location = mswlh + '?mobile=1'; } else { window.location = mswlh + '&mobile=1'; }" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</span>
<span id="ms-help">
<SharePoint:ThemedClusteredHoverImage
runat="server"
ID="TopHelpLink"
ThemeKey="spintl"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
TouchModePaddingLeft="7"
ImageUrl="/_layouts/15/~lcid/images/spintl.png"
Width="16"
Height="16"
OffsetX="19"
OffsetY="1"
HoverOffsetX="1"
HoverOffsetY="1"
NavigateUrl="#"
onclick="TopHelpButtonClick('HelpHome',event);return false"
AlternateText="<%$Resources:wss,multipages_helplink_text%>"
AccessKey="<%$Resources:wss,multipages_helplink_accesskey%>"
ToolTip="<%$Resources:wss,multipages_helplink_text%>" />
</span>
</div>
</SharePoint:AjaxDelta>
</div>
</div>
<div id="s4-ribbonrow">
<div id="globalNavBox">
<div id="ribbonBox">
<div id="s4-ribboncont">
<SharePoint:AjaxDelta id="DeltaSPRibbon" BlockElement="true" runat="server">
<SharePoint:SPRibbon
runat="server"
PlaceholderElementId="RibbonContainer"
CssFile="" >
<SharePoint:SPRibbonPeripheralContent
runat="server"
CssClass="ms-core-defaultFont ms-dialogHidden"
Location="TabRowLeft">
</SharePoint:SPRibbonPeripheralContent>
<SharePoint:SPRibbonPeripheralContent
runat="server"
Location="TabRowRight"
ID="RibbonTabRowRight"
CssClass="s4-trc-container s4-notdlg ms-core-defaultFont">
<SharePoint:SPSharePromotedActionButton runat="server"/>
<SharePoint:DelegateControl runat="server" ControlId="PromotedActions" AllowMultipleControls="true" />
<SharePoint:SPSyncPromotedActionButton runat="server"/>
<SharePoint:PageStateActionButton id="PageStateActionButton" runat="server" Visible="false" />
<span id="fullscreenmodebox" class="ms-qatbutton">
<span id="fullscreenmode">
<SharePoint:ThemedClusteredHoverImage
runat="server"
ID="fullscreenmodeBtn"
ThemeKey="spcommon"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingLeft="7"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
ImageUrl="/_layouts/15/images/spcommon.png?rev=23"
Width="16"
Height="16"
OffsetX="143"
OffsetY="178"
HoverOffsetX="125"
HoverOffsetY="178"
NavigateUrl="#"
onclick="SetFullScreenMode(true);PreventDefaultNavigation();return false;"
AlternateText="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
ToolTip="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
/>
</span>
<span id="exitfullscreenmode" style="display: none;">
<SharePoint:ThemedClusteredHoverImage
runat="server"
ID="exitfullscreenmodeBtn"
ThemeKey="spcommon"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingLeft="7"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
ImageUrl="/_layouts/15/images/spcommon.png?rev=23"
Width="16"
Height="16"
OffsetX="107"
OffsetY="178"
HoverOffsetX="179"
HoverOffsetY="96"
NavigateUrl="#"
onclick="SetFullScreenMode(false);PreventDefaultNavigation();return false;"
AlternateText="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
ToolTip="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
/>
</span>
</span>
<SharePoint:DeveloperDashboard runat="server" />
<SharePoint:DeveloperDashboardLauncher
ID="DeveloperDashboardLauncher"
ThemeKey="spcommon"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingLeft="7"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
NavigateUrl="javascript:return false"
OnClick="ToggleDeveloperDashboard(window.g_ddHostBase);return false"
OuterCssClass="ms-dd-button ms-qatbutton"
runat="server"
ImageUrl="/_layouts/15/images/spcommon.png?rev=23"
AlternateText="<%$Resources:wss,multipages_launchdevdashalt_text%>"
ToolTip="<%$Resources:wss,multipages_launchdevdashalt_text%>"
OffsetX="145"
OffsetY="196"
HoverOffsetX="163"
HoverOffsetY="196"
Height="16"
Width="16" />
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>
</SharePoint:AjaxDelta>
</div>
<SharePoint:AjaxDelta id="DeltaSPNavigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate" />
</SharePoint:AjaxDelta>
</div>
<SharePoint:AjaxDelta id="DeltaWebPartAdderUpdatePanelContainer" BlockElement="true" CssClass="ms-core-webpartadder" runat="server">
<div id="WebPartAdderUpdatePanelContainer">
<asp:UpdatePanel
ID="WebPartAdderUpdatePanel"
UpdateMode="Conditional"
ChildrenAsTriggers="false"
runat="server">
<ContentTemplate>
<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="WebPartAdder" />
</Triggers>
</asp:UpdatePanel>
</div>
</SharePoint:AjaxDelta>
</div>
</div>
<div id="notificationArea" class="ms-notif-box"></div>
<SharePoint:AjaxDelta id="DeltaPageStatusBar" BlockElement="true" runat="server">
<div id="pageStatusBar"></div>
</SharePoint:AjaxDelta>
</SharePoint:SPSecurityTrimmedControl>

You need to make sure that the following three Register lines are at the top of your Master Page as well.

1
2
3

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="/_controltemplates/15/Welcome.ascx" %>

You can now make those minor edits that you want to the suite bar and ribbon.

Comments

Bibhu says:

November 1, 2017 at 2:50 pm

Eric,
The duplicate menu items were caused because of wrong SharePoint:MenuItemTemplate ID. I copied them back from ribbon.ascx and now they function perfectly. Just not sure how these IDs got changed, can SP designer do it?
Best,
Bibhu

- Eric Overfield says:
  
  December 12, 2017 at 3:53 pm
  
  Ah, yes, when you copy and paste controls via SPD, SPD will ensure that id’s are unique.
  
Bibhu says:

November 1, 2017 at 1:44 pm

Great article, saved me many hours !! However when I changed

with content of ribbon.ascx , I see menu items “Edit Page” and “Add a Page” duplicated . I dont see these duplicates as MenuItemTemplate , but they do appear, not sure how and why.

Best,
Bibhu

- Eric Overfield says:
  
  December 12, 2017 at 3:52 pm
  
  Hi, not sure why that would be happening though. I would suggest going back to your Master Page as the ribbon controls or how they are included in Content Placeholders must be duplicated somewhere.
  
Venkatesh Kadiri says:

August 8, 2016 at 4:28 pm

Hi Eric, Thanks for the great post. I was struggling to find a way to customize the suite bar as I didn’t find any markup for it in the minimal HTML master page. This approach helped me achieve the kind of customization I wanted to do inside suite bar. I have given fixed width to body tag. But when the master page is applied, the page is not getting scroll bars(vertical and horizontal). Let me know if you want to see the code.

- Eric Overfield says:
  
  August 8, 2016 at 11:54 pm
  
  Hi, The scrollbars should be coming from the #s4-workspace. It sounds as though there is a JS error that is causing a SP OOTB JS function that determines the height/width of the workspace not to first. I would look in your browser dev toolbar’s console log first. If that doesn’t help, inspect the s4-workspace and see what its height/width is and if its settings make sense.
  
  Also, setting a fixed width for the body, yet the body’s scollbars are removed by OOTB SP CSS, may also be getting in your way.
  
  - Venkatesh Kadiri says:
    
    August 9, 2016 at 7:38 am
    
    There’s one function named FixRibbonAndWorkspaceDimensions in init.js that’s dynamically setting the width as element style on s4-workspace. If the element has class “s4-nosetwidth”, the code ignores setting the width.
    
Alejandro Aldana says:

October 24, 2015 at 2:33 am

Really good post! Explained step by step. I could undestand it even being new with Sharepoint development!

Aymeric says:

May 7, 2015 at 3:26 pm

Thanks! That has been very helpful 🙂

Ulrich says:

March 7, 2015 at 3:10 pm

Great tip. Thanks.. Saved me a few hours.

hazmat says:

November 13, 2014 at 11:59 pm

When adding the

<!–MS:<SharePoint:SiteActions …

I too get an error

- Eric Overfield says:
  
  December 13, 2014 at 9:34 pm
  
  I was able to address this issue below.
  
meghna says:

September 4, 2014 at 7:16 pm

Hello Eric,

I tired putting the ribbon stuff in my html master page but it gives me error starting ” <!–MS:<SharePoint:SiteActions …."

Anything you can think of I am missing?

-Meghna

- Eric Overfield says:
  
  November 8, 2014 at 1:05 am
  
  Hm, I would need to see the complete error. That is odd, I reviewed the code and it should work for you.
  
  - Eric Overfield says:
    
    December 13, 2014 at 9:33 pm
    
    Ok, I was able to find the problem. My sample code that I used was working fine, but when I entered into this blog post, WordPress replaced some important characters.
    
    When using a snippet, if you need to include < or > within a particular snippet control, such as to access $Resources as the SiteActions control does, then you need to replace < with <. But WordPress was converting that back to < for us. I have fixed this in the sample code and after a copy and paste into a demo HTML Master Page can confirm the above code will work for you. You can learn more about this issue here: http://ericoverfield.com/branding-sharepoint-2013-tricks-7-net-code-blocks-snippets/
    
- Vikrant says:
  
  November 10, 2014 at 11:19 am
  
  Megha,
  
  Any luck on this? I’m also facing same issue.
  
  Regards,
  Vikrant
  
  - Eric Overfield says:
    
    December 13, 2014 at 9:34 pm
    
    Addressed.

Modify the SharePoint 2013 Ribbon with Help from Ribbon.ascx

Comments

Speak Your Mind Cancel reply

About Eric

Recent Posts

Categories