Forum Discussion
Custom CSS on a Library page
I've been using row formatting to provide custom styling to a library https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-list-formatting#apply-conditional-classes-on-rows. I've been referring to the various standard classes, such as "sp-field-severity--severeWarning" mentioned in the example.
Now I'd like to go a little further, and add some custom classes of my own, mainly to tailor the hover behaviour more closely to what I want.
I would expect this to be a simple case of dropping in some simple CSS code into a folder somewhere. But unless I'm missing something, it seems to be incredibly complicated to achieve... https://www.sharepointdiary.com/2020/11/add-custom-css-to-sharepoint-online-modern-page.html.
Is it really that difficult? Surely it really should be a case of specifying some CSS definition like the following??
.my-hover:hover {
background-color: green;
}
7 Replies
drmrbrewer with modern SharePoint Online Microsoft have deliberately removed the ability to use custom css out of the box, with the exception of JSON formatting. So you can't just define the css in the way you showed in you post. Have a look at the many JSON examples on github here, and here, look at the code and adjust to your needs. I guess that's how most of us got started with JSON column and view formatting.
Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP UK (and classic 1967 Morris Traveller driver)Rob_Elliott thanks for the response. I'd already seen those JSON examples, but don't see quite how they would apply to what I'm trying to achieve. I want a simple way just to change the background colour of the entire row, both normal and on hover. For this it seems that I need to format the View, and use the `additionalRowClass` to specify the behaviour. But that allows me only to state one or more predefined CSS class names.
If I want to branch out beyond what I can get from the predefined classes, it seems that my only choice for row formatting is to use `rowFormatter`. But in that case, my understanding is that I'm now having to set out the layout and formatting of the entire row, i.e. all columns?
I really don't want to go that far... I'm happy with the background colours I can get from the predefined classes, and happy with the layout of the row generally... all I want to do now is to specify that I want e.g. just the opacity of the colour to change on hover... i.e. not to switch colour completely to a grey colour as it does at present, but to keep the same colour for hover but just change the opacity or lightness or something along those lines.
To me, that would most easily be achieved by being allowed to define our own CSS (in a simple way)... how can I achieve what I want via other JSON customisation, e.g. `rowFormatter`, without having to design the entire row (and update it every time I add or remove a column etc)?
Unfortunately, you cannot add custom CSS classes using the SharePoint JSON formatting capabilities.
You will have to develop a simple SPFx application customizer and inject custom CSS classes using it. You can add all the custom CSS classes you need in single SPFx solution and deploy it at either site level or tenant level (if you need those classes on all SharePoint sites).
SPFx application customizer loads automatically on all modern experience pages in SharePoint.
Refer this thread for more information: How can I include the same JS and CSS files on multiple SharePoint Modern Page?
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.
