SharePoint list view styles example

by
Org Chart

In this SharePoint tutorial, we will discuss a sharepoint list view styles and how to change default list view style using CSS in SharePoint Online/2013/2016/2019. 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 SharePoint list view header to a different custom header in SharePoint.

SharePoint online list view styles 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.

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

<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 online list view styles
sharepoint online list view styles

You may like following SharePoint list view tutorials:

I 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/2019. An example of sharepoint online list view styles.

    • >