SharePoint-InfoPath.com

The article below details the process required to override or replace default styles used by Table of Contents Web Parts (TOCWPs) displayed on SharePoint sites. Using these methods, it is possible to customise the styles of all existing TOCWPs in a Site Collection, or only TOC web parts on specific pages. Another benefit to creating new style classes to override or replace existing ones is that you can apply different classes to the horizontal and vertical layouts, which by default use the same class.

I have chosen to work with the more common presentation layouts, being the "Vertical with Boxed Title", "Vertical with Large Title" and "Vertical with Small Title" layouts. To test the new styles, I added a TOC Web part to a page in SharePoint and included the overridden style classes directly into head section the page. Once I am happy with the new styles, I can apply the classes to the global stylesheet to make them available to other pages and TOC Web Parts.

Once the Test TOCWP has been added to the page, I set the presention layouts for the first three levels to the layouts mentioned above in the respective order. This means that i can now adjust styles on the page and see the affect of the changes in a browser at the same time.

Default TOC Web Part XSL Style Sheet:
To get details of the default classes used by TOCWPs you can refer to the "http://siteroot/Style Library/XSL Style Sheets/LevelStyle.xsl" file. Alternatively, viewing the source of a page with a TOC Web Part will also indicate which classes are being used by the selected presentation layouts.

To alter the default classes, element positioning and layout used for TOCWP presentation layouts, you can do so by modifying this file (LevelStyle.xsl). This XSL template is referred to by all TOC Web Parts in a Site Collection to determine what classes to apply based on the specified presentation layouts.

Background Images:
To include background images using CSS in Table of Contents Web Parts you can configure the classes and styles to include the background images, then apply the updated classes and styles to TOC Web Parts by overriding the default classes, or applying new classes via the XSL template used to format TOC Web Parts. The images must be accessible to any user with access to the page with the custom TOC Web Part.

Applying The New Styles:
Once happy with the new classes and css styles, they need to be copied to an appropriate location that is accessible to all TOC Web Parts that you wish to have the new styles applied. This may be the global styleheet that is already in use by the site collection, or a new style sheet that can be applied in addition to existing style sheets. If it is only a sinlge TOC Web Part on one page that you would like customised, you can include the new styles directly into the page, or attach a stylesheet with the new styles to the required page only. I would like the new styles to be applied to all TOC Web Parts across the entire site collection, so I have copied the new styles into a separate style sheet, then attached the style sheet to the Master page used by all sites across the site collection.

Using SharePoint designer, it is easy to attach multiple style sheets to a page or master page without having to manually include with the <link rel="stylesheet" ...> element. From the Style Settings of a SharePoint site, you can also set or change the default stylesheet used by the SharePoint site, which will also be inherited by sub-sites if they are not using a custom style sheet as well, and are not using the global style sheet for the site collection.

The following provides more information and step by step instructions on how to Customise TOC Web Part Styles & CSS. A download is also provided with a sample style sheet and images for the TOC Web Part