SharePoint Online: How to Inject CSS using Custom Action in PowerShell?

Requirement: Add Custom CSS to SharePoint Online without editing Master page

PowerShell to Add CSS to SharePoint Online:
Assuming you have "Custom.CSS" file uploaded to "Site Assets" library, Here is the PowerShell to insert CSS to SharePoint Online site.
#Load SharePoint CSOM Assemblies
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"
  
#Set parameter values
$SiteURL="https://crescenttech.sharepoint.com/"
$CustomActionTitle = "Custom Branding CSS"
 
Try{
    #Get Credentials to connect
    $Cred= Get-Credential
    $Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.Username, $Cred.Password)
  
    #Setup the context
    $Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)
    $Ctx.Credentials = $Credentials

    #Get Existing Custom Actions
    $Site = $Ctx.Site
    $UserCustomActions= $Site.UserCustomActions
    $Ctx.Load($UserCustomActions)
    $Ctx.ExecuteQuery()

    #Check if the CustomAction Exists already
    $CustomAction = $UserCustomActions | Where { $_.Title -eq $CustomActionTitle }

    If($CustomAction -eq $Null)
    {
        #Add new custom action
        $UserCustomAction = $Ctx.Site.UserCustomActions.Add()

        #Insert CSS link in Head: <link rel="stylesheet" href="https://crescenttech.sharepoint.com/SiteAssets/Custom.css" type="text/css">
        $Url = "https://crescenttech.sharepoint.com/SiteAssets/Custom.css"
        $ScriptBlock = "var head = document.querySelector('head');
                        var styleTag = document.createElement('style'); 
                        var linkTag = document.createElement('link');
                        linkTag.rel = 'stylesheet'; 
                        linkTag.href = '$($Url)'; 
                        linkTag.type = 'text/css'; 
                        head.appendChild(styleTag);
                        head.appendChild(linkTag);"

        #Set the Properties of the custom action
        $UserCustomAction.Name = $CustomActionTitle
        $UserCustomAction.CommandUIExtension
        $UserCustomAction.Title = $CustomActionTitle
        $UserCustomAction.Location = "ScriptLink"
        $UserCustomAction.Sequence = 1000
        $UserCustomAction.ScriptBlock  = $ScriptBlock
        $UserCustomAction.Update()
        $Ctx.ExecuteQuery()

        Write-Host -f Green "Custom Action Added Successfully!"
    }
    Else
    {
         write-host -f Yellow "Custom Custom Already Exists!"
    }
}
Catch {
        write-host -f Red "Error Adding Custom Action!" $_.Exception.Message
} 
This PowerShell script creates a custom action which injects the CSS tag inside HEAD tag! To verify, go to the console tab of the Firebug or IE Dev tools, hit "head" and the HTML markup should include "<link rel="stylesheet" href="https://crescenttech.sharepoint.com/SiteAssets/Custom.css" type="text/css">"
SharePoint Online: How to Inject CSS using Custom Action in PowerShell? SharePoint Online: How to Inject CSS using Custom Action in PowerShell? Reviewed by Salaudeen Rajack on June 09, 2017 Rating: 5

No comments:

Please Login and comment to get your questions answered!

Powered by Blogger.