Do you customize group header styling in lists?

Last updated by Tiago Araújo [SSW] almost 2 years ago.See history

By default, the group header of a list shows bigger font size only on modern UI, this is fine for one level group. However, if you have two level groups, it could be better to show different header styles between level one and level two group headers.

To implement this, you will need to inject a custom style to first level group header. e.g.

.ms-GroupedList-group > .ms-GroupHeader .ms-GroupHeader-title {

If you want to make this style available in a "site collection" scope (aka apply to all lists and libraries in a site collection), use a "SharePoint Extension" is not a bad option. Read more details at Deploy your extension to SharePoint (Hello World part 3).

Once deployed, you should be able to see a header style like the below:

level one gorup header bold
Figure: Level one group header is bold

We open source. Powered by GitHub