Change background color on list view selector

Question

I have a few list views on SharePoint 2013.

I want to set background color on the list view selector or set font color.

How to do it?

Thanks!

Answer 1

In SharePoint 2013 was introduced a so called Client Rendering Mode (CSR) which represents a rendering engine for list views, list forms and search results. I would recommend you to consider the following approach for your task.

Below example demonstrates how to highlight list task rows based on their status

Template code:

SP.SOD.executeFunc("clienttemplates.js", 
"SPClientTemplates", function() {
SPClientTemplates.TemplateManager.
RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
      'Not Started' : '#FFF1AD',  
      'In Progress' : '#FFD800',
      'Completed' : '#01DF3A' 
   };

   var rows = ctx.ListData.Row;
   for (var i=0;i<rows.length;i++)
   {
         var status = rows[i]["Status"];
         var rowId = GenerateIIDForListItem(ctx, rows[i]);
         var row = document.getElementById(rowId); 
         row.style.backgroundColor = statusColors[status];
     }
    }
   }); 

});

For more clarification and how to add this code in JSLink of list view, see my answer How to Highlight a Row on Active Status.