CSS Challenge Response: Simple styles for SharePoint list

A CSS Challenge from Fred:

Make lists look like basic MS-Office tables:

  • dark background header row with white text
  • alternate rows with light color background
  • dark bottom borders on every rows

Here is the CSS to start your list/library styles!

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

	/* 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 /* Text */ {
			background: #2E4C70;
		}

	/* 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: white;
		}

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

/*
SharePoint Experts, Inc.
sharepointexperience.com
*/

7 thoughts on “CSS Challenge Response: Simple styles for SharePoint list”

  1. This code does not seem to produce the colors indicated. Did I miss something:

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

    /* 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 /* Text */ {
    background: #2E4C70;
    }

    /* 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: white;
    }

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

    /*
    SharePoint Experts, Inc.
    sharepointexperience.com
    */

Leave a Reply

Your email address will not be published. Required fields are marked *