You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+72-29Lines changed: 72 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,24 @@
1
-
# Spfx Applications Customiser CSS Injection
1
+
# SPFx Applications Customiser CSS Injection
2
2
3
3
## Summary
4
+
4
5
This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.
5
6
6
7
7
8
8
-
__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.
9
+
> **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.
9
10
10
11
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.
11
12
12
13
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.
13
14
14
15
You can deploy the application customizer with different settings to point to different CSS files.
15
16
17
+
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.
* 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.
50
+
### Prepare the assets
49
51
52
+
1. create a custom CSS file that meets your needs. For example, this CSS will change the feedback button's background color to orange.
53
+
54
+
```CSS
55
+
.sitePage-uservoice-button {
56
+
background-color: orange;
57
+
}
50
58
```
51
-
.ms-compositeHeader {
52
-
background-color: red;
53
-
}
54
-
55
-
.ms-siteLogoContainerOuter {
56
-
border-radius: 50%;
57
-
border-width: 3px;
58
-
}
59
-
60
-
.ms-siteLogo-actual {
61
-
border-radius: 50%;
62
-
}
63
-
```
64
-
* Upload the CSS file to a shared location on your SharePoint tenant. For example, in the `Styles Library` of the root site collection.
65
-
* Get the URL to your custom CSS. For example: `/Style%20Library/custom.css`
66
59
67
-
* Update _serve.json_ pointing to your site collection home page change the `cssurl` property with the URL to your custom CSS.
68
-
* Run _gulp serve_
60
+
2. 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`).
61
+
3. Navigate to your site. Your custom CSS should be applied.
62
+
63
+
For example, the CSS provided above will make the feedback button appear as follows:
1. Upload the `react-application-injectcss.sppkg` from the `sharepoint` folder to your App catalog.
75
+
2. When prompted to deploy to all sites, choose the option that suits your needs.
76
+
77
+
### Automated deployment
78
+
79
+
1. If you have not done so already, install the [PnP PowerShell Cmdlets](https://aka.ms/sppnp-powershell)
80
+
2. Edit the `DeployApplicationCustomizer.ps1` file and change the `$tenantUrl` variable to point to your tenant.
81
+
3. From a PowerShell console, run the `DeployApplicationCustomizer.ps1` script to automatically deploy to all sites.
82
+
4. You will be prompted to enter your credentials.
83
+
5. After providing your credentials, the extension will be deployed
84
+
85
+
## Changing the CSS location
86
+
87
+
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:
88
+
89
+
### In the solution
90
+
91
+
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.
92
+
93
+
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.
94
+
95
+
1. Locate the `elements.xml` file, in the `sharepoint` > `assets` folder
96
+
2. Change the `ClientSideComponentProperties` to point to your custom CSS URL.
97
+
3. Run `gulp bundle --ship`
98
+
4. Run `gulp package-solution --ship`
99
+
5. Upload the `react-application-injectcss.sppkg` from the `sharepoint` folder to your App catalog.
100
+
6. When prompted to deploy to all sites, choose the option that suits your needs.
101
+
102
+
### Using automated deployment
103
+
104
+
This approach allows you to override the CSS location by configuring the extension properties as the extension is activated.
105
+
106
+
1. Edit the `EnableApplicationCustomizer.ps1` file and change the `$tenantUrl` variable to point to your tenant.
107
+
2. In the same file, change the `$customCSSUrl` variable to point to your custom CSS URL.
108
+
3. From a PowerShell console, run the `EnableApplicationCustomizer.ps1` script to automatically deploy to all sites.
109
+
4. You will be prompted to enter your credentials.
110
+
5. After providing your credentials, the extension will be deployed using your custom CSS URL.
111
+
112
+
## Disabling the extension
69
113
70
-
## Deployment to Production
114
+
1. Edit the `DisableApplicationCustomizer.ps1` file and change the `$tenantUrl` variable to point to your tenant.
115
+
2. From a PowerShell console, run the `DisableApplicationCustomizer.ps1` script to automatically deploy to all sites.
116
+
3. You will be prompted to enter your credentials.
117
+
4. If prompted to remove the application, choose Yes.
118
+
5. The extension will be removed.
71
119
72
-
* Locate the `elements.xml` file, in the `sharepoint` > `assets` folder
73
-
* Change the `ClientSideComponentProperties` to point to your custom CSS URL.
74
-
* Run _gulp bundle --ship_
75
-
* Run _gulp package-solution --ship_
76
-
* Upload the `react-application-injectcss.sppkg` from the `sharepoint` folder to your App catalog.
77
-
* When prompted to deploy to all sites, choose the option that suits your needs.
120
+
If you wish to do so, you can remove the solution package from your tenant's app catalog after the extension has been de-activated.
0 commit comments