Style SharePoint 2016 List View Web Part with Custom CSS

Requirement: Add a custom style to SharePoint 2016’s standard list view web part to make it look like a dashboard!

By default, the SharePoint list view web part looks dull, isn’t it?

sharepoint 2013 list view web part css

So, let us add some custom CSS to the SharePoint 2016 list view to make it look like a dashboard! How to add CSS to listview? Simple,

  1. Click on Site Settings gear >> Edit Page
  2. Insert web part >> Choose “Script Editor” under “Media and Content”
  3. Place the below CSS code in it. Save and close!

CSS to Brand SharePoint List view:

<style type="text/css">

/* List View Header */
.ms-listviewtable > thead > tr > th {
 background-color: #5B9BD5;

/* List view Header Text color*/
.ms-vh-div,  .ms-headerSortTitleLink {
color:white!important; font-weight: bold;

/* background color for alternate rows */
.ms-listviewtable > tbody > {
background: #DDEBF7


Here is the output of the branded List view web part:

sharepoint 2013 add css to listview

The same CSS works for SharePoint 2013 and SharePoint Online as well.

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

6 thoughts on “Style SharePoint 2016 List View Web Part with Custom CSS

  • Has anyone figured this out yet? I’m facing the same issue as @rezmes, “Item” and “List” will only show at the ribbon if I have at least one item selected in the list, otherwise it only shows “Browse” in the ribbon.

  • Thanks for putting this online, very helpful! Is there any code that allows you to keep this formatting even in Quick Edit mode? It looks like the formatting goes away when I click on “Edit this List”.

  • It works great in Sharepoint 2013.

  • In SharePoint 2016 it will cause disappear the “Item” and “List” tabs left over the page.


Leave a Reply

Your email address will not be published. Required fields are marked *