Change default list view style using CSS in SharePoint Online/2016/2013

This SharePoint tutorial, we will discuss how to change default list view style using CSS in SharePoint Online/2013/2016. The list view style will work only in classic SharePoint sites not in the modern SharePoint sites.

In this particular example we will see how we can add css to change the default list view header to a different custom header in SharePoint.

SharePoint 2013 change list view style using CSS

We can write the css code inside a script editor web part in the list view page in SharePoint.

Open the SharePoint site and go to the list view page. Then edit the page and add a script editor web part in the list view page. Then paste the below code in the script editor web part.

<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 > tr.ms-alternating {  
background: #e1eaf4}  
}  
</style> 

Once you Save the code and refresh the page, now you can see the default list view will have a custom header which was by just using the css code.

sharepoint 2013 change list view style
sharepoint 2013 change list view style

You may like following SharePoint list view tutorials:

Hope this SharePoint tutorial helps to implement SharePoint 2013 change list view style. We saw how we can do styling the default list view header to a different header in SharePoint Online/2013/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • >