Pages

Monday, March 19, 2018

Apply Custom CSS to Sharepoint List View Webpart Pages

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:


No comments:

Post a Comment