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 the 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://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?
Hello, my powershell said my action was successful, however, i can’t find it in the Head. Any suggestions?