Here I'm going to describe how we can use Content Query Web Part to Style SharePoint List. Thus Assume we are having a SharePoint List Called Projects with Following Fields.
As you already knew default look and feel would be like below.
Now I'm going to render this list in to format something like below.
Step One
First you need to define Some names for these place holders (Yeh., I know this do not make any sense to you. But don’t worry just do the step). Thus I'm going to define these columns as follows.
Step Two
Now you want to define a XSL Style Sheet using these names. Therefore I'm going to use <table> to layout the list item as below.
<xsl:template name="MyStyle" match="Row[@Style='MyStyle']" mode="itemstyle">
<table border='1'>
<tr>
<td colspan="2"><h3><xsl:value-of select="@MyTitle" /></h3></td>
</tr>
<td>
<img>
<xsl:attribute name="src">
<xsl:value-of select="@MyLogo" />
</xsl:attribute>
</img>
</td>
<xsl:value-of disable-output-escaping="yes" select="@MySummary" />
<td colspan="2">
<xsl:value-of disable-output-escaping="yes" select="@MyDesc" />
</table>
</xsl:template>
here i used XSLT to position the content inside my html tags. There are few attributes which are mandatory in this section.
now you have created XSLT which can given as a list style in the SharePoint.
Step Three
here we are going to put XSLT to the SharePoint.
First you need to open the SharePoint designer with the particular site. Then navigate to All Files andStyle Library.
Here you can see many Folders inside. Now you have to go to XSL Style Sheet Folder.
Now you can see XSL files which are used by SharePoint to render it’s content. Here we are usingItemStyle.xsl for enable custom rendering.
Thus open this xsl file and put your xsl (when we created in step two) in the bottom of the xsl as follows.
Now difficult things are over.
Step Four
Gokan Ozcifci edited Original. Comment: content and title