Alternating row shading in a SharePoint list

Update 9/12/17: Video tutorial at bottom of post

Alternating list row colors can help your list go from zero to hero in just a few minutes. It’s another quick fix that makes your data easier on your viewers’ eyes and helps with user adoption, especially those coming from programs and platforms that had alternating row colors built-in.

Maybe you don’t want every list to have the same color of row shading or to have row shading at all. But if you do, further down in this post are instructions to adjust your master page and apply shading to all existing and future lists and libraries on your site. But for now, we’ll start with just adjusting one list by using a Content Editor Web Part  (CEWP) on the list’s page.

CEWP (one or few lists)

Add the script to your Site Assets

A. In SharePoint Designer go to Site Assets (and your Scripts folder, if you’ve made one), then add a new .css file. Name it “alternatingrows.css”

B. Insert the following script into your new .css file:

[code lang=”text”]
<style>
.ms-alternating{
background-color: #F2F1EC;
}
</style>
[/code]

Note: You can use absolutely any HTML color code in this script, but a good practice is too keep it light and not too distant from the other color. Here are some options you might try, the first just being white for comparison:

C. Save your new .css file and go back to your SharePoint site.

Call the new .css file from a CEWP

D. From the list on your site to which you want the row shading to appear, edit page and add a web part. (Settings icon –> edit page, then “Add a Webpart”).

E.  Under Categories, select “Media and Content” and then under Part select “Content Editor” and “Add”.

F. “Edit Web Part” (Note: do not “click here to add new…”).

G. Add the URL to your new css file ([SITE URL]/SiteAssets/Scripts/calendaroverlay.css) to the “content link” field and click “OK”.

H. From the ribbon’s page menu, select “stop editing.”

And that’s all there is to it! If you want to experiment with different colors, you don’t need to edit the CEWP again. Just go to SharePoint Designer, open your .css file and change the color code there and save, then check the result on your site.

---

Master Page (all lists/libraries)

Create multi-purpose custom .css file (or alter one you already have)

A. Find your Site Assets folder in SharePoint Designer. If you use a “Scripts” folder for your custom scripts, go there.

B. Since we’re editing the master page, I would recommend having just one css file that you include all the lines of adjustment to (not just from this solution, but any alterations you make that you intend to be reflected on all pages). This is just one code we’re adding – you’ll likely collect several over time and it is easiest to reference and maintain one .css file that includes them all as opposed to several .css files in the master page.

C. Add the following line of css to your new or existing custom css file in SharePoint Designer.

[code lang=”text”]
.ms-alternating { background-color: #F2F1EC}
[/code]

Note: You can use absolutely any HTML color code in this script, but a good practice is too keep it light and not too distant from the other color. Here are some options you might try, the first just being white for comparison:

D. Save your css file. In this example, I’ve renamed it “custom.css”.

Reference custom .css file in master page

E. Open a copy of your master page file for editing.

1. In your browser, navigate to your site and go to Settings –> Site Settings
2. Under Web Designer Galleries, select Master Pages
3. “Download a copy” of seattle.master or oslo.master (whichever your site is using – if unsure, it’s likely seattle by default)
4. Use Visual Basic or Notepad++ to open the downloaded file

F. Find the line just before the closing tag and enter (assuming you also have a Scripts folder in Site Assets, otherwise omit that part):

[code lang=”text”]
&lt;SharePoint:CssRegistration Name="[SITE URL]/SiteAssets/Scripts/custom.css" runat="server" /&gt;
[/code]

G. Save your master page file.

H. Upload your saved file to the master page gallery we just downloaded from. (Site Settings –> Master Pages) Make sure “Add as a new version to existing files” is checked so that you can always revert to a previous version easily if needed. Don’t change destination folder, but feel free to add a comment for a reminder such as “added custom css file with alternating list row color” so you can easily see in the versions what you changed.

And that’s all there is to it! Go check your lists (or even the master page library you’re already in) to see if the code loaded correctly. If you want to experiment with different colors, you don’t need to edit the master page again. Just go to SharePoint Designer, open your custom.css file and change the color code there and save, then check the result on your site. Pretty snazzy, huh?