An SPFx extension that injects CSS on every page
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Initial version May 8, 2018
assets Uploaded solution package Oct 29, 2018
config Upgraded to SPFx 1.6 Oct 29, 2018
sharepoint/assets Upgraded to SPFx 1.6 Oct 29, 2018
src Upgraded to SPFx 1.6 Oct 29, 2018
.editorconfig Initial version May 8, 2018
.gitignore Initial version May 8, 2018
.yo-rc.json Upgraded to SPFx 1.6 Oct 29, 2018
LICENSE Initial commit May 7, 2018
README.md Upgraded to SPFx 1.6 Oct 29, 2018
gulpfile.js Initial version May 8, 2018
package-lock.json Upgraded to SPFx 1.6 Oct 29, 2018
package.json Upgraded to SPFx 1.6 Oct 29, 2018
report.md Upgraded to SPFx 1.6 Oct 29, 2018
tsconfig.json Upgraded to SPFx 1.6 Oct 29, 2018
tslint.json Upgraded to SPFx 1.6 Oct 29, 2018

README.md

Spfx Applications Customiser CSS Injection

Summary

This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.

Sample super ugly CSS to illustrate custom CSS injection

Note: This code is provided as a sample only. Keep in mind that Microsoft may change page elements and styles at any time, rendering your custom CSS useless. It is preferrable to use well-known HTML element placeholders.

When you need to make minor cosmetic changes to modern pages (e.g.: match your corporate branding guidelines) and cannot use placeholders,you can create a custom CSS and inject on every modern page.

In this example, we deploy the CSS in a shared location; this allows us to change the CSS file at any time without re-deploying or re-configuring the application customizer.

You can deploy the application customizer with different settings to point to different CSS files.

Used SharePoint Framework Version

SPFx v1.6

Applies to

Solution

Solution Author(s)
react-application-injectcss Hugo Bernier (Tahoe Ninjas, @bernierh)

Version history

Version Date Comments
1.0.0 07 May, 2018 Initial release
1.1.0 18 October, 2018 Updated to SPFx 1.6

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Minimal Path to Awesome

  • clone repo
  • create a custom CSS file that meets your needs. For example, this CSS will make the site logos round and will add an ugly red colour at the top of every page.
.ms-compositeHeader {
    background-color: red;
}

.ms-siteLogoContainerOuter {
    border-radius: 50%;
    border-width: 3px;
}

.ms-siteLogo-actual {
    border-radius: 50%;
}
  • Upload the CSS file to a shared location on your SharePoint tenant. For example, in the Styles Library of the root site collection.

  • Get the URL to your custom CSS. For example: /Style%20Library/custom.css

  • Update serve.json pointing to your site collection home page change the cssurl property with the URL to your custom CSS.

  • Run gulp serve

Deployment to Production

  • Locate the elements.xml file, in the sharepoint > assets folder
  • Change the ClientSideComponentProperties to point to your custom CSS URL.
  • Run gulp bundle --ship
  • Run gulp package-solution --ship
  • Upload the react-application-injectcss.sppkg from the sharepoint folder to your App catalog.
  • When prompted to deploy to all sites, choose the option that suits your needs.

Features

Sample SharePoint Framework Application Customiser which injects a custom CSS in the HTML header.

This sample illustrates the following concepts on top of the SharePoint Framework:

  • HTML manipulation