I blogged on this a while back using a similar approach for MOSS 2007. Here is a link to that post: http://saltypc.com/?p=99
Things have changed since then so here are the steps to set this up in 2013.
You will need to reference jquery for this to work. I prefer to download the minified script and place it in a centralized location inside my farm.
- Add a script editor web part to the bottom of your page.
- Insert the following into your source:
$Text = $("td.ms-cellstyle.ms-vb2:contains('Change Me')"); $Text.parent().css("background-color", "#99FF66");
Modify the Change Me to reflect the column name of your list/library. You can also change the color to any web safe color of your choice.
To highlight mulitple column choices, simply copy the $Text line and past it below the copied line.
$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Column A)”); $Text.parent().css(“background-color”, “#FFFFFF”);
$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Column B)”); $Text.parent().css(“background-color”, “#000000”);
This comes in handy when you need to find a needle in a haystack.
We had an issue come up about security with InfoPath forms. One of the major issues was that we could restrict items in the view, but if you used explorer view, all of the security would be bypassed. To counter this, we use a CEWP and the following jQuery script: HideViewsScript
Please note, you will need to change the first line in the script to reference your jQuery file:
This will disable all of those pesky views and you will be able to force your security through your main view.
Go to the list or library that you want to resize and add a Content Editor Web Part.
From the script below, I am referencing jQuery from my internal site.
Copy and paste this code into the CEWP.
$(“TH.ms-vh2-nograd:contains(‘Column 2’)”).css(“width”, “350px”);
“Column 1” and “Column 2” will be the name or your columns that you want to resize.
Here is an example I used and only resized one column:
Follow these steps and your will be highlighting in no time!!!
- Go to your list to be highlighted
- Edit Page
- Add a Content Editor Web Part
- Move the CEWP to the bottom of the page
- Click the Edit Source button
- Copy and paste the following lines of code into the source code section
if (x[i].innerHTML==”Next Day Pickup”) //find the data to use to determine the color
x[i].parentNode.style.backgroundColor=’yellow’; // set the color
- Make your changes to the innerHTML section to reflect the list value for the jquery lookup
- Set the color of your choosing. You can also choose to use the html value for the color: FFFFOO
Please note, I am referencing jquery inside of my SharePoint site. This way, I do not have to add an external reference.