Can we have a customized Font Size/Family/Color and customized button colors inside online SP

Steel Contributor

We have the following built-in modern UI:-

 

current.png

 

Where we are trying to get the below UI, which have the following changes; Button color is different, Font Family is different & Font size/color is different , as follow:-

 

new.png

so is this something we can achieve in SharePoint online modern UI? and how?

3 Replies

@john john the button color is determined by the theme you have chosen in the "Change the look" menu setting.

 

You can set any column to have a different  background, color, font-family, font-size etc by using JSON list column formatting. You select format this column then select advanced mode and add in the appropriate css styles. So in the example image below the expiry date column has been formatted:

cssStyles.png

 

with the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "background-color": "=if([$Status] == 'Failed', '#7d0000', ((if(@currentField <= @now, 'red', if((@currentField >= @now && @currentField <= @now + 7776000000),'orange','green')))",
    "color": "white",
    "font-family": "Rockwell",
    "font-size": "22px"
  }
}


You can see examples of JSON list and view column formatting at https://github.com/pnp/List-Formatting

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

@RobElliott  but can i change the grid header font size and color using the JSON ? or it will only change the grid content font size and color?

Also i were trying to find a solution to change the whole font size,color, and size for the whole site and not just inside each list view...

 

Second point, for the button we also need to change the shape of the button to be bigger and have rounded edges as shown in the screen i provided..

@john john you can't do either of those out-of-the box but I believe you can with SPFx, although as we are not allowed it at my company I have no experience of it.

 

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)