SharePoint column cell background color based on cell value?

Question

i have one sharepoint list. i have one column called action, which is a calculative column drived value from other

i want if it's yes then it should be green or if no then red.

is it possible via CSS code?

please help

Answer 1

Yes, it can be done in multiple ways :

If this is your SharePoint online environment, it can be achieved with just few clicks:

Select the column DDL(IsApproved) from the view -> Click on the Column Settings -> Click on the Format this column -> In the right panel click on the switch to design mode ->

From this UI formatting - we can generate the equivalent JSON code as well.

Using the content editor web part:

<script type="text/javascript">
var colorCode = document.getElementsByTagName("td")// finding all the TD tags
var i=0; 
for (i=0;i
{
if (colorCode[i].className=="ms-vb2")  
{ 
if (colorCode[i].innerHTML=="Not Started")//finding the word to which the color has to be set
{ 
colorCode[i].style.backgroundColor='lightblue'; // setting the color depending upon the value
colorCode[i].style.color='Black'; // setting the color of the words inside the content                                     
} 
if (colorCode[i].innerHTML=="Started")  
{ 
colorCode[i].style.backgroundColor='Brown';
colorCode[i].style.color='Black';
} 
if (colorCode[i].innerHTML=="In Progress")  
{ 
colorCode[i].style.backgroundColor='Orange';
colorCode[i].style.color='Black'; 
} 
if (colorCode[i].innerHTML=="Completed")  
{ 
colorCode[i].style.backgroundColor='green';
colorCode[i].style.color='Black'; 
} 
if (colorCode[i].innerHTML=="Deffered")  
{ 
colorCode[i].style.backgroundColor='Red'; 
colorCode[i].style.color='Black'; 
} 
} 
}

Source:

Change the Color of a Column in a List in SharePoint

Using CSS and jquery:

$(document).ready(function(){

$Text = $(“td .ms-vb2:contains(‘Yes’)”).filter(function() {

return $(this).text() == “Yes”;})

$Text.parent().css(“background-color”, “#00FF66”);

$Text = $(“td .ms-vb2:contains(‘No’)”);

 $Text.parent().css(“background-color”, “#FF0000”);

 });

For details steps to the below article :

Changing colors in SharePoint List Rows – Conditional Formatting in SharePoint 2013/Online

Using the conditional calculated column:

=IF(Account="Hourly"," <div style="color:red;">Hourly</div>", IF(Account="Silver"," <div style="color:CCC2C2;">Silver</div>", IF(Account="Gold"," <div style="color:D9A441;">Gold</div>")))))

Here "Account" is the column name that has Dropdown value like hourly, silver, Gold - similarly, you just can have yes and no and modify the formula.

Reference URL :

Calculated Column to change text color in a custom list

Refer below code using JSON formatting(using JSON column formatting):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
"class": "=if(Number([$StartDate]) == 0, 'sp-field-severity--blocked', if(@currentField == 'Yes','sp-field-severity--good','sp-field-severity--blocked')) + ' ms-fontColor-neutralSecondary'"

  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(Number([$StartDate]) == 0, 'Warning', if(@currentField == 'Yes','CheckMark','Warning'))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Reference Source :

JSON Conditional formatting for Column

Here is a very good article from Microsoft with bunch examples about the conditionally change the color of the column text:

Use column formatting to customize SharePoint