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

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

PowerShell to Add CSS to SharePoint Online:

Adding custom CSS to your SharePoint Online site can help you customize the look and feel or apply branding to your site and make it more visually appealing. You can use PowerShell to add CSS to your SharePoint Online site quickly without having to hassle with the master page code. This blog post will show you how to use PowerShell to add CSS to SharePoint Online.

Assuming you have the “Custom.CSS” file uploaded to the “Site Assets” library, Here is the PowerShell to insert CSS to SharePoint Online site.

This method works only in classic experience! For modern sites, use: How to Inject Custom CSS to Modern Sites?
#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://Crescent.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://Crescent.sharepoint.com/SiteAssets/Custom.css" type="text/css">
        $Url = "https://Crescent.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 that injects the CSS tag inside the 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://Crescent.sharepoint.com/SiteAssets/Custom.css” type=”text/css”>”

To add custom CSS or JavaScript to a modern page in SharePoint Online, use the Modern Script editor solution! Reference: How to Add Custom CSS to SharePoint Online Modern Page?

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

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

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *