1

I've been looking for a solution to change the background color of specific columns in a SPO list. There seems to be a lot of information on conditional color coding but not the requirement that I am looking for.

Can anyone help?

2
  • Are you using Modern or classic experience? Nov 22 '18 at 9:19
  • Classic experience
    – AjiIchiban
    Nov 26 '18 at 1:57
1

In Classic experience or on SharePoint 2013 sites, you can use CSS to change the background color od the column. You can add this CSS in Script Editor or Content Editor Web part.

Try using below CSS on your page:

<style>
   table.ms-listviewtable tbody tr td:nth-child(3){
      background-color: skyblue;
   }
   table.ms-listviewtable thead tr th:nth-child(3){
      background-color: skyblue;
   }
</style>

Here .ms-listviewtable is class of table : Inspect the your table on list view and use the suitable selector.

And in place of nth-child(3), use the column number from your list view.

3
  • Thanks Ganesh. This is very close to what I'm looking for. However one issue is that I highlighted the column I want using your CSS snippet, but in datasheet view of the list the highlighted column then becomes a different column. I guess they have different columns depending on the view type. Is there any way to handle this discrepancy and highlight the same column in both views?
    – AjiIchiban
    Nov 23 '18 at 1:42
  • For Quick edit of list and datasheet view, Sharepoint adds the query string parameter as ShowInGrid=True in the url. This is hint. extract this query string parameter in you javascript file and if this query string is found then add +1 to number in your nth-child(3) and apply css to classes using javascript/jquery. Nov 23 '18 at 6:13
  • Also, my answer given here may help you. Nov 23 '18 at 6:17
1

If you use classic experience, we can use JSLINK to achieve it. Add code into a script editor web part in the list view page.

<script type="text/javascript">
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {        
        "ColorField": { "View": colorField}
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function colorField(ctx) {
    var currentField = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
    return "<div style='background-color: red; padding:4px 8px 4px 4px;'>" + currentField + "</div>";
}
</script>

If you use modern experience, we can use column JSON formatting to achieve it.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "background-color": "red"
  }
}

enter image description here

2
  • Thanks LZ. Both modern and classic views are an option. The JSLink works well but is there any way to highlight the cell instead of just the text as I think this would look better. As for the modern experience, the highlighting looks much better but unfortunately the highlighting disappears in quick edit view.
    – AjiIchiban
    Nov 23 '18 at 2:12
  • I modify the JSLINK code to make it highlight the cell.
    – LZ_MSFT
    Nov 23 '18 at 6:59
0

You can use JSLinks - javascript files, attached to specific view. You need to edit ListViewWebPart and add link to JS file in properties.

Muawiyah Shannak has a great project with many samples and use cases. Official MS documentation about how this is called SPFX in SPO. And, just in case JSLinks are disabled, a short tutorial how to enable it.

2
  • Thanks Kristaps. Some good information however, unless i'm interpreting the examples incorrectly, they are based on conditional values within the cell from what I can see. I am looking to change the background color on particular columns regardless of value
    – AjiIchiban
    Nov 23 '18 at 1:39
  • Yes, You understood correctly - in Your case just remove code part that validates values for each item and all rows in column will be styled . Nov 23 '18 at 11:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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