Click here to Skip to main content
15,867,918 members
Articles / Productivity Apps and Services / Sharepoint / SharePoint 2013

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

Rate me:
Please Sign up or sign in to vote.
4.80/5 (4 votes)
3 Jul 2016CPOL2 min read 31.2K   209   2   3
This article describes how to customize announcements list view webpart using XSL and how to customize content editor webpart style using CSS.

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:

Image 1

Customized list view webpart:

Image 2

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:

Image 3

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.

XML
<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.

XML
<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:

HTML
<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.

    Image 4

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

    .Image 5

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

    Image 6

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

Points of Interest

History

  • 3rd July, 2016: Initial version created

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
India India
I am Senthil Gopal, a SharePoint Lead based out of Chennai, India.
I have around 9+ years of experience in Microsoft technologies such as C#,Asp.net, SharePoint 2010 and 2013.
This is a Social Group

4 members

Comments and Discussions

 
Questionproblem with coloring background of table cell based on condition of min function Pin
Member 40596482-Jul-21 0:26
Member 40596482-Jul-21 0:26 
QuestionHow do you fill the XSL link ? Pin
Member 1275162421-Sep-16 0:04
Member 1275162421-Sep-16 0:04 
AnswerRe: How do you fill the XSL link ? Pin
senthill26-Sep-16 12:04
professionalsenthill26-Sep-16 12:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.