0

So I know that it is possible to set all of the System pages to use a certain CSS file in SharePoint but I am trying to apply the CSS to only a select few of the system pages. All of the other System pages I would like t use the default SharePoint CSS and then all of the normal site pages are using my custom CSS.

I know generally I need an if statement checking to see of the URL matches something and if that is the case it will apply the CSS but I am unsure as to how I need to write this exactly. Any help or links to help would be much appreciated.

Improve this question

1 Answer 1

Reset to default
1

Demo:

if ((window.location.href.toLowerCase().indexOf('testfolder') > 0))
    {
    
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = 'https://contoso.sharepoint.com/sites/dev/Doc/testFolder/test.css';
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    }

For modern experience,you could add a SPFX Extension to add the js file to page. https://github.com/hugoabernier/react-application-injectcss(demo on add CSS file,you could change it to add JS file),

For classic experience,you could use pnp powershell add jslink.

Demo:

$username = "[email protected]"
$password = "Password"
$cred = New-Object -TypeName System.Management.Automation.PSCredential -argumentlist $userName, $(convertto-securestring $Password -asplaintext -force)
Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/dev -Credentials $cred
 Add-PnPJavaScriptLink -Name "JSLoadAfterSP" -Url /sites/dev/Doc/testFolder/test.js -Sequence 9999 -Scope Site

download pnp powershell

Improve this answer
3
  • This is super helpful thank you! I am going to try this out right away! Commented Jun 16, 2020 at 13:48
  • to be clear, 'testfolder' in the if statement is the string in the url I am looking for and then link.href is just the link to the css file from SharePoint? @Amos_MSFT Commented Jun 16, 2020 at 16:40
  • 1
    Yes,the link is the css file from SharePoint,the 'testfolder' in if statement you need to change to the unique attributes of page url. Commented Jun 17, 2020 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.