In SP/O365 online, I need to add colors to list items in an announcement webpart according to the date. I have been looking at the following article: Color custom list items based on Status using OOTB which is coming close to what I need, but I lack the knowledge to change this script to my needs.

New list items should show in a different color (not the background, but item itself) and it needs to change to default after a specific amount of time, like f.e. a month after the created date.

Thanks in advance.


2 Answers 2


I have used CSR templates to get this customization. Below is snippet. This can be reused.

(function () {
    var requestCtx = {};
    requestCtx.Templates = {};
    requestCtx.OnPostRender = highlightFields;
function highlightFields(ctx) {
    var cellIndex = -1;
    $(".ms-listviewtable thead th").each(function(index){
        if($(this).find("div [name='Created']")) {
            cellIndex = $(this).index();
    if(cellIndex > -1) {
        $(".ms-listviewtable tbody tr").each(function(index){
            var strDate = $(this).find("td:eq(" + cellIndex + ")").find("span").attr("title");
            var days = Math.round((new Date() - new Date(strDate))/1000/60/60/24);
            if(days < 30) {

in the snippet "text-success" is my css class and you can replace with your own class.

.text-success {
color: green;

you will see output as follows enter image description here

  • Thanks, this looks great. Will try to implement this to an alerts list the coming week.
    – Murphy
    Apr 21, 2017 at 10:56
  • As I am working on a SP that is controlled by another big firm, I have no access to Design Manager unfortunately to add snippet. I have tried to js link to this script file within the webpart options. With no success however.
    – Murphy
    Apr 25, 2017 at 14:37
  • Made a page with an alerts list. Put the above script into Script Editor webpart (adding <script></script>). Put the CSS into another Script Editor (adding <style></style). Still can't get it working. Because SP language is dutch, I have changed 'created' to 'Gemaakt', but still can't get it green...
    – Murphy
    May 11, 2017 at 13:48

I think the approach is:

  1. to create a workflow that assign a value depending on time past since creation and then
  2. using this value to select a custom CSS assigned to your lists
  3. using a Calculated Column to push the CSS into the list

    More specifically:
    1. workflow 2010: find days between Current Item:Created and Today
    2. Create a calculated column and put this formula (of course oyu've to adapt to your columns) and set data type returned as number (this is the only way SP will read this as HTML):

=IF([PastDays]>5,:"<div style='background-color:gold; color:white; '>"&[PastDays]&"</div>",[PastDays])

In this example the cell of PastDays will be red with white font if this value is > than 5. Of course you can nest many condition and give more complicated style definition.

  • Good idea about the workflow assigning a value on passed time. However Calculated Column pushing CSS sounds unknown to me.
    – Murphy
    Apr 21, 2017 at 14:50
  • Thanks, I see what you mean now. Will try this the coming days if I have access to workflows...
    – Murphy
    Apr 25, 2017 at 14:39
  • I've created the calculated column, but when I paste code into formula and hit ok, SP returns error msg. But the biggest problem is that in workflows, I can only chose basic 'approval' and 'three-state', 'find days between item' is not in the list.
    – Murphy
    Apr 27, 2017 at 10:45
  • I managed to create a calculated column (named Age) that returns a number using Formula Today-Created (and then deleting Today column). I have a value now, but when I add your formula (changing PastDays with Age), it goes wrong. Is PastDays referring to the list, the column or the workflow result?
    – Murphy
    Apr 27, 2017 at 12:51
  • You have to build a workflow in SharePoint Designer. Build a 2010 WF and get the number of days between the 2 dates, then set it in a column (here I called it PastDays) .
    – Marpio
    Apr 27, 2017 at 14:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.