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:

SharePoint Timeline

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

SharePoint Color Coded Timeline

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!

Advertisements

2 thoughts on “Coloring your SharePoint Timeline in one line of code

  1. Pingback: Highlighting your late events in your SharePoint Timeline | David Lozzi's Blog

  2. Pingback: Boston SharePoint Bloggers Digest – Summer 2013 | Beantown SharePoint

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s