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

 

Advertisements