>Customizing your list’s look & feel in Sharepoint 2010

>I’ve been working on a Sharepoint 2010 intranet for a client; a real pain in the arse was setting up a feed with an image in the web part, customized ‘Add an item’ text and the ability to customize the look and feel via CSS. When you add the list as a web part to a sharepoint page, you’re unable to perform these customizations using a WYSIWYG editor or web part properties; however you can specify an XSL template. Here’s mine:

<?xml version=”1.0″?>
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform&#8221; version=”1.0″ xmlns:ddwrt2=”urn:frontpage:internal”>
  <xsl:include href=”/_layouts/xsl/main.xsl”/> 
  <xsl:include href=”/_layouts/xsl/internal.xsl”/>
  
  <xsl:template match=”/” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”&gt;
    <div class=”webfeed”>
      <img src=”/pages/SiteAssets/myimage.png” style=”float: right;” class=”boximage”></img>


      <xsl:for-each select=”/dsQueryResponse/Rows/Row”>
        <xsl:if test=”string-length(@Title) &gt; 0″>
          <a href=”/Lists/MyList/DispForm.aspx?ID={@ID}”>
            <xsl:value-of select=”@Title” /></a><br/><br/>
          </xsl:if>
      </xsl:for-each>




      <xsl:call-template name=”Freeform”>
        <xsl:with-param name=”AddNewText”>Add an item</xsl:with-param>
        <xsl:with-param name=”ID”>
          <xsl:choose>
            <xsl:when test=”List/@TemplateType=’104′”>idHomePageNewAnnouncement</xsl:when>
            <xsl:when test=”List/@TemplateType=’101′”>idHomePageNewDocument</xsl:when>
            <xsl:when test=”List/@TemplateType=’103′”>idHomePageNewLink</xsl:when>
            <xsl:when test=”List/@TemplateType=’106′”>idHomePageNewEvent</xsl:when>
            <xsl:when test=”List/@TemplateType=’119′”>idHomePageNewWikiPage</xsl:when>
            <xsl:otherwise>idHomePageNewItem</xsl:otherwise>
          </xsl:choose>
        </xsl:with-param>
      </xsl:call-template>




    </div>
  </xsl:template>
</xsl:stylesheet>


Normally, I *hate* color-coding anything; but since I’ve only used a few colors, it should be pretty easy to read.


I’m not going to go through the entire thing — I think the code is pretty self-explanatory (not that you should have been able to cook this shit up in your head or anything… But once you see it in front of you, it’s pretty easy to understand what each part is). However, I’ll walk through the highlights. If there’s anything you see that you don’t understand, or isn’t clear, feel free to comment!  

A customized ‘Add’ button:

Notice that one of the first things I do is include some of sharepoint’s own XSL templates — I’ve pointed these out in red.  Then, I add the ‘call-template’ section, which is highlighted in blue, at the end of my XSL. This renders the line, the + icon, and the Add text. I’ve highlighted the text you can customize in bold — you’ll have probably noted that what the code does is call a template from sharepoint XSL’s with two parameters. The first parameter is the text you want to customize; the second is a value that is computed based on the list’s type — if it’s an announcement, it’s set to idHomePageNewAnnouncement, if it’s a document it uses idHomePageNewDocument, and so forth. I generally save my images and resources in SiteAssets. Does anybody have any counter-indications there? I found it to be useful to make sure versioning is enabled for the repo; this way, if any changes in my resources mess up the layout or anything, I can revert to a previous version.

An embedded image:
The image (purple in the code) was pretty easy; notice that in order to embed it nicely in the text, I just used float: right in the style attribute. 
Additional styling:
Let’s face it: faffing about with XSL is fun, but not very practical for a web designer. I’m particularly sucky at aesthetics, so I want to make sure that I can pass off as much of that kind of work into the right hands as possible and make it as easy as I can.
Note the presence of the DIV (in green) at the beginning of the XSL: it has a class attached to it (webfeed) so that it can be customized via CSS. Same goes for the image described above (boximage). This means that you can have a CSS file in your SiteAssets repository in which you can put in any formatting specifications for both the links of the feed and the image of the feed; note that in order to apply this CSS, you’ll have to edit the portal’s master page(s) to reference it.
The benefit of having a separate CSS file from the site theme CSS is that it can be made accessible to your team’s web designer without granting the designer any particular permissions to the sharepoint server. The CSS file will be versioned, so you can quickly revert if something gets screwed up in the layout or colors, and if the file is accidentally deleted it can be restored from the Recycle Bin (rather than permanently deleted from a NetBIOS share…)
CFN!

Addendum: I’ve also been asked to modify the behavior of the link; instead of opening a new page, it’s supposed to open up Sharepoint 2010’s new modal pop-up dialog box. What at first seemed really annoying and complicated turned out to be quite easy. Substitute this line:

<a href=”/Lists/MyList/DispForm.aspx?ID={@ID}”>
            <xsl:value-of select=”@Title” /></a><br/><br/>

With these lines:

<xsl:variable name=”formLink”>/Lists/MyList/DispForm.aspx?ID=</xsl:variable>

<a>
  <xsl:attribute name=”href”>
    <xsl:value-of select=”$formLink” />
    <xsl:value-of select=”@ID” />
  </xsl:attribute>


  <xsl:attribute name=”onClick”>
    <xsl:text>javascript:NewItem2(event, &quot;</xsl:text>
    <xsl:value-of select=”$formLink” />
    <xsl:value-of select=”@ID” />
    <xsl:text>&amp;RootFolder=&quot;);javascript:return false;</xsl:text>
    </xsl:attribute>


    <xsl:value-of select=”@Title” /></a><br/><br/>

What does this do? First, it attributes the URL to a variable, $formLink. Then, it renders that variable in the ‘href’ attribute of the link. Finally, it calls an AJAX function of Sharepoint’s that opens up a modal dialog box and renders the content of the URL specified in $formLink. Presto! Instant Sharepoint 2010 panache.