Microsoft 365 & Power Platform Training and Consulting

Contact

Customize styles/formatting of SharePoint list column header rows

—

1–2 minutes

Note: This post applies to on-premise/server lists or O365 lists set to “classic” view. This will not work on modern views.

A little style on column header rows goes a long way. For example, just a background color and font adjustment can take your list from:

Before:

headerwithoutstyle

to
After:

headerstyle

Here’s how you can apply your own styles to your list(s).

Create the style

We’re simply going to add a CSS file to your “Site Assets” folder (Settings –> Site Contents –> Site Assets). You can do this any of three different ways:

  • Download, then drag and drop this file into your Site Assets folder within your browser, or
  • Copy and paste the following script into a text file using notepad or a similar simple text editing program and save as “headers.css” (must have the .css extension in file name). Then drag and drop the file into Site Assets.
  • Create a new CSS file within SharePoint Designer and save it to Site Assets as headers.css.


<style>
/*Choose your background color*/
.ms-viewheadertr{
background:#00426A;
}
/*Choose font style*/
.ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink {
font-weight:bold;
color:white;
font-size:1.05em;
}
</style>

view raw

headers

hosted with ❤ by GitHub

Change the colors and font style as needed and save again.

Add the style to your list(s)

  1. Navigate to the list where you’re adding the style
  2. Edit page
    chrome_2018-07-20_09-22-11
  3. Add a Web Part
    chrome_2018-07-20_09-23-09
  4. Media and Content –> Content Editor –> Add
    chrome_2018-07-20_09-23-35
  5. Edit Web Part
    chrome_2018-07-20_09-23-54
  6. Type “/siteassets/header.css” in the link field
    chrome_2018-07-20_09-24-30
  7. Expand “Appearance” and set Chrome State to “Minimized”  and Chrome Type to “None” then click OK
    chrome_2018-07-20_09-24-48
  8. Stop editing the page
    chrome_2018-07-20_09-25-11

That’s it!

Want to take it a step further? Make your headers float/stick as you scroll!
2018-07-20_09-51-42.gif

  1. Here’s how to make sticky/floating headers
  2. Copy the script from this post and paste it at the top of the file you download in the sticky headers tutorial
  3. Search for “background-color: white;” and replace it with the same background color your used in your styling above (#00426A; in my example)
    floating modification
  4. Save your changes to the downloaded file and follow the rest of the steps in the other post. Use the content editor you’ve already added in this post, replacing the /SiteAssets/headers.css line (since we added the script to top of the stickyheaders script) with the /SiteAssets/stickyheaders.js script which includes both.

Discover more from Nate Chamberlain

Subscribe to get the latest posts sent to your email.

17 responses to “Customize styles/formatting of SharePoint list column header rows”

  1. Hide the Browse and Edit buttons and/or the Share, Follow, and Focus/Full-Screen buttons from a SharePoint page's ribbon menu | NateChamberlain.com

    […] you’re unsure how to add CSS to your page, this post details the steps with a different script. Just use the script above inside <style> tags […]

    Reply
  2. Alex Avatar
    Alex

    I have SP 2016. I have a list with 10 plus columns for some reason. The styling gets applied to some columns but not others. Any idea on why this is occuring ?

    Reply
    1. Nate Chamberlain Avatar
      Nate Chamberlain

      Yes, the classes .ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink may not be catching all of yours on the list. You could alter that part of the script to be more inclusive depending on your column types (use F12 to find these classes for each column). Bigger list of classes you may have columns under: .ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr

      Reply
      1. Julien Avatar
        Julien

        Hi,
        Is there a way to apply a 45° text rotation to the Sharepoint list headers using column formatting (i.e. using JSON and not CSS) ?

        Thank you

        Reply
  3. Amy Avatar
    Amy

    When I add the header.css to the Stickyheaders.js and place it in site assests then add content editor to my page pointing to this, it pasts the script in the content editors space. when I just use header.css or the js script it works. but cant have both sticky floating header that has background color? help

    Reply
  4. The ABCs of SharePoint: 26 ways SharePoint can enhance your digital workplace – SHAREPOINT LIBRARIAN

    […] is a must for many. On classic/on-premise sites, you can implement your own javascript and css. Check out this example of using javascript and jquery to create customized, floating headers for SharePoint […]

    Reply
  5. Lindsay Avatar
    Lindsay

    When I go to edit the list – after adding this formatting and sticky headers, it converts the font back to grey and small in edit mode. Is there a piece of the script I am missing where I can change that? Ive been reading through that and cant seem to find it.

    Reply
    1. Scott Ross Avatar
      Scott Ross

      I noticed this as well myself. I’m looking into this and trying to get exact code to adjust this. I noticed that it reverts the headers here to links. For example, the below code is one such example I found that controlled this and made them white. I’m hoping for our sake MS gave a second reference that doesn’t change links… I’ll update if I find something of more relevance as it also messes with the Left nav if you don’t have a theme set on it…

      a, .ms-link {
      color: white !important;

      }

      Reply
      1. Scott Ross Avatar
        Scott Ross

        Lindsay, here’s the reference to use in your CSS. Then you can add whatever changes you need or want accordingly.

        .ms-spGrid-HeaderContentStyle a {

        }

        Reply
        1. Antonio Sheeler Avatar
          Antonio Sheeler

          When I added the “headers.css” I does modify the background however the foreground font color and bold only works on the first column in my list. I am using SharePoint Online

          Reply
  6. Geir Avatar
    Geir

    Keep up the good work. I’ve been looking for this, but also need to add search/filter on columns. Is that possible out-of-the-box or we need to create a WebPart and Jquery?

    Reply
  7. Tania Avatar
    Tania

    Awesome! It worked! Now I can get to trying to float my headers.

    Reply
  8. Tania Avatar
    Tania

    I tried the column header background. It worked! But it also knocked out the List Settings toolbar. how do I get that back?

    Reply
    1. SharePoint Librarian Avatar
      SharePoint Librarian

      Drag the content editor beneath the list web part when in edit mode. Or drag the list above the content editor. If still having no luck, just click in white space on the list, like next to the list of views, and it should appear.

      Reply
  9. Jesus Avatar
    Jesus

    It os possible forma sharepoint online? Pues serves are from MS.thanks

    Reply
    1. SharePoint Librarian Avatar
      SharePoint Librarian

      It is possible for SharePoint Online (O365), and I did this example and screenshots in SharePoint Online (O365). You just have to make sure the list you’re adding it to is in classic view (list settings –> advanced settings –> Display this list using the new or classic experience? –> Classic Experience).

      Reply
  10. Adding sticky/floating headers to a SharePoint list – SharePoint Librarian

    […] Want for format the header row with colors and font styles? Here’s how. […]

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Nate Chamberlain

Subscribe now to keep reading and get access to the full archive.

Continue reading

Code of Conduct - Terms and Conditions - Privacy Policy