List styles SharePoint

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.

/* 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} }

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

You may like following SharePoint list view tutorials:

• SharePoint modern list view customization example
• How to Create a Tiles View using SharePoint Online modern list view customization
• Freeze Header Row in List View or Library on Scrolling using jQuery in SharePoint
• SharePoint 2013/2016/Online: List View Item filter based on Query String
• How to Enable view entries in SharePoint list multiple lines of text columns
• SharePoint custom list example

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.