How to use jslink to change item row colour in a list view

Question

I'm after a jslink to be able to add a background color to a list view. Like an alternate colour to make it more visible Any hints would be appreciated

Answer 1

Simply modify the list view. Change Style to Shaded.

OR

Make use of CSS. Here is an example one I have used. It contains formatting for group headings, webpart heading and alternating rows.

<style type="text/css">
/* List View Header */
.ms-listviewtable > thead > tr > th {
    background-color: #7695a3;
    font-colour: white;
    font-size: 16px;}

/* List view Header Text color*/
.ms-vh-div,  .ms-headerSortTitleLink {color:black !important ; font-weight: bold;} 

/* background color for alternate rows */
.ms-listviewtable > tbody > tr.ms-alternating {background: #DDEBF7}

/* list text colour */
.ms-vb2 {color:black}

/* fix column widths */
/* th.ms-vh2 div[DisplayName='Name']{
    min-width:200px;
    max-width:200px;
} */

/* webpart title */
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
    background-color: #236FA4;  
    font-size: 18px;    
    font-weight: bold;  
    color: white;
    padding: 5px 5px;}

/* level1 group headings */
.ms-gb {
    color: white;
    font-weight: bold;
    font-size: 16px;
    background-color: black;}

/* level2 group headings */
.ms-gb2 {
    color: white;
    font-weight: bold;
    font-size: 16px;
    background-color: #1c4269;}

.ms-listviewtable .ms-gb, .ms-listviewtable .ms-gb2 {
    padding-top: 2px;}

</style>

Answer 2

If I try to google that for you I find this

Client side rendering JS

Which helped me when I needed to learn all about JSLink. However I join Christoffer's offer in alternatives.

Nowadays, JSLink is deprecated and in SharePoint Modern Pages, one must use the SharePoint FrameWork to customize fields

Building a Simple Field Customizer

But this is a whole project and not as light to develop as a simple JS Link Script.

Hope this helps!