Customize styles/formatting of SharePoint list column header rows

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:





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.

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
  3. Add a Web Part
  4. Media and Content –> Content Editor –> Add
  5. Edit Web Part
  6. Type “/siteassets/header.css” in the link field
  7. Expand “Appearance” and set Chrome State to “Minimized”  and Chrome Type to “None” then click OK
  8. Stop editing the page

That’s it!

Want to take it a step further? Make your headers float/stick as you scroll!

  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.

Written by SharePoint Librarian

I'm a SharePoint Business Analyst and Jayhawk from the Kansas City Area.


    1. 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).

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

    1. 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.

  2. 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?

  3. 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.

Leave a Reply

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