SOLVED

CSS Overview

Occasional Contributor

Is there a overview of SharePoint online css classes?

 

Thanks for your help.

Stefan

7 Replies
best response confirmed by Stefan Kießig (Occasional Contributor)
Solution
Heather Solomon http://www.heathersolomon.com/ diligently updates a list of SharePoint CSS styles. But in the world of SharePoint Online, Microsoft doesn't seem to be committing to any existing styles. Instead, you should focus on Office UI Fabric's colours and use that CSS. Not only does it let you have similar colours to Office 365, it also works really well within different Office Addins and across different devices. It is similar in concept to Bootstrap. http://dev.office.com/fabric/styles Both resources are good for CSS.
This is something I'm actively looking at before my organisation migrates to O365.
Is there a best practice route for adding office fabric css to site collections or the whole instance?

Hi Peter,

A great way of adding custom CSS is the Alternative CSS URL for your site collection. You can find this under the Site Master Page Settings page for your site collection. This link is under Look & Feel on the site settings page. This will then be included for all page of your site collection. 

Screen Shot 2016-07-17 at 11.18.00 AM.png

 

Hope that helps,

-Jared

This works only when the publishing featureas are aktivate.

Hi
how I can check on the CSS performance and compatible wit SEO.
I am working on https://www.gonsure.com and I need to test and enhance it.

@Stefan Kießig @Shadidasan @Peter Gibbs 

 

Check this link which lists the SharePoint online CSS classes available in modern experience: SharePoint Online CSS Classes - by @Denis Molodtsov 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@Stefan Kießig @Shadidasan @Peter Gibbs 

You can also find few class names on this site: PnP List-Formatting 

ganeshsanap_0-1666333193870.png


Please consider giving a Like if my post helped you in any way.