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

by
SharePoint Form Designer

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.

Complete SharePoint Training Course Just for $199 (Just for Today)

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.

    • >