How i can force the site logo to always redirect to our home site inside office 365

Question

I am working on an office 365 project. and we have created 5 site collections. but i want the site logs to always redirect to the following site collection /sites/home. now the limitations/issues i am facing are as follow:-

1. inside on-premises site collections, i usually create my own master page (by copy/paste the seatle.master). and then inside the custom master page i do all the modifications i want. by adding the related JavaScript or modify the code inside the master page to redirect to certain urls when clicking on the site logo.

2. but in office 365, it is not advised to have our own master pages, since we do not have control over the updates and having our own custom master page means that we will loose any updates or new features offered by office 365. and modifying the built-in master page , means we will lose any customization we made to the master page when Office 365 provide new UI feature.

so i do not want to ask a general question on how we need to manage modifying the master pages in office 365... i am just asking how i can force the site logo to always redirect to certain site collection? is there any sort of branding that i can do ? OR can i achieve this using custom css which i can refer to (site settings >> look and feel >> master page) without modifying the master page itself ? Thanks

Answer 1

Insert javascript to the sites via Javascript-injection (see https://sharepointconcepts.com/tag/sharepoint-online/). This can be done via PnP-PowerShell CmdLets (Install here https://github.com/SharePoint/PnP-PowerShell/releases)

Your powershell could look like this to add the javascript injection to all you sites:

function  SetLinkRecursivly(){
param(
   $web = $(throw "Please provide web")
)
    Write-Host "SetLinkRecursivly "$web.Title" "$web.Url
    Connect-SPOnline $web.Url -Credential $cred
    #Remove-SPOJavaScriptLink -Name HomeLink 
    Add-SPOJavaScriptLink -Name HomeLink -Url "https://contoso.sharepoint.com/sites/home/SiteAssets/myjavascript.js"

    $Context.Load($web.Webs)
    $Context.ExecuteQuery()
    foreach($subweb in $web.Webs)
    {
        SetLinkRecursivly -web $subweb
    }
}

#Credentials to connect to office 365 site collection url 
$url ="https://contoso.sharepoint.com/sites/somecollection"
$username="[email protected]"
$password="xxx"

Write-Host "Loading libraries"
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.dll"
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.Runtime.dll"
Get-Command Add-SPOJavaScriptBlock

Write-Host "Authenticating to SharePoint Online Tenant site $url"
$Context = New-Object Microsoft.SharePoint.Client.ClientContext($url) 
#Credentials for the CSOM calls
$pass =  convertto-securestring $password -asplaintext -force
$credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $pass) 
$Context.Credentials = $credentials 
$Context.RequestTimeOut = 5000 * 60 * 10;
$web = $context.Web
$site = $context.Site 
$Context.Load($web)
$Context.Load($site)
$Context.ExecuteQuery()

#Credentials for the Connect-SPOnline command
$cred = New-Object -TypeName System.Management.Automation.PSCredential -argumentlist $username, $(convertto-securestring $password -asplaintext -force)

SetLinkRecursivly -web $web

Write-Host "==== DONE ===="

The javascript should find the logo image and replace the href

document.getElementById("ctl00_onetidProjectPropertyTitleGraphic").href="https://contoso.sharepoint.com/sites/home/"

Answer 2

You can add organization logo to the Office 365 Suite Bar as shown below. I have written an article on this here

Select Organization Profile tab from Settings section.

Here, you can see ‘Manage custom themes for your Organization’. Click on Edit button.

This will open up the page where we can upload the organizational logo. As per the recommendation, the logo should be of 200*30 pixels for better resolution.

Once you have uploaded the image, other branding changes can be done on the same page. There are options to specify the clickable URL for the logo so that it redirects to the specified page on click of the organizational logo. In addition to this, we can also specify a background image.

Within the same page, we can specify the Font and text color as well as the suite bar navigation background color.Once the required changes are done, click on Save. This will show the message that the themes will be applied to the tenant in a short while.

The custom theme will get applied instantly in the Admin Centre. However, it will take some time to update the settings in the entire Office 365 tenant.

Clicking on the Logo will take us to the custom link.