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

To add custom CSS to SharePoint Online modern page, refer: How to Add Custom CSS to SharePoint Online Modern Page?

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

One thought on “SharePoint Online: How to Inject CSS using Custom Action in PowerShell?

  • February 28, 2020 at 5:25 PM

    Hello, my powershell said my action was successful, however, i can’t find it in the Head. Any suggestions?

    Reply

Leave a Reply