Tiny nugget of code that goes a lonngggg way. Why? Cause everyone likes pretty colors. What? You don’t? Well, I most definitely, absolutely, positively, entirely do! So I share what I do. Mostly because its easy to look this post up than the 20 site collections I code for.

Just as the script says…its jQuery. It looks for values in columns with words ‘green’, ‘red’,’yellow’. Those are from calculated column by the way. Any row that has the color, is styled with its matching background. I have always found good results when I go for softer colors. As much as I love bright and bold, when it comes to tables/lists, the softer the better. Easy on the eyes. Mostly because it makes those scary reds easier to handle. Yep, you will probably still get in trouble,or not  but at-least your eyes wont be alarmed much!

What are these $ and (document) adn all that good stuff in between script tags? checkout http://www.jquery.com

https://code.jquery.com/jquery-2.1.3.min.js

$(document).ready(function () {
$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘green’)”);
$Text.parent().css(“background-color”, “#CEF6D8”);

$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘red’)”);
$Text.parent().css(“background-color”, “#F8E0E6”);

$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘yellow’)”);
$Text.parent().css(“background-color”, “#FFFFD5”);

$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘gray’)”);
$Text.parent().css(“background-color”, “#d3d3d3”);

});

Strongly typing this section in the post. This little fix gets rid of those nagging ghost left navigation margin in your Oslo template. What is Oslo template? Meh! Another topic, another post. 🙂

<style>
.contentwrapper{
margin-left: 0px;
}
</style>

Color me KPI
Color me KPI

One thought

  1. Hello,
    Could you share exactly where you inserted the jQuery code into SharePoint Online?

    Thank you,

    Connor Singerline

    Like

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