Skip to content

Latest commit

 

History

History
104 lines (64 loc) · 4.23 KB

README.md

File metadata and controls

104 lines (64 loc) · 4.23 KB
Raw

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.

Please refrain from making drastic changes that may negatively impact your users' experience. If you experience issues with modern pages, please try disabling the extension before calling Microsoft Support to ensure that the issue isn't caused by your custom CSS.

Used SharePoint Framework Version

SPFx v1.9.1

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
1.2.0 28 March, 2018 Updated to SPFx 1.8
1.3.0 4 Sept, 2019 Updated to SPFx 1.9.1

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

Prepare the assets

  1. create a custom CSS file that meets your needs. For example, this CSS will change the feedback button's background color to orange.
.sitePage-uservoice-button {
  background-color: orange;
 }
  1. Upload the CSS file as custom.css to your Styles Library of the root site collection (i.e.: https://<yourtenant>.sharepoint.com/Style%20Library/Forms/AllItems.aspx).
  2. Navigate to your site. Your custom CSS should be applied.

For example, the CSS provided above will make the feedback button appear as follows: Orange Feedback

Build the solution

  1. clone repo
  2. Ryn npm install gulp bundle --ship gulp package-solution --ship

Manual deployment

  1. Upload the react-application-injectcss.sppkg from the sharepoint folder to your App catalog.
  2. When prompted to deploy to all sites, choose the option that suits your needs.

Changing the CSS location

To simplify deployment, the extension looks for a custom.css in your tenant's root Style Library. If you wish to use a different CSS name and location, use one of the following approaches:

In the solution

This approach will change the default css location in the solution so that it will automatically load your custom CSS when the extension is deployed.

Note that if you intend to deploy this extension tenant-wide, your custom CSS URL should be an absolute URL or a server-relative URL.

  1. Locate the elements.xml file, in the sharepoint > assets folder
  2. Change the ClientSideComponentProperties to point to your custom CSS URL.
  3. Run gulp bundle --ship
  4. Run gulp package-solution --ship
  5. Upload the react-application-injectcss.sppkg from the sharepoint folder to your App catalog.
  6. 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