1

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

  • JsLink specificly? There is a default style available in listviews for alternate row-color. It's also easy to achive this using CSS. – Christoffer May 22 '18 at 7:43
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>
0

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!

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.