Home

Increase Font Size of List Web Part

%3CLINGO-SUB%20id%3D%22lingo-sub-771443%22%20slang%3D%22en-US%22%3EIncrease%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771443%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20looking%20for%20code%20I%20can%20input%20to%20a%20script%20or%20content%20editor%20to%20increase%20the%20size%20of%20the%20font%20in%20a%20List%20web%20part%20since%20it%20is%20much%20smaller%20than%20all%20the%20other%20text%20on%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDoes%20anyone%20know%20of%20a%20code%20I%20could%20use%20to%20do%20this%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-771443%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eweb%20part%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771742%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771742%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F370009%22%20target%3D%22_blank%22%3E%40TheWhiteGoose99%3C%2FA%3E%26nbsp%3BWhat%20version%20of%20SharePoint%20are%20you%20using%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771755%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771755%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39836%22%20target%3D%22_blank%22%3E%40Beau%20Cameron%3C%2FA%3E%26nbsp%3Bmost%20recent%20version%20-%20sorry%2C%20I've%20lost%20track%20of%20which%20that%20is%20-%20but%20it%20is%20utilizing%20wiki%20pages%2C%20not%20modern%20pages%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771774%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771774%22%20slang%3D%22en-US%22%3E%3CP%3EI%20suppose%20it's%20possible%20in%20the%20classic%20pages%2C%20but%20I%20don't%20recommend%20doing%20it...%20if%20it's%20an%20issue%20you'd%20like%20to%20fix%20on%20all%20classic%20pages%2C%20I%20suggest%20injecting%20the%20CSS%20using%20a%20user%20custom%20action%20instead%20of%20using%20Content%20Editor%20Web%20Parts.%20%3CBR%20%2F%3E%3CBR%20%2F%3EHowever%2C%20I%20personally%20feel%20it's%20technical%20debt%20that%20isn't%20providing%20much%20value%20in%20return.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771846%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771846%22%20slang%3D%22en-US%22%3EBy%20most%20recent%20version%20you%20mean%20SharePoint%20Online%3F%20Are%20you%20talking%20about%20the%20new%20list%20WebPart%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-772028%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-772028%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3Byes%2C%20SharePoint%20online.%26nbsp%3B%20And%20I%20believe%20so%2C%20the%20new%20List%20webpart.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-772292%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-772292%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F370009%22%20target%3D%22_blank%22%3E%40TheWhiteGoose99%3C%2FA%3E%26nbsp%3Bif%20you're%20using%20SharePoint%20Online%2C%20navigate%20to%20the%20list%20page%20and%20then%20select%20a%20column%20you%20want%20to%20change%20the%20font%20size%20to%20Column%20-%26gt%3B%20Column%20Settings%20-%26gt%3B%20Format%20This%20Column%2C%20a%20window%20appears%20on%20the%20right%2C%20Click%20Advanced%20Mode%2C%20and%20a%20text%20box%20appears%20for%20you%20to%20enter%20JSON%20code%20to%20manipulate%20the%20HTML.%20Copy%20and%20paste%20the%20Code%20snippet%20below%20into%20that%20JSON%20text%20box.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22debugMode%22%3A%20true%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22font-size%22%3A%20%2218pt%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20change%20the%20value%20%2218pt%22%20to%20whatever%20you%20want.%20The%20formatting%20settings%20will%20carry%20over%20to%20the%20Web%20part.%20Here's%20a%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Elink%3C%2FA%3Eto%20more%20JSON%20formatting%20if%20you're%20interested.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEdit%3A%20I%20realize%20that%20you%20said%20you%20were%20utilizing%20wiki%20pages%3F%20This%20method%20will%20work%20with%20Modern%20list%20pages.%20(Tested)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-773903%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773903%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F381656%22%20target%3D%22_blank%22%3E%40Tyler_Tucker%3C%2FA%3E%26nbsp%3Bhey%2C%20this%20does%20increase%20the%20font%20for%20the%20actual%20list%20-%20but%20it%20doesn't%20seem%20to%20change%20the%20List%20webpart%20font%20size%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
TheWhiteGoose99
Occasional Contributor

I am looking for code I can input to a script or content editor to increase the size of the font in a List web part since it is much smaller than all the other text on the page.

 

Does anyone know of a code I could use to do this?

7 Replies

@TheWhiteGoose99 What version of SharePoint are you using?

@Beau Cameron most recent version - sorry, I've lost track of which that is - but it is utilizing wiki pages, not modern pages

I suppose it's possible in the classic pages, but I don't recommend doing it... if it's an issue you'd like to fix on all classic pages, I suggest injecting the CSS using a user custom action instead of using Content Editor Web Parts.

However, I personally feel it's technical debt that isn't providing much value in return.




By most recent version you mean SharePoint Online? Are you talking about the new list WebPart?

@Juan Carlos González Martín yes, SharePoint online.  And I believe so, the new List webpart.

@TheWhiteGoose99 if you're using SharePoint Online, navigate to the list page and then select a column you want to change the font size to Column -> Column Settings -> Format This Column, a window appears on the right, Click Advanced Mode, and a text box appears for you to enter JSON code to manipulate the HTML. Copy and paste the Code snippet below into that JSON text box.

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "@currentField",
"style": {
"font-size": "18pt"
}
}

 

You can change the value "18pt" to whatever you want. The formatting settings will carry over to the Web part. Here's a link to more JSON formatting if you're interested. 

 

Edit: I realize that you said you were utilizing wiki pages? This method will work with Modern list pages. (Tested)

@Tyler_Tucker hey, this does increase the font for the actual list - but it doesn't seem to change the List webpart font size?

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
46 Replies
Extentions Synchronization
Deleted in Discussions on
3 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
flashing a white screen while open new tab
Deleted in Discussions on
14 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
30 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
13 Replies