PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Customizing Styles of Table of Contents WebPart (TOC)

Posted by PANVEGA on February 11, 2009

I this post I gonna show you how easy it is to customize the default Tabel of Contents Webpart. This webpart can list pages, lists and subsites of a specific site, and this in a custom organization and presentation. When using it on the default master page, it shows the content in different levels with some nice indentation applied to it. The main modification is to the XSLT that the web part uses when rendering the contents.

the TOC Web Part consists of the following files to amend:

  • Header.xsl
  • LevelStyle.xsl
  • TableOfContentsMain.xsl

The solution  is adding custom CSS styles unit to the xsl templates. Luckily, the table of contents is one of those webparts which uses XSL style sheets to format its data and makes those available in the Style Library within your SharePoint site collection. Once inside this style sheet (LevelStyle.xsl), one can easily be edited to the different styles.

http://domain.com/Style Library/XSL Style Sheets/LevelStyle.xsl

1. When you add the Table of Contents from the Webpart Gallery and modify the WP properties

2. Expand the Presentation properties

3. You find 3 CSS Level Styles. Each style presents a seperate template in the LevelStyle.xsl file.

Level 1 Style .  You can specify the display style for the links that are at the first level of the Web Part navigation hierarchy by using this option. Level 1 links point to items that are directly under the root level you specify by using the Start from option in the Content section.

4. Go to SP Designer, check out the file and copy your favourite template.

5. Give the template a new name e.g. WTFirstLevel

<xsl:template name="WtFirstLevel" match="Level[@LevelTemplate='WTFirstLevel']">
    <xsl:variable name="LevelIndent" select="(number(@LevelNumber)-number(1))*number(14)+number(4)"></xsl:variable>
    <xsl:variable name="LeafIndent" select="$LevelIndent+6"></xsl:variable>
    <xsl:variable name="LeafIndentWithBullet" select="$LevelIndent+14"></xsl:variable>
    <div class="level-section">
      <div style="margin-{$Alignment}:{$LevelIndent};">
        <div class="level-band" style="background:#C0C0C0;font-weight:bolder;font-size:28pt!important;">
          <span id="header">
            <xsl:choose>
              <xsl:when test='string-length(@Path) > 0'>
                <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}">
                  <xsl:value-of select="@Title"/>
                </a>
              </xsl:when>
              <xsl:otherwise>
                <xsl:value-of select="@Title"/>
              </xsl:otherwise>
            </xsl:choose>
          </span>
        </div>
        <xsl:for-each select="child::Item">
          <div class="level-item-pos level-item level-bullet" style="margin-left:28px">
            <span id="header">
              <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}" class="myClass">
                <xsl:value-of select="@Title"/> (Pages)
              </a>
            </span>
          </div>
        </xsl:for-each>
      </div>
    </div>
  </xsl:template>

6. Add template name, variables, parameter information, and other details between the open and close tags in the ItemStyle.xsl file as needed.

7.  Add your custom CSS code for example or add some other content you wish. (change the bullet list to circle or just remove the “level-bullet”)

from level-item-pos level-item level-bullet  to  level-item-pos level-item

If you do not want to show the bullets from the lowest level

8. Save the file. With the page layout open in Design view, double-click the Table of Contents Web Part. Open your Webpart properties again and choose your custom template from the dropdown.

contentwebpart1

9. Now you can create a custom Template for each Level you want.

Note: Properties in external files have the same function as style attributes. For example p {color:blue; border:1px solid blue;} has the same effect as <P style=”color:blue; border:1px solid blue;”>.

Another interesting approach is for instance putting Sites and Pages to the same level. So that a user does not see any optical differences between both.  With CSS styles you can give Sites and Pages the same presentation. Here is a example where “show Pages” property is activated:

<div style="margin-{$Alignment}:{$LevelIndent};">
        <div class="level-band" style="background:#C0C0C0;font-weight:bolder;font-size:28pt!important;">
          <span id="header">
            <xsl:choose>
              <xsl:when test='string-length(@Path) > 0'>
                <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}">
                  <xsl:value-of select="@Title"/>
                </a>
              </xsl:when>
              <xsl:otherwise>
                <xsl:value-of select="@Title"/>
              </xsl:otherwise>
            </xsl:choose>
          </span>
        </div>
        <xsl:for-each select="child::Item">
          <div class="level-item-pos"
          style="background:#C0C0C0;font-weight:bolder;font-size:28pt;margin-left:0px;padding-left:4px;margin-top:6px;">
            <span id="header">
              <a href="{cmswrt:EnsureIsAllowedProtocol(string(@Path))}">
                <xsl:value-of select="@Title"/>
              </a>
            </span>
          </div>
        </xsl:for-each>
      </div>

customlevelnavigation1

With almost the same steps i described above you can customize a ContentQuery WP (CQWP) or a Summary Link Webpart (SLWP) as well.

http://domain.com/Style Library/XSL Style Sheets/ItemStyle.xsl

More Modification:

Showing horizontal 2 level under each site

I found this nice peace of information on this blog.

In SharePoint 2003, the table of contents webpart showed sub-sites (webs) horizontally under each main site. In SharePoint/MOSS 2007, it seems that the only items that are shown horizontally are the pages under each site.

toc-5

Solution:

Open the LevelStyle.xsl with e.g. SP Designer. At the very bottom is the template for the Horizontal with Small Title selection. It starts with “xsl:template name=”HorizontalSmallTitle” match=”Level[@LevelTemplate=’HorizontalSmallTitle’

The modification in this template is simply modifying the type of child item that is used. The default is Item and this just needs to be changed to Level:

Find: xsl:for-each select=”child::Item”

Change to: xsl:for-each select=”child::Level”

This change by itself with show the sub-sites horizontally with the pipe () separator, however, since there is a Level 2 style selection, the sub-sites also show up vertically and bolded (duplicated). In order to get rid of this, I gutted one of the other templates in which I thought would never be used and that is the one I set as the Level 2.

Save the modified XSL file and upload it back into the Style Library. Any existing Table of Content web parts will now use this XSL to render its contents. To make it appear correctly, within the web part tool pane, set the number of levels to 2, select the Horizontal with Small Title for the Level 1 style, and select the blank template for the Level style.

toc-3

Limited usage of parameters in the TOC

I can see that parameters are being passed to output the title “@Title” for the content title, and “@Description” for the description. However thats it what you can get without using a fix path to a value. I tried adding the CommonViewFields tag to an exported TOC Web Part. It didn’t like it, and just stripped the property that I put in there, regardless of if there were any values in there or not.

More useful links:

http://msdn.microsoft.com/en-us/library/ms551040.aspx

http://office.microsoft.com/en-us/sharepointserver/HA101674191033.aspx

http://office.microsoft.com/en-us/sharepointdesigner/HA101741441033.aspx

Advertisements

9 Responses to “Customizing Styles of Table of Contents WebPart (TOC)”

  1. […] Customizing Styles of Table of Contents WebPart (TOC) (tags: sharepoint sharepointwebparts) […]

  2. David said

    Hi,

    I´m modfi de style to the “Table Of Content Webpart”. But i have the problem with the fields wht i want display. I want retrieved the “SitoLogoUrl” information, could you exported more field with “CommonViewFields”? could you oriented me?

    Thank you fron spain

  3. PANVEGA said

    If you wonna know detail information about adding new fields to a webpart by using the common view fields, read my previous posts.

    https://panvega.wordpress.com/2009/01/07/introduction-in-the-content-query-webpart

    https://panvega.wordpress.com/2008/06/03/customize-itemstylexsl-for-contentquery-webpart

  4. Cheri said

    Thank you so much for this article. I searched far and wide, and this is the only good instructional article I could find on customizing TOCs. And actually everything worked pretty well. The only problem I am stuck on is how to better control the font color. I tried putting the ‘font-color’ attribute in the style section, similar to the line you have in red above. But although I can chance the font weight, size and background color, I can’t seem to change the font color. I also tried putting in link formatting but I don’t thing :link :active :vistited and : hover are supported in inline CSS because they’re psuedoclasses. Maybe I’m just writing it wrong. I don’t really know that much about CSS. Do you have any advice? I really need the font to be red and preferably a different font-family.

    Here is my code:

  5. Cheri said

    Thanks for the advice. Unfortunately, it didn’t seem to affect anything and the text is still black. At this point I am looking for any other way to accomplish my goal. My situation is that I need to have two left navigations on the page. Thus I was trying to put the TOC webpart above the regular dynamic (quicklaunch) nav in the left, in the masterpages. Before we had a custom nav piece there, but it is not security trimmed and we have two different security audiences on our site, so the nav changes for each. I thought the TOC webpart would be ideal. But if I can’t get the red text I don’t think my Marketing department is going to go for it.

    In any case, I am sure that what I have learned about the TOC will come in handy for something else in the future. I was able to successfully customize the font-size and font-weight, just not the color. Thank you for sharing such good information.

  6. Claus Andersen said

    Hi,

    Nice post – I was looking for this.

    Is there any way to filter on what is shown in the TOC? E.g. I want only to show the Sites, not the documents, news, search etc.

  7. JColtrin said

    Sorry the code didn’t come through, here it is again:

    0′>


     | 

    0′>


     | 

  8. Ivan said

    Hi, is it possible customize it and go deeper than the 3rd level??

    is it possible to insert this control instead of the quick launch menu?

    thanks all

    Vit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: