Apply in the below code to Script Editor web part or Content Editor Webpart in your list view sharepoint pages.
Add
Style Tag begin and end in the following code:
Method 1:
/* ---------- Table Rows ----------*/
/* Set background for every row */
.ms-listviewtable > tbody > tr {
background: white;
}
/* Set border for every row */
.ms-listviewtable > tbody > tr td{
border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
border-left: 1px solid #AFAFAF !important;
border-right: 1px solid #AFAFAF !important;
}
/* Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #E2E3E5;
}
/* ---------- Table Header Row ----------*/
/* Remove background set in SharePoint's general data table style */
.ms-listviewtable tr.ms-viewheadertr {
background: transparent;
}
/* Modify background color */
tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
tr.ms-viewheadertr > th.ms-vh, /* Text */
tr.ms-viewheadertr > th.ms-vh2,
tr.ms-viewheadertr > th /* Text */ {
background: #2E4C70;
}
/* Modify background color on hover */
tr.ms-viewheadertr > th.ms-vh:hover,
tr.ms-viewheadertr > th.ms-vh2:hover,
tr.ms-viewheadertr > th {
background-color: #273C51;
border-color: #273C51;
}
/* Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
color: white;
}
/* Modify font color on hover */
.ms-viewheadertr a:hover,
.ms-viewheadertr div:hover {
color: white;
}
tr.ms-viewheadertr > th.ms-vh-icon:last-child {
display:none;
}
Method 2:
/* Modify font color */
.ms-viewheadertr a {
color:White;
}
.ms-viewheadertr div {
color: Blue;
}
/* Modify font color on hover */
.ms-viewheadertr a:hover{
color: White;
}
.ms-viewheadertr div:hover {
color: #F36F21;
}
tr.ms-viewheadertr > th /* Text */ {
background: #034EA2;
}
tr.ms-viewheadertr > th {
background-color: #034EA2;
border-color: #034EA2;
}
li[text="Alert me"] {display:none;}
Screens:
