See in the following:

  1. Add a ContentQueryWebpart to the page.

  2. Click on editwebpart and choose your list or Document Library from which you want to show your data.

    content query tool part

  3. Export the Document Library.

    export
  4. Download this .webpart file and open it in Visual Studio.

  5. Find the CommonViewField Property and enter the Internal name of the Document Library column that you like to display. Then save this file.

    webpart file

  6. Go to the page and uplode this .webpart file and add this to the page.

    upload a web part

    content Query

    TitleOnlyWithIcon
  7. Next open SharePoint Designer and navigate to:

    AllFiles->StyleLibrary->XSL Style Sheet->ItemStyle.xsl

  8. Add the following code just above the </xsl:StyleSheet> and give a name to it.

    Here the name is TitleOnlyWithIcon.
    1. <xsl:template name="TitleOnlyWithIcon" match="Row[@Style='TitleOnlyWithIcon']" mode="itemstyle">
    2. <xsl:variable name="SafeLinkUrl">
    3. <xsl:call-template name="OuterTemplate.GetSafeLink">
    4. <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
    5. </xsl:call-template>
    6. </xsl:variable>
    7. <xsl:variable name="DisplayTitle">
    8. <xsl:call-template name="OuterTemplate.GetTitle">
    9. <xsl:with-param name="Title" select="@Title"/>
    10. <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
    12. </xsl:call-template>
    13. </xsl:variable>
    14. <xsl:variable name="LinkTarget">
    15. <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
    16. </xsl:variable>
    17. <div class="item link-item">
    18. <!-- Here comes the icon -->
    19. <div style="background-color:rgb(242, 242, 242);height:25px">
    20. <span class="icon">
    21. <img src="/_layouts/images/{ddwrt:MapToIcon(string(@HTML_x005F_x0020_File_x005F_x0020_Type),string(@File_x005F_x0020_Type))}" alt="{@DocIcon}" style="vertical-align: middle;margin-right:4px" />
    22. </span>
    24. <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
    25. <xsl:value-of select="$DisplayTitle"/>
    26. </a>
    27. </div>
    28. <table style="margin-left:10px !important">
    29. <tr>
    30. <td>
    31. Name
    32. </td>
    33. <td>
    34. :
    35. </td>
    36. <td>
    37. <xsl:call-template name="OuterTemplate.GetTitle">
    38. <xsl:with-param name="Title" select="@Title"/>
    39. <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
    41. </xsl:call-template>
    42. </td>
    43. </tr>
    44. <tr>
    45. <td>
    46. Author
    47. </td>
    48. <td>
    49. :
    50. </td>
    51. <td style="margin-left:40px !important">
    52. <div class="description">
    53. <xsl:value-of select="@Author" />
    54. </div>
    55. </td>
    56. </tr>
    57. <tr>
    58. <td>
    59. Editor
    60. </td>
    61. <td>
    62. :
    63. </td>
    64. <td style="margin-left:40px !important">
    66. <div class="description">
    67. <xsl:value-of select="@Last_x0020_Modified " />
    68. </div>
    69. </td>
    70. </tr>
    71. </table>
    72. </div>
    73. </xsl:template>
  9. Modify the <xsl:Value-of > based on your column internal name that you want to display and save this file.

    Note: only the column name given in .the webpart page that we have uploaded will be available here.

  10. Now go to the webpart page and click the edit webpart and open the Presentation section.

    Select the ItemStyle dropdown. You will find the name “TitleOnlyWithIcon” that we created in Step 8.

    style

  11. Select TitleOnlyWithIcon and click OK and you will get this.

    Select TitleOnlyWithIcon

  12. Then click on the edit page and open the HTML Source.

    edit HTML Source

  13. Add this CSS at the start and save it.
    1. <style>
    2. .ExternalClass256C53619A0D4194B4662B09B7F799ED .dfwp-item {
    3. MARGIN-BOTTOM: 10px; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #bfbfbf 1px solid; BORDER-BOTTOM: #bfbfbf 1px solid; BORDER-LEFT: #bfbfbf 1px solid; WIDTH: 500px
    4. }
    5. .ExternalClass256C53619A0D4194B4662B09B7F799ED UL {
    6. LIST-STYLE-TYPE: none
    7. }</style>
  14. Finally you will get this.
    Show files