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.

You may like following SharePoint list view tutorials:

• SharePoint 2013 jslink list view examples: Add header and footer to list view web part using JSLink in SharePoint Online/2013/2016
• Customize list view using jslink in SharePoint 2013/2016/Online
• SharePoint 2016 List View Auto Indexing Automatic Index Management
• Change width of list view column in SharePoint 2013 using SharePoint designer 2013
• Show paging at top in list view web part SharePoint 2013 Online using jQuery
• Steps to freeze header row for title in SharePoint 2013 List view or document Library on scrolling using jQuery
• the specified file or folder name is too long sharepoint 2013/2016

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.