Justin Cooney

Adding your own custom CSS can be super useful and a great way to spruce up stock SharePoint views. You can use the CSS designer of SharePoint Designer but that is clunky at best. All things considered, it’s best to use your own markup if you want to customize your SharePoint views.

For starters let me mention what tools I’m working with in this example. I’m using an old on-premise installation of SharePoint 2016 and to do the editing I’m using SharePoint Designer 2013

Here I’ve decided to inject some CSS into the list view in SharePoint. Specifically the steps are to open the list view in SharePoint Designer, convert the view to editable XSLT, and then to inject some CSS that will alter the layout of the list view.

• Note that this will not affect your Document Library List if you embed it on a SharePoint Web page, this is just for the list by itself.

How to Steps

The default style of a SharePoint Document library is very basic so you could use CSS to make it more snazzy. Alternately, you can hide columns that you want available but not visible to the users. Why hide a column? Well, removing the column from your view makes the information in it unavailable to REST calls for example. If you want the information there for system calls but not visible for the average user then you can use CSS to hide the columns from the user. This can really cut down on confusion for end users.

1. Create a new view for your library… in your SharePoint site, click your library and click ‘New View‘ and then select to ‘Start from an existing view‘ to copy the existing default view. You’ll want your own view version to work with so your original default view remains unchanged.
2. Go to editing the view (in the Web site click the library and then ‘Modify View‘) and set the style option to ‘Basic Table‘. That way when you open the view in SharePoint Designer you will see the markup as XSLT markup rather than as asp:contentarea zones. The default view is with asp content areas that does not show an HTML table to modify, but the Basic Table View does. The difference in appearance between the views (default and table) is minimal, both seem more or less identical with a simple table format layout, but the basic table view gives you more customizability.
3. Open your SharePoint site in SharePoint Designer 2013. Click on ‘Lists and Libraries‘ on the left hand navigational sidebar
4. Select your library and then under the ‘Views‘ section click on the view to modify.
5. Click on your library, then the Library tab, then on ‘Modify View‘
6. • Just as a reminder: You need to be able to edit the view and to see it in XSLT mode, the default view is entirely ASP content areas which you can’t easily work with. The ‘Basic Table’ view allows you to see things in XSLT markup. 
7. When you first open your view it will not yet be in XSLT markup mode. To enable XSLT view:
   1. Inside one of the lower <asp:Content areas type something and then click to ‘save‘ (alternately click the Edit tab & select HTML and then click ‘Save’)
   2. You should then see a popup prompt where you will click ‘yes’. The prompt should say ‘Saving your changes will customize this page so that it is no longer based on the site definition‘ This is good and will allow you to add your customizations.
   3. After you save close and re-open your view in SharePoint Designer 
   4. You can force the system to go to the XSLT mode by selecting the option ‘Customize XSLT‘ in the Top menu bar of SharePoint Designer under the Design tab of ‘List View Tools‘
   5. So to summarize, in the top bar find ‘List View Tools’. Click ‘Design‘ tab. Select the ‘Customize XSLT‘ dropdown and select ‘Customize Entire View‘
8. Locate the table area within the XSL tags. The table should be close to the top of the document and looks like the following markup:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
      	<xsl:if test="not($NoCTX)">
        	<xsl:call-template name="CTXGeneration"/>
      </xsl:if>
      	<xsl:if test="List/@TemplateType=109 and not($ClientRender='1')">
        	<xsl:call-template name="PicLibScriptGeneration"/>
      </xsl:if>

9. Add the class tag to the existing HTML table (ie: class=”GetColumn” )
10. Add the style markup directly above the HTML table tag.
11. Here is some example CSS markup that will make the third table column header with a yellow background and will hide the 10th and 11th columns

<style type="text/css">    
.GetColumn th:nth-child(3) { background-color:yellow;}    
.GetColumn td:nth-child(10) { display:none; }.GetColumn th:nth-child(10) { display:none; }   
.GetColumn td:nth-child(11) { display:none; }.GetColumn th:nth-child(11) { display:none; }
</style> 
<table cellspacing="0" cellpadding="0" border="0" class="GetColumn">

Summary

So to sum things up, from this example you should be able to see how to take a SharePoint Document Library from stock SharePoint and make it look much better than it does out of the box. In this example you can see how to open your Document Library view in SharePoint Designer 2013, convert it to editable XSLT, and inject some CSS of your own to style the library.