Introduction
I’m typically asked quite often on how I can attach global CSS or javascript like jQuery to my SharePoint / Office 365 site. There are a number of ways in order to ‘hookup’ or ‘connect’ CSS or JavaScript to your Office 365, SharePoint site. I’m going to review what your options are and what my favorite (easiest) way is. Let’s begin.

Option 1 [Only Publishing Enabled]
+Alternative CSS URL

Pros:
No special tools needed other than the browser of choice.
Very easy to attach a file using the interface.
The CSS can be applied to every sub site under
Different CSS can be applied per site

Cons:
Can only link 1 file in this slot. Once it’s used you can’t link anymore.
Manual process, not scriptable or repeatable.

From Site Settings

Under Look and Feel, Click on Master Page

At the bottom, Expand Alternate CSS URL, Click Specify a CSS file to be used, locate a CSS file to attach, then Click OK

Option 2 [Not Recommended]
+Using Content Editor / Script Editor Web Parts (CEWP)

Pros:
Quickly add CSS / JavaScript to a page by directly copy/paste into these web parts.

Cons:
Works only on that particular page, not a global solution.
If you accidentally delete the web part, you will lose your customizations. (not if you host the customizations in an external files and link it as content source (CEWP only))
Manual process, not scriptable or repeatable.

Option 3 [Best for Multiple Environments / Repeatable / Scriptable]
+Using SharePoint PnP

Add-PnPJavaScriptBlock – used to add a block of JavaScript to execute
Add-PnPJavaScriptLink – used to add links to JavaScript file

Below is some PowerShell PnP used to attach CSS and JavaScript files. In order to reference CSS you must load it via JavaScript. To do that I’ve borrowed some JavaScript that the PnP JS library uses. You can download that here


## CSS FILES
Add-PnPJavaScriptLink -Name "loadStyles" -Url "$($configObject.siteUrl)/Style Library/js/cssLoader.js" -Sequence 0 -Scope Site
Add-PnPJavaScriptBlock -Name "googleFonts" -Script "cssLoader.loadStylesheet("https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Condensed:400+700|Alegreya+Sans+SC", false);" -Sequence 1
Add-PnPJavaScriptBlock -Name "fontAwesome" -Script "cssLoader.loadStylesheet("$($configObject.siteUrl)/Style Library/vendor/font-awesome/css/font-awesome.min.css", false);" -Sequence 1
Add-PnPJavaScriptBlock -Name "styles" -Script "cssLoader.loadStylesheet("$($configObject.siteUrl)/Style Library/css/styles.css", true);" -Sequence 2
## JS FILES
Add-PnPJavaScriptLink -Name "jQuery" -Url "$($configObject.siteUrl)/Style Library/vendor/jQuery/jquery-3.2.1.min.js" -Sequence 0 -Scope Site
Add-PnPJavaScriptLink -Name "moment" -Url "$($configObject.siteUrl)/Style Library/vendor/moment/moment.min.js" -Sequence 1 -Scope Site
Add-PnPJavaScriptLink -Name "resize" -Url "$($configObject.siteUrl)/Style Library/vendor/resize/jquery.ba-resize.min.js" -Sequence 1 -Scope Site

Pros:
Easy to apply JavaScript to your site (takes a little bit more for CSS).
Builds a repeatable method to attach JavaScript & CSS to your site. Great for repeatable process and source control (as you can store these files)
You can use the C# PnP or PowerShell PnP

Cons:
Takes a little bit more than 1 command, need to establish a connection.
Need to be comfortable using powershell or C#.
Need to have the powershell modules installed.
No native command to attach CSS, they recommend using JavaScript to attach CSS.

Option 4 [My Favorite for Quick & Easy Applications]
+SP-Editor / Chrome Only

Download SP Editor plugin from the Chrome Store

Once you have the plugin installed and navigated to your SharePoint site, hit F12 to open the developer tools bar.

Click on the SharePoint tab and then click ScriptLinks. Here you can enter the sequence number to order your CSS references or JavaScript links. You also enter a site collection relative url from JavaScript only. After you enter that information, Click on the Add ScriptLink dropdown and select either current web or site collection

Pros:
Super Fast & Easy
Quickly apply CSS or JavaScript to a site or web (sub site) using the browser

Cons:
Requires Chrome [only a con if your organization doesn’t allow you to have Chrome]
Manual process, not scriptable or repeatable.

Comments
  • Harsh Damania
    Posted at 5:07 am April 4, 2018
    Harsh Damania
    Reply
    Author

    is it possible to load custom script after sp.js using this powershell

    • Tom Daly
      Posted at 4:20 am August 9, 2018
      Tom Daly
      Reply
      Author

      you could load your custom script and inside the script wait for sp.js
      SP.SOD.executeOrDelayUntilScriptLoaded(function () {
      // call your function here
      },
      “sp.js”);
      SP.SOD.executeFunc(“sp.js”, false, function () { });

  • Leave a Reply to Tom Daly
    Cancel Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.