Forum Discussion

Snehal_Rana's avatar
Snehal_Rana
Copper Contributor
Nov 19, 2019
Solved

Customize SuiteBar on modern SharePoint online site

Is there a way to customize the Suitebar on modern sharepoint online site? I am aware of modifying background color from Organization theme from admin center. This has been mentioned https://sympmarc...
developer
SharePoint Online
  • Dean_Gross's avatar
    Dean_Gross
    Nov 21, 2019
    Customizing the top bar is not supported, and if you do figure out a way, there is a good chance that it will be broken by a future update from Microsoft. That is their bar and you just leave it alone.
Snehal_Rana's avatar
Snehal_Rana
Copper Contributor
Nov 21, 2019

O365Developer I was able to customize the background color of the SuiteBar and also was able to add my custom logo on the site as per the image shown below: 

 

But I am still not able to hide the text "SharePoint" with custom text. I used standard admin functionality of "Manage custom themes for your organization" from Organization Profile in Admin Center

 

Any suggestions on how this can be accomplished using the PNP or CSS/Javascript injection?

Dean_Gross's avatar
Dean_Gross
Silver Contributor
Nov 21, 2019
Customizing the top bar is not supported, and if you do figure out a way, there is a good chance that it will be broken by a future update from Microsoft. That is their bar and you just leave it alone.
  • O365Developer's avatar
    O365Developer
    Brass Contributor
    Nov 22, 2019

    Dean_Gross 

     

    Hi Snehal,

     

    Thats not recommended and whatever Dean_Gross said is right ,it might break in future even if you do that ,

    • Snehal_Rana's avatar
      Snehal_Rana
      Copper Contributor
      Nov 22, 2019

      O365Developer For now I will mark this close but will post my update as I dig in further. Thanks to everyone who responded. 

      • Snehal_Rana's avatar
        Snehal_Rana
        Copper Contributor
        Dec 11, 2019

        Quick update on hiding "SharePoint" from the suitebar: I was successfully able to do s

         

         

        o in Modern Communication and Team sites. Below are the steps:

         

        1. Enable https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor on the site

        2. Enable Custom Scripting at site level as well as tenant level

         

        # If you don't already have the modules, run Install-module first!
Import-Module -Name SharePointPnPPowerShellOnline -DisableNameChecking
 
Connect-PnPOnline -Url 'https://[tenantname]-admin.sharepoint.com/' -Credentials (Get-Credential)
 
$DenyAddAndCustomizePagesStatusEnum = [Microsoft.Online.SharePoint.TenantAdministration.DenyAddAndCustomizePagesStatus]
 
$context = Get-PnPContext
$site = Get-PnPTenantSite -Detailed -Url 'https://[tenantname].sharepoint.com/sites/[sitename]'
 
$site.DenyAddAndCustomizePages = $DenyAddAndCustomizePagesStatusEnum::Disabled
 
$site.Update()
$context.ExecuteQuery()
 
# This row should output list of your sites' URLs and the status of their custom scripting (disabled or not)
Get-PnPTenantSite -Detailed -Url 'https://[tenantname].sharepoint.com/sites/[sitename]' | select url,DenyAddAndCustomizePages
 
Disconnect-PnPOnline
​

         

        • Add the following Javascript:

         

         

         

         

        <script type="text/javascript">
var jq = document.createElement('script');
jq.src="<a href="<a href="<a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>>" target="_blank"><a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>>>" target="_blank"><a href="<a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>>" target="_blank"><a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a</a>>>>>";
document.getElementsByTagName('head')[0].appendChild(jq);

setTimeout(
console.log('Code Executd');
debugger;
$(document).ready(function(){
setTimeout(function(){$('#O365_AppName').find('span').hide();},2000);
}), 1000);
</script>
<style type="text/css">
#O365_AppName span{display:none;}
</style>​

         

         

         

        It works like a charm !!

         

Resources