Custom css is not working in sharepoint communcation site.

Question

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.

Vikas Jha · 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.

sowjanya venkatagiri · Answer

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 Jha · Answer

Thank you sowjanya for confirming. Please accept one of the reply as accepted solution.

Vikas Jha · Answer

Thank you sowjanya for confirming. Please one of the reply as accepted solution.

sowjanya venkatagiri · Answer

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 Jha · Answer

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 Jha · Answer

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 Jha · Answer

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 venkatagiri · Answer

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 venkatagiri · Answer

Hi Vikas, Sure thank you. Thank you, Sowjanya.

Vikas Jha · Answer

I need to look into this error. Will let you know.

sowjanya venkatagiri · Answer

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 Jha · Answer

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 venkatagiri · Answer

Hi Vikas, when i check in admin portal settings are allow users to run custom script. Thank you, Sowjanya.

Vikas Jha · Answer

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.

Vikas Jha · Answer

Hi sowjanya Are you able to solve the issue with your application customizer?

Vikas Jha · Answer

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 Jha · Answer

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