Coloring your SharePoint Timeline in one line of code

I just had a colleague ask me “Can we color code a timeline?”. I, of course, answered “Sure!”. I had a little wiggle room in my day so I busted this out.

Let’s go from the all blue timeline:

To something that indicates where your are, a little more visually:

One line of code, BOOM:

 $(".ms-tl-milestoneLine, .ms-tl-innerDiamond").filter(function() { return $(this).offset().left < $(".ms-tl-today").offset().left; }).css("background-color","rgb(13,171,5)");

I’m not a fan of one-line-of-code solutions, I’m a bigger fan of clean, legible code, so here’s the above, but a little more understandable.

$(document).ready(function() {
 var todayLeft = $(".ms-tl-today").offset().left;
 var backgroundColor = "rgb(13,171,5)";
 $(".ms-tl-milestoneLine, .ms-tl-innerDiamond").filter(function() {
    return $(this).offset().left < todayLeft;
 }).css("background-color",backgroundColor)
});

If it’s not obvious, you’ll need jQuery on your page as well ;). Similar to my color coding calendars, you’ll have to throw this into a content editor web part or a HTML forms web part.

Happy SharePointing!