Custom css is not working in sharepoint communcation site.

sowjanya venkatagiri

6y1.2k

Hi All,

I created custom.css and uploaded in site assets folder.

in visual studio code.

in FirstAppCustomizerApplicationCustomizer.ts

added css link as below

and in serve.json added page url.

and then i tested and i am getting error.

Please correct me where i am missing.

Thank you,

Sowjanya.

18 Replies

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

Vikas Jha6y ago
Accepted answer
HI Sorry for delayed reply.

You can create a new application customizer for custom css. Dont change any file just go to main file(.ts file) and modify the function with

<>ApplicationCustomizer
extends BaseApplicationCustomizer
private _css : string = "https://learnvj.sharepoint.com/sites/SiteWithSpfxExtension/Style%20Library/Custom.css";
@override
public onInit(): Promise<void> {
/"stylesheet" href="styles.css">
   let cssTag : HTMLLinkElement = document.createElement("link");
   cssTag.rel = "stylesheet";
   cssTag.type="text/css";
   cssTag.href = this._css;
   document.head.appendChild(cssTag);
   return Promise.resolve();
Once you done , you use gulp command to generate .sppkg file and add it to app catalog.

Then go to you site collection and add this app and you will see the effect of custom css.
Vikas Jha6y ago
Thank you sowjanya
for confirming. Please accept one of the reply as accepted solution.
Vikas Jha6y ago
Thank you sowjanya
for confirming. Please one of the reply as accepted solution.
sowjanya venkatagiri6y ago
Hi Vikas,
Thank you so much it worked .
Css is applying.

i tried below css which you gave me for hiding SharePoint.

div#O365_HeaderLeftRegion{

display: none !important;

}
div#O365_SuiteBranding_container {
display: none !important;
}

May i know which div for Site name to make it to center and logo to increase size.

May i know the div please .

Thank you so much for your help .

Thank you ,
Sowjanya.
Vikas Jha6y ago
Hey I m saying you should not making any changs to server.json .
Just make the necessary file change to main files and deploy and then add it to your site.

Steps to check if file is loading . After deployment open the dashboard and check network that your css file is loading or not.
If you see ur file name is red mean , its not loading. Please check and confirm
Vikas Jha6y ago
Hi,

Are you able to achieve the above requirement. If yes then you can accept the answer as solution or else let me know if you require more help.
Vikas Jha6y ago
Yes you can do that , there will be no change in code , except this line
private _css : string = "https://learnvj.sharepoint.com/sites/SiteWithSpfxExtension/Style%20Library/Custom.css";
Instead of style library it will be site asset.
sowjanya venkatagiri6y ago
Hi Vikas,

Thank you again for coming back to this issue.

can i uploas site assets instead of style library.

is there anything do i need to change in code

public onInit(): Promise<void> {
/"stylesheet" href="styles.css">
let cssTag : HTMLLinkElement = document.createElement("link");
cssTag.rel = "stylesheet";
cssTag.type="text/css";
cssTag.href = this._css;
document.head.appendChild(cssTag);
return Promise.resolve();


Thank you,
Sowjanya.
sowjanya venkatagiri6y ago
Hi Vikas,

Sure thank you.

Thank you,
Sowjanya.
Vikas Jha6y ago
I need to look into this error. Will let you know.
sowjanya venkatagiri6y ago
Hi Vikas,

i gave site asset url for css and ran gulp
i got below error.

Error loading debug script. Ensure the server is running and the "debugManifestsFile" parameter URL is correct.
Error: Script error for: https://localhost:4321/temp/manifests.js http://requirejs.org/docs/errors.html#scripterror

Can you please help me to move forward.

Thank you,
Sowjanya.
Vikas Jha6y ago
Yes Enable that , if it not working then try to run powershell to enable that.
You can use Site Asset library to store the custom css file and use it in application customizer.

Please let me know if you still facing issue with it.
sowjanya venkatagiri6y ago
Hi Vikas,
when i check in admin portal settings are
- allow users to run custom script.
Thank you,
Sowjanya.
Vikas Jha6y ago
Hi,

Microsoft changed the default settings for "Allow users to run custom script" to Prevent. This means that we can't upload files to the Style Library. To Do so You need to run power shell or make necessary setting change.
Please find the details in this url
http://blog.timwheeler.io/unable-to-upload-files-to-the-style-library-in-sharepoint-online/

Please let me know if it helps.
sowjanya venkatagiri6y ago
Hi Vikas,

when i try to upload css file in style library.

Its giving error like

Sorry, you don't have access.

I am admin.

i am able upload in site assets,

Thank you,

Sowjanya.
Vikas Jha6y ago
Hi sowjanya
Are you able to solve the issue with your application customizer?
Vikas Jha6y ago
For example It should be private _css : string = "https://learnvj.sharepoint.com/sites/SiteWithSpfxExtension/Style%20Library/Custom.css"; You can write it out this url or go to classic view and there you can copy it. Notes: If it helps, you can accept this as solutions.
Vikas Jha6y ago
Hey Hi, Please provide absolute url of the css file, what is you given there is copied url of the file. Its should /siteassets/custom.css It should work