This project is read-only.

Setting the suite bar to the "newer" look and layout?

Mar 10, 2015 at 2:44 PM
Does anyone know how to set the suite bar to resember the newer look and feel of Office 365? This is what it looks like....
Image
Mar 19, 2015 at 6:06 PM
Do you mean for on-prem 2013? If so, there is currently no quick way to do this except to update the CSS and move around a few ribbon controls in the master page.

Eric
Mar 20, 2015 at 7:43 PM
It's Office 365, so not on-prem. Is that what you're asking? Sorry not sure if I'm answering you or not.
Nov 3, 2015 at 6:50 PM
Try replacing <div id="suiteBarRight"></div> worked for me.
<SharePoint:AjaxDelta runat="server" id="suiteBarDelta" BlockElement="true" CssClass="ms-dialogHidden ms-fullWidth noindex">
<SharePoint:FlightedContent runat="server" ExpFeature="ShellNavBar" FarmPropertyRequiredForFeature="SpoTAConfigPath" RenderIfInFlight="false">
<div id="suiteBar" class="ms-fullWidth"> <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><div class="ms-core-deltaSuiteLinks"><div id="suiteLinksBox"><SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" /></div></div></div></div></div><div id="suiteBarRight"> <div class="ms-core-deltaSuiteBarRight"> <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" MenuNotVisibleHtml="&amp;nbsp;" PrefixHtml="" SuffixHtml="" ImageUrl="/Style%20Library/ArmaninoBranding/images/icon-settings.png" ThemeKey="spcommon" MenuAlignment="Right" LargeIconMode="false"> <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=33" 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=33" 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=33" 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=33" 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="STSNavigate(StURLSetVar2(ajaxNavigate.get_href(), '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> </div> </div> </div> </SharePoint:FlightedContent>
<SharePoint:FlightedContent runat="server" ExpFeature="ShellNavBar" FarmPropertyRequiredForFeature="SpoTAConfigPath" RenderIfInFlight="true">
<div id="suiteMenuData" class="ms-hide"> <wssuc:Welcome id="IdWelcomeData" runat="server" EnableViewState="false" RenderDataOnly="true" /><span class="ms-siteactions-root" id="siteactiontd"> <SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMainData" PrefixHtml="" SuffixHtml="" ImageUrl="/_layouts/15/images/spcommon.png?rev=33" ThemeKey="spcommon" MenuAlignment="Right" LargeIconMode="false"> <CustomTemplate> <SharePoint:Menu runat="server" Visible="false" /> <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=33" 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=33" 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=33" 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=33" 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="STSNavigate(StURLSetVar2(ajaxNavigate.get_href(), 'mobile', '1'));" /> </SharePoint:FeatureMenuTemplate> </CustomTemplate> </SharePoint:SiteActions> </span> </div><SharePoint:ScriptBlock runat="server">

var g_navBarHelpDefaultKey = "HelpHome";
</SharePoint:ScriptBlock><SharePoint:DelegateControl id="ID_SuiteBarDelegate" ControlId="SuiteBarDelegate" runat="server" />
</SharePoint:FlightedContent>
</SharePoint:AjaxDelta>
Nov 3, 2015 at 6:52 PM
Hi There,

I am not sure you got a resolution here but I faced same issue and following solution worked for me.
I am using bootstrap master page and it has <div id="suiteBarRight"> tag </div>. If you replace all content include this tag with code posted in previously you will get newer look and feel of office suite bar.
Hope this helps you. There is limit on characters so could not fit in single reply.

Thanks,
  • Himanshu
Mar 22, 2016 at 7:19 AM
Thanks Himanshu for the heavy lifting - just saved my team some serious research time :)

Found that had to replace everything inside of the <div id="suiteBar" class="ms-dialogHidden noindex"> </div> block as it conflicted with branding delegate elements within <div id="suiteBarLeft">

Big thanks to the RioLinx team for a fantastic kit.

Regards
Rob
Mar 22, 2016 at 10:05 PM
Edited Mar 22, 2016 at 10:07 PM
@RobBayly - Would you mind sharing what you replaced, I'm having some difficulty with this as well.
Mar 29, 2016 at 4:22 AM
Hi Rusd

You need to edit the bootstrap-3-server.master:
  • download / copy bootstrap-3-server.master, open in your text editor of choice. Alternatively hack it up with SP2013 Designer.
  • Search for <div id="suiteBar" class="ms-dialogHidden noindex"> and it's corresponding </div> (Notepad++ it a great tool for this)
  • as per Himanshu's instruction replace everything bewteen <div id="suiteBar" class="ms-dialogHidden noindex"> and it's matching end with his code.
  • Save, upload and publish.
  • Make bootstrap-3-server.master the master page for your site, etc. (strongly recommend NOT updating the system master page until you'v sorted out any bugs)
We've found the following CSS changes also fix a few issues with the Bootstrap master in Office 365 and IE9+
//fixes Suite Bar-Ribbon Bar overlay / Suite Bar - all floated left in IE
#suiteBar {     
      height: auto;
     display: inherit; 
}
//fixes new Item dialog under navbar Z-indexing issue
.navbar { 
     position: inherit !important; 
}