-1

I've built and applied this extension react-application-injectcss(https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-application-injectcss) but it applies on all sites in my tenancy. Can I hardcode site name of a particular site where I need to apply custom css/js

Where do I change in code (.ts file)?

desertnaut
  • 57,590
  • 26
  • 140
  • 166
akg1421
  • 51
  • 12

2 Answers2

1

You could use this extension to inject the js file to the page and judge the url of the current page in the js file, and then inject the CSS file.

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);
    }

extension inject js file

Amos
  • 2,030
  • 1
  • 5
  • 9
1

I would say that ideologically, injecting CSS to customize things you don't own is a bit hacky and potentially harmful way. To customize site appearance, you can use the site template. For example, to "get rid of the sidebar" you could create "communication" site (that does not have the sidebar) instead of "team" site (that does). As simple as that.

Nikolay
  • 10,752
  • 2
  • 23
  • 51
  • It is at root site where I need to hide side nav. There are multiple subsites and lists with workflows running on them in operation. How can I just create "communication" site and start over? – akg1421 Mar 16 '21 at 07:26
  • 1
    in the admin, New -> Site -> and select "communication" instead of "team". and then replace your root site with the new one. https://learn.microsoft.com/en-us/sharepoint/modern-root-site – Nikolay Mar 16 '21 at 12:07