Unable to permanently change the font size and weight inside a sharepoint modern page (the class name keeps changinag)
-
21-02-2021 - |
Pergunta
I have added the list modern web part inside a sharepoint modern page >> and i need to change the font size and weight >> so using the F12 dev tools i inspected the related class (.root-135) as follow:-
and i added this style using the modern script web part :-
.root-135 {
font-size: 15px;
font-weight: bold;
}
and things worked well...but after couple of minutes the bold and size increase effect were removed, i recheck the class name and i found that it was changed from .root-135
to .root-152
.. so my questions are:-
How i can permanently change the font size and weight inside a sharepoint modern page?
if using custom script using the modern script web part will not work, then what are the other approaches i can follow to increase the font size + font weight of my modern page?
Solução
You could use the column formatting to do that.
In your list, select the column you want to change > column settings > format this column. then advanced mode and put the JSON below - preview and save
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "15px",
"font-weight":"bold"
},
"txtContent": "@currentField"
}
Since you are formatting a Person or Group, use the following
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "20px",
"font-weight":"bold"
},
"txtContent": "@currentField.title"
}
The difference is in the @currentField.title
Outras dicas
If you have a custom webpart or are using the Modern SharePoint Script Editor on the page, simply make this call in JS:
<script>
let rootCss = document.querySelector([class~=‘root’]);
rootCss.setAttribute(‘style’, ‘font-size:15px;font-weight:bold’);
</script>