how to apply custom css in sharepoint communication site

Hi sowjanya

Please have a look into this url , if it helps you to meet your business requirment.

https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/

Next what I have created is 1 simple application customizer . You can follow steps from this.

1. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

2. I have add 1 css file in one of the document library or you can use site Assets.

3. Next replace the code of yourSolutionApplicationCustomizer in your yourSolutionApplicationCustomizer.ts file within src folder.

export default class CssCustomizerApplicationCustomizer
extends BaseApplicationCustomizer {
private _css : string = "https://learnvj.sharepoint.com/sites/SiteWithSpfxExtension/Style%20Library/Custom.css";
@override
public onInit(): Promise<void> {
//
let cssTag : HTMLLinkElement = document.createElement("link");
cssTag.rel = "stylesheet";
cssTag.type="text/css";
cssTag.href = this._css;
document.head.appendChild(cssTag);
return Promise.resolve();
}
}

Then you can add all the required css code in your custom.css to meet your business requirment.
Please let me know in case of any queries.
Note :Please accept the reply as solution and next if you need any help just let me know.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vikas Jha6y ago
Accepted answer
Hi sowjanya
Please have a look into this url , if it helps you to meet your business requirment.
https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/

Next what I have created is 1 simple application customizer . You can follow steps from this.
1. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension
2. I have add 1 css file in one of the document library or you can use site Assets.
3. Next replace the code of yourSolutionApplicationCustomizer in your yourSolutionApplicationCustomizer.ts file within src folder.
export default class CssCustomizerApplicationCustomizer
  extends BaseApplicationCustomizer {
private _css : string = "https://learnvj.sharepoint.com/sites/SiteWithSpfxExtension/Style%20Library/Custom.css";
  @override
  public onInit(): Promise<void> {
//
    let cssTag : HTMLLinkElement = document.createElement("link");
    cssTag.rel = "stylesheet";
    cssTag.type="text/css";
    cssTag.href = this._css;
    document.head.appendChild(cssTag);
    return Promise.resolve();
  }
}
Then you can add all the required css code in your custom.css to meet your business requirment.
Please let me know in case of any queries.
Note :Please accept the reply as solution and next if you need any help just let me know.
+1
Vikas Jha6y ago
Please accept the reply and in case of any help required please post your comments
0
sowjanya venkatagiri6y ago
Hi Vikas,

Thank you so much for you help.

i will try and let you know if i am having any issues.

Thank you,
Sowjanya.
0