How to Apply Custom CSS in SharePoint sites ?

Question

I am looking to implement SharePoint teams and communication sites . As part of this implementation, I am trying to use predefined Microsoft templates along with some level of customization using css.

As part of custom css implementation, I created a React JS app as per the Microsoft guidelines and added this as an app to our SharePoint site.

I had the following questions regarding custom css:

a) Custom css is not getting applied for guest users of SharePoint site. How to make custom css work for guest users.

b) Custom css is not getting applied consistently on all SharePoint templates. For example, the custom css applied successfully on a department team site template, but it did not get applied on project management team site template.

c) While developing custom css, I am identifying the SharePoint provided css class names and trying to override/extend those classes to incorporate required look and feel.

Any help regarding this will be greatly appreciated. Thank you in advance!

Answer 1

Hi @Atul Upadhye ,

Thank you for posting in this community.

a) For guest users, custom CSS may not be applied consistently due to permission settings or restrictions in SharePoint. Ensure that the guest users have the necessary permissions to access the custom CSS files and that the CSS is included in a way that is accessible to them.

b) The inconsistency in applying custom CSS across different SharePoint templates could be due to the varying structures and styles of those templates. Each template may have its own set of CSS classes and styles, which can affect how your custom CSS interacts with them. It's important to test and adjust your CSS for each specific template to ensure compatibility.

c) When overriding or extending SharePoint's provided CSS class names, be cautious as these class names may change in future updates. It's advisable to avoid relying too heavily on specific class names and instead use more general selectors or custom classes to minimize the risk of your styles breaking with updates.

References:

• Use CSS to brand SharePoint pages
• Recommendations for working with CSS in SharePoint Framework solutions
• SharePoint site branding and page customization solutions

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.