Category Archives: XSLT

Customizing SharePoint 2010 Blog Posts

In this article I will explain how it’s possible to make style customizations to SharePoint blogs. When a blog site is created, SharePoint builds a list called Post. This list contains all the articles published to the blog. The goal to this customization is to add another column to the list called ‘Written by’ and use a column type of Person or Group. The reason for this column is to display the author’s name of the post instead of showing the ‘Created By’ column. Created by displays the name of the person who published the post. Written by column by will display a choosen name instead.

blog

Blogs are customized in SharePoint using XSLT. Remember that XSLT is a style transformer for XML data. Merging XSLT with XML data will output a results page, in our case, the blog postings.

To Begin Customization
A default.aspx page is also created as the home page for the blog. Before you make any changes in Designer, its a good idea to make a backup copy of the .aspx files you plan on editing. You know its very easy to break SharePoint so be careful and protect yourself with backups!

Open default.aspx in Designer and in the Design view click on the XSltListViewWebPart so it is highlighted. When the ribbon changes to ListViewTools, select the Design tab.

design

Click on the Customize XSLT dropdown and the select ‘Customize the entire view’. This action pulls the XSL from the blog.xsl into the page so it can be viewed and customized.
Blog.xsl is an XSLT file that resides in the _layouts folder on the front end web server.
The object here is to view the .xsl file that is being used and to customize that file.

Look for the line of code:

<xsl:include href="/_layouts/xsl/blog.xsl"/> 

Move your curosr over the code and press control key to see cursor change. Control-Click on the code and a blog.xsl will open as a new page in Designer. Save a copy of blog.xsl and put it in a directory such as ‘XSL’ in the root site of the Site Collection. Give it a different name.

Close default.aspx without saving changes. Open it again and the look for the tag. Add the Written by tag as shown below:

<ViewFields>
<FieldRef Name="Title"/>
<FieldRef Name="Body"/>
<FieldRef Name="Author"/>
<FieldRef Name="PostedByWithDate"/>
<FieldRef Name="CategoryWithLink"/>
<FieldRef Name="Permalink"/>
<FieldRef Name="EmailPostLink"/>
<FieldRef Name="NumCommentsWithLink"/>
<FieldRef Name="PublishedDate"/>
<FieldRef Name="PostCategory"/>
<FieldRef Name="Written_x0020_By"/>
</ViewFields>

Save the file. Go to your saved blog.xsl file and go to the following section:


<xsl:when test="@Name='Author'"><span class="ms-postfootercolor"><xsl:value-of select="'by '"/></span><xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes">&amp;nbsp;</xsl:text><xsl:value-of select="$thisNode/@Author.span" disable-output-escaping="yes" /></xsl:when>

and replace the code with this:


<!-- For the author field, render it using the span style and preceed it with the word "by"--> 
<xsl:when test="@Name='Author'">
<xsl:variable name="ShowPerson">
<xsl:choose>
<xsl:when test="string-length($thisNode/@Written_x0020_By.id) &gt; 0">
<xsl:value-of select="$thisNode/@Written_x0020_By.span" disable-output-escaping="yes"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$thisNode/@Author.span" disable-output-escaping="yes" />
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<span class="ms-postfootercolor" ><xsl:value-of select="'by '"/></span>
<xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">&amp;nbsp;</xsl:text>

<span class="ms-postfootercolor" style="background-color:yellow; font-weight:bold"> <xsl:value-of select="$ShowPerson" disable-output-escaping="yes" /></span>
</xsl:when>

The last step you need to do is link the new xslt stylesheet to the webpart. In the browser, open the Tool Pane for the ListView web part and expand Miscellaneous.
In the XSL field, add the path name to your newly created XSLT file that you saved in XSL document library. Save your changes.

mis

Now when you view the Post page in the browser you should see the name of the person you choose in the Written by column in yellow. Feel free to change yellow to transparent or you can remove the style altogether.

yellow

Thanks to Marc Anderson for his XSLT code.