CSS Challenge Response: Simple styles for SharePoint list

Please find the below links and code to change the  styles in SharePoint list

https://blog.sharepointexperience.com/2012/05/16/simple-styles-sharepoint-list/

---------- Table Rows ----------*/
    ms-vh-div,ms-vh2-nofilter,ms-vh-div{
        background: #2E4C70;
    }
/* 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 */
    }

 Set background for every alternating row */
    .ms-listviewtable > tbody > tr.ms-alternating {
        background: #E2E3E5;
    } Table Header Row 
 Remove background set in SharePoints general data table style */
    .ms-listviewtable tr.ms-viewheadertr {
        background: transparent;
         width:100%;
    }

.ms-viewheadertr,
    .ms-listviewtable {

width:100%;
}tr.ms-viewheadertr > th.ms-vh2-nograd {   color:white;}

 Modify background color */
 tr.ms-viewheadertr > th.ms-vh2-nograd,
    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.ms-vh2-nofilter,
    tr.ms-viewheadertr >th.ms-vh-div/* Text */ {
        background: #2E4C70;
    }
.ms-viewheadertr {

width:100%;
}


 Modify background color on hover */
    tr.ms-viewheadertr > th.ms-vh:hover,
    tr.ms-viewheadertr > th.ms-vh2:hover {
                background-color: #273C51;
                border-color: #273C51;
        }

 Modify font color */
    .ms-viewheadertr a,
    .ms-viewheadertr div {
        color: grey;
    }

 Modify font color on hover */
    .ms-viewheadertr a:hover,
    .ms-viewheadertr div:hover {
        color: blue;
    }

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s