Propagate custom CSS to multiple site collections in Classic SharePoint On-Premises

BindTuning themes offer the flexibility of adding your custom CSS rules to your Classic SharePoint pages, making sure you have full control over how you want your site to look and behave. 

To do this, each theme is accompanied by a customStyles.css file, allowing you to define specific styles for the site collection where the theme is applied to. 

However, being that that same file is applied on a site collection to site collection basis and, considering you might need to apply those same styles to all your site collections, this same process may comprehend several hours of work. 

To mitigate this same scenario, BindTuning created a custom PowerShell script that will automatically propagate the same customStyles.css file to the entirety of your Farm's site collections, where the theme has been deployed.

Before Beginning 

You'll find the PowerShell script below, however, some adjustments are necessary. Please be sure to replace the following parameters as needed: 

• Install-Module SharePointPnPPowerShell2019 - Depending on your SharePoint On-Premises version, you may need to replace 2019 (with either 2013 or 2016); 
• $UserName = "YOUR_ADMIN_ACCOUNT"; 
• $Password = "YOUR_PASSWORD";
• Get-SPWebApplication -Identity "YOUR_WEB_APPLICATION_DEFAULT_URL" - Pass the default zone (i.e: http://my-2019-farm-url);
• Be sure to replace any occurrence of the parameter YOUR_THEME_NAME for the actual name of the theme that has been deployed. 

  Note: You can find the concrete theme name by opening your Style Library and locating the folder with the theme name.

Add-PSSnapin Microsoft.SharePoint.PowerShell

Install-Module SharePointPnPPowerShell2019 

# Variables for processing
$UserName= "YOUR_ADMIN_ACCOUNT"
$Password = "YOUR_PASSWORD"
$EncPassword = convertto-securestring -String $Password -AsPlainText -Force
$Cred = new-object -typename System.Management.Automation.PSCredential -argumentlist $UserName, $EncPassword

# Gets the web application specified as the parameter
$SPWebApp =  Get-SPWebApplication -Identity "YOUR_WEB_APPLICATION_DEFAULT_URL" 

$SCall = $SPWebApp | Get-SPsite -Limit All

# Gets full URL of each site collection
$SCallUrl = $SCall.Url

# Gets relative URL of each site collection
$SCallRelative = $SCall.ServerRelativeUrl

foreach ($site in $SCallUrl) {
  Connect-PnPOnline -Url $site -Credential $Cred

  # Searches the site collection to verify if the theme folder exists
  $GetFolder = Get-PnPFolder -Url "/Style Library/YOUR_THEME_NAME" -ErrorAction SilentlyContinue

  if ($GetFolder) {
    foreach ($sitecollection in $SCallRelative) {

    $relativeUrl = $sitecollection+"/Style Library/YOUR_THEME_NAME/customStyles.css" 
    $importFileUrl = $sitecollection+"/Style Library/YOUR_THEME_NAME"
    $pathForDownload = "C:\PATH_FOR_DOWNLOAD"

    $CheckOutFile = Set-PnPFileCheckedOut -Url "$relativeUrl" -ErrorAction SilentlyContinue

    $GetFile = Get-PnPFile -Url $relativeUrl -Path $pathForDownload -AsFile -ErrorAction SilentlyContinue

    $AddContent = Add-Content -Path $pathForDownload\customStyles.css -Value 'MY_CUSTOM_CSS_HERE'

    $AddFile = Add-PnPFile -Path $pathForDownload\customStyles.css -Folder "/Style Library/YOUR_THEME_NAME" -ErrorAction SilentlyContinue

    $CheckIn = Set-PnPFileCheckedIn -Url "$relativeUrl" -ErrorAction SilentlyContinue

    Remove-item $pathForDownload\customStyles.css -ErrorAction SilentlyContinue
    }
  }
  else {
    Write-Output "Folder does not exists in this site: $site"
  }
}

After running the script, your customStyles.css file should have been modified to contain the CSS rules passed on the script. 

Apply custom CSS

Now that the specified file contains all the necessary styles, the last step consists of applying them to the necessary site collections. To do this: 

1. Navigate to your Site Settings;
2. Under Look and Feel, select Master page; 
3. Select the option Alternate CSS URL; 
4. Select the option Specify a CSS file to be used by this site and all sites that inherit from it;
5. Hit Browse, and pass the value to the customStyles.css file. 

   

6. Click on Insert and finish off by hitting Ok.

After this is done, the CSS rules defined in the file should be automatically applied!