question

johnjohn-0472 avatar image
0 Votes"
johnjohn-0472 asked YiLu-MSFT commented

Can we change the Font family, Font Color & Font size for the list view grid data and column headers

By default our list view grid will be shown using this built-in layout:-

143480-listviews1.png


but we are trying to achieve this layout, where the Grid data and the Grid's Columns' headers will have different font size, font color & font family, as follow:-

143554-4d.png

so is this something we can achieve using JSON formatting?

Thanks



office-sharepoint-onlinesharepoint-dev
listviews1.png (15.3 KiB)
4d.png (35.1 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I am currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.

0 Votes 0 ·

@ YiLu-MSFT thanks will be waiting your update

0 Votes 0 ·

1 Answer

YiLu-MSFT avatar image
1 Vote"
YiLu-MSFT answered YiLu-MSFT commented

Hi @johnjohn-0472
You could format the column to change the font family, font size and font color with this code:

 {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
 "elmType": "div",
 "txtContent": "@currentField",
 "attributes":{
 "class":"sp-field-customFormatter"
 },
 "style": {
 "font-size": "2.0em",
 "color": "red",
 "font-family":"cursive"
 }
 }

As a result, the font will be changed:

144181-image.png


As to the column header, you need to inject CSS such as:
.cellName-xxx{ font-family: xxx; font-size: xxx; color: xxx;}

You could refer to this for more information:
https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.


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.





image.png (15.1 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@YiLu-MSFT but for the column header customization, you mentioned that i need to inject CSS .. but per my knowledge injecting CSS is not supported by Microsoft am i correct?

Second question, for the JSON you showed , where i need to add it? is it inside the List View >> format this column section ?

Thanks

0 Votes 0 ·

CSS is supported by Microsoft.

You could use the JSON code by column settings> format this column.

0 Votes 0 ·

Hi @johnjohn-0472
Would you please provide some update of this issue? Please feel free to reply.

0 Votes 0 ·