Customizing List View Webpart Look and Feel using XSL and CSS in Sharepoint 2013

• Download source - 711 B

Introduction

This article will help you to display the SharePoint list (custom list, summary link and announcement list) content with good look and the content of the list can be modified dynamically without affecting the design of the view webpart. Also, site collection administrator rights are not required to move the web part from one server to another.

Background

At the end of this article, you will learn how to change the basic design of list view depart using XSL and CSS.

Basic design of list view webpart is as follows:

Customized list view webpart:

Follow the below steps to convert the webpart design:

1. Create a custom list
2. Create an XSL file
3. Add XSL file to List View Webpart

Creating Custom List

1. Navigate to Site and Click on “Settings” option and then click on “site contents”
2. Then click on “add an app” option.
3. Select “Custom list” option from the “your app” page. ...
4. Give the proper name as “welcomecontent” and click on Create button
5. Then create rich text column "Body" as shown below:

Creating XSL File

This code builds the header part of the webpart, if you want to make change on the header color, change here and update the XSL file.

<xsl:template match='dsQueryResponse'>

<div class="maincontent" style="border: 2px solid #00B3E3;">
//header part
<div  align="left" style="padding-top: 2px;background-color:#00B3E3;
          width=100%;height:50px" class="title">
          <p style="color:white;font-family: Open Sans;font-size: 25px;
           margin-top: 5px;margin-bottom: 0px;" > Welcome to CodeProject!!!
           <h6 style="color:white;font-family: Open Sans;font-size: 13px;">
            Welcome to codeproject site!!!</h6>
          </p>
       
</div>
      
<div class="mainp" style="padding:10px">
      <xsl:apply-templates select='Rows/Row'/>
</div>
 
</div>
  </xsl:template>

Copy the below code and save it as "welcomecontent.xsl" and upload the file into style library from site content page.

<xsl:stylesheet version="1.0"
              xmlns:xsl="<a href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</a>"
              xmlns:msxsl="urn:schemas-microsoft-com:xslt"
              exclude-result-prefixes="msxsl" xmlns:ddwrt2="urn:frontpage:internal">
  <xsl:output method='html' indent='yes'/>
  <xsl:template match='dsQueryResponse'>
<div class="maincontent" style="border: 2px solid #00B3E3;">
<div  align="left" style="padding-top: 2px;background-color:#00B3E3;
                   width=100%;height:50px" class="title">
          <p style="color:white;font-family: Open Sans;font-size: 25px;
                   margin-top: 5px;margin-bottom: 0px;" > Welcome to CodeProject!!!
           <h6 style="color:white;font-family: Open Sans;font-size: 13px;">
            Welcome to codeproject site!!!</h6>
          </p>        
</div>
       
<div class="mainp" style="padding:10px">
      <xsl:apply-templates select='Rows/Row'/>
</div>
  
</div>
  </xsl:template>

  <xsl:template match='Row'>
    <xsl:value-of select="@Body" disable-output-escaping="yes"></xsl:value-of>
     </xsl:template>
</xsl:stylesheet>

The list content will be transformed as per the below format:

<div class="maincontent" style="border: 2px solid #00B3E3;" 
xmlns:ddwrt2="urn:frontpage:internal">
  <div align="left" style="padding-top: 2px;background-color:#00B3E3;width=100%;height:50px" 
   class="title">
    <p style="color:white;font-family: Open Sans;font-size: 25px;margin-top: 5px;
     margin-bottom: 0px;"> Welcome to CodeProject!!!
           </p><h6 style="color:white;font-family: Open Sans;font-size: 13px;">
                Welcome to codeproject site!!!</h6>
    <p></p>
  </div>
  <div class="mainp" style="padding:10px">
  <div class="ExternalClassF1E26ED601AC49FF80AC1AC2D8ED533D">
  <p><strong style="line-height:20.8px;
  ">&#8203;Lorem Ipsum</strong><span style="line-height:20.8px;">
  &nbsp;is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
  when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  It has survived not only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s with the release of 
  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
  software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <span style="line-height:20.8px;">&#8203;
  </span><br></p><p><strong style="line-height:20.8px;">
  Lorem Ipsum</strong><span style="line-height:20.8px;">&nbsp;is simply dummy text of the printing 
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
  ever since the 1500s, when an unknown printer took a galley of type and scrambled it 
  to make a type specimen book. It has survived not only five centuries, 
  but also the leap into electronic typesetting, remaining essentially unchanged. 
  It was popularised in the 1960s with the release of Letraset sheets containing 
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
  including versions of Lorem Ipsum.</span><span style="line-height:20.8px;">&#8203;
  </span>&#8203;<br></p></div></div>
</div>

Add XSL File to List View Webpart

1. Navigate to the page library and open the page which you want to add this webpart.
2. Click Edit Page from Site Settings menu.
3. Click Add a webpart and select the list which we created in the first step.

   

4. Once the webpart is added into page, click Edit webpart:

   .

5. Expand "Miscellaneous " section and give the XSL path where we stored the XSL (i.e., style library).

   

6. Press "Ok".
7. Now the webpart will be rendered with styles.

Points of Interest

History

• 3^rd July, 2016: Initial version created