CSS to update display of items in SharePoint List View with alternating colour

The list view display of items in a SharePoint List can be updated to have alternating row colour and border set by using CSS.

ListViewOfItems

To test the snippet below, edit the page displaying the list items and add a content editor WebPart. Copy and paste the CSS snippet into the content editor WebPart.

<style type=”text/css” unselectable=”on”>
/*————————————————————————-*/
/* ——- Set Alternating 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 dotted black !important; /* !important needed over override SharePoint inline style */
}
/* ——- Set background for every alternating row ——- */
.ms-listviewtable > tbody > tr.ms-alternating {
background: lightgrey
}

</style>

After saving the CSS, the list view is transformed into alternating coloured row with dotted border bottom.

AlternatingRowBorder

Project Server 2013/Online – Customise Track your work WebPart tile colour using CSS

In Project Server 2013/Online, there is Track Your Work WebPart which can be added to a page.

TrackYourWorkWebPart

The composed look can be updated to change the colour of the tiles.

If each tile needs a different colour, custom css needs to be used.

Copy and paste the css code below into a content editor WebPart.

<style type=”text/css” unselectable=”on”>

/* —- #64D9E9  –>  Light Blue
/* —- #FFDE7B  –>  Yellow
/* —- #D467A3  –>  Pink
/* —- #FF6685  –>  Red

/*—- #FF0033  –>  Carmine red
/* —- #A995C1  –>  Purple
/* —- #97D4A3  –>  Green
/* —- #667F97  –>  Dark Blue
/*————————————————————————-*/
/*————————————————————————-*/
/* ———– Change the color of the tiles ——————–
Adding more colors change the 7n to 8n, etc to continue adding colors */
div.ms-tileview-tile-root:nth-of-type(7n + 1) .ms-tileview-tile-content {
background-color: #64D9E9;
}
div.ms-tileview-tile-root:nth-of-type(7n + 2) .ms-tileview-tile-content {
background-color: #FFDE7B;
}
div.ms-tileview-tile-root:nth-of-type(7n + 3) .ms-tileview-tile-content {
background-color: #D467A3;
}
div.ms-tileview-tile-root:nth-of-type(7n + 4) .ms-tileview-tile-content {
background-color: #FF6685;
}
div.ms-tileview-tile-root:nth-of-type(7n + 5) .ms-tileview-tile-content {
background-color: #FF0033;
}
div.ms-tileview-tile-root:nth-of-type(7n + 6) .ms-tileview-tile-content {
background-color: #A995C1;
}
div.ms-tileview-tile-root:nth-of-type(7n + 7) .ms-tileview-tile-content {
background-color: #97D4A3;
}

</style>

 

ContentEditorWebPart

The end result is a differently coloured tile

DifferentColouredTile