SharePoint Development & Administration + InfoPath

The following explains (with examples), how to modify the Table of Contents Web Part (TOCWP) using CSS to display content from a SharePoint site and sub-sites based on the site navigation with a custom appearance. This allows content to be displayed dynamically by the web part based on the current site and any sub-site navigation and content without using Data Views or having to maintain link lists or similar.

There are a number of methods that can be used to customise the layout of the Table of Contents Web Part. Some methods will result in the new styles being applied to every TOCWP across the entire site collection, where others allow you to customise the styles for a specific TOCWP on only one, or a selection of pages. The first method that I use is to override the default style classes for the TOCWP. This allows flexibility with the application of the new styles, as the new style classes that override the default can be place in a global style sheet, or on a page containing a Table of Contents Web Part.

Before making changes to SharePoint's default styles (or any core configuration for that matter), you should ensure that the environment is backed up appropriately. Changes to core functionality and styles should always be completed and testing in a non-production environment prior to applying to live environment.















Contents:

Page 1
5. Related Articles

---

1. Table of Contents Web Part Configuration
The following is the specific configuration for the Table of Contents Web Part that will display using the customised styles. The following steps will provide the required configuration for the new styles in this example to be successfully applied. These settings can vary, but may produce results other than the output of this example.


1.1 Load the web Part Properties Pane, Set the "Start From" value
I have set the "Start From" address to a SharePoint site with a number of example sub sites and some customisation of the site-level navigation. You will need to set this to the address for the SharePoint site you with to display content from dynamically.


1.2 Apply "Content" Settings

• Show 3 Levels of Content (Checked)
  
• Don't Show content from Starting location (Unchecked)
  
• Show Pages (Checked)
• Don't Show Hidden Pages/Sites (Unchecked)

1.3 Apply "Presentation" Settings

• Header Style: Default
• Display Columns: 3
• Level 1 Style: Vertical with boxed title
  
• Level 2 Style: Vertical with large title
  
• Level 3 Style: Vertical with small title
  

1.4 Apply "Organization" Settings

• Sort contents as sorted in navigation

2. Using Background Images in Style Classes

If you are replacing or overriding the default styles for the TOC Web Part and want to include a background image, you need to ensure that the image address will be correct for all TOCWPs using the new styles. This can be achieved using relative urls from a stylesheet, where the image url is relative to the location of the style sheet. Alternatively, you could use the full url including the host name which will work as long as the SharePoint environment is accessed by all users using the same hostname. You can also use everything in the address after the hostname from the root of the site collection: "/graphics/toc-level-bg.jpg" which will also work if you are using AAM (Alternate Access mappings).

3. Customise by overriding CSS styles used on a page with a TOCWP

In this section, the default style classes are overridden with new CSS properties.

To obtain the correct element name/IDs and styles used by the Table of Contents Web Part, I used the default XSL templates used to format TOC Web Parts. I then applied CSS styles that override or replace the default styles for each of the required elements. The default XSL style sheets for TOCWPs can be found in the following location: "http:// /Style Library/XSL Style Sheets/LevelStyle.xsl"


The following table provides a list of the styles used for each of the presentation options available when configuring a TOCWP. Note that some CSS classes are used by multiple presentation options.

Presentation Label	Outer Container (div) CSS Class Name	Text Container (div) CSS Class Name	Text Class (span) CSS Class Name
Vertical	.level-section	.level-header	.headertitle
Vertical with boxed title	.level-section	.level-band	.headertitle-band
Vertical with large title	.level-section	.level-header	.headertitle-large
Vertical with small title	.level-section	.level-header	.headertitle-small
Vertical with descriptions	.level-section	.level-header	.headertitle
Horizontal	.level-section	.level-header	.headertitle
Horizontal with boxed title	.level-section	.level-band	.headertitle-band
Horizontal with large title	.level-section	.level-header	.headertitle-large
Horizontal with small title	.level-section	.level-header	.headertitle-small

All Table of Contents Web Parts are contained within a table with the ID "tocwp" and the class "toc-layout-main".

Adding new Presentation layouts for the Table of Contents Web Part:
If you would like the default presentation layouts for Table of Contents web parts accross a site collection to remain unchanged, but need to customise the styles of one or more TOC Web Parts, you can add additional presentation layouts. For details, see PANVEGA's post: Customizing Styles of Table of Contents WebPart (TOC).


In the examples below, I replace the default styles for the "Vertical with boxed title", "Vertical with large title" and "Vertical with small title" presentation option with a new styles including a background image, and the standard vertical list items of the TOC second level. Overriding default styles allows your to customise a TOCWP on a specific page, and not all across the entire site collection.

I chose the "Vertical with boxed title" option, as the CSS classes used to format this presentation option differ from more of the classes used by other presentation options. This meant that if overriding classes, the default XSL style sheet won't have to be edited to allow new styles to be applied without affecting other presentation options (Vertical/horizontal with large/small title). To modify the styles of presentation options other than Vertical with boxed title, you may need to create new style classes that are not currently in use, then replace the classes used by default via the XSL style sheet used by a TOCWP (See Part 3 of this article below).



3.1 Overriding Default Classes

The CSS styles used by a TOC Web Part can be customised by overriding the default style classes used by the Web Part. If overriding classes used to format a Table of Contents Web Part, the changes can be applied without modifying the XSL style sheets used to display the TOC data. To override an existing CSS class, you must rewrite using the same class name, then include the new styles or stylesheet link in the page after the default stylesheet has been loaded. Styles placed in the head section of a page should override default style sheets due to the cascading nature of CSS.



For the "Vertical with boxed title" option, the "level-band" class is used by the DIV container for the title text. Overriding this class in a style sheet used across the site collection will result in all TOC Web Parts displaying the custom styles for both the "Vertical with Boxed Title" and "Horizontal with Boxed Title" as they both share the same style classes.



Adding the styles directly to the page will allow you to override the styles of a single TOC Web Part on a specific page.


Override both "Vertical with Boxed Title" and "Horizontal with Boxed Title"

The following example classes will override the default classes used for the Vertical/Horizontal with boxed title layouts if included in the page appropriately. The names of the classes being overwritten are as follows. CSS properties are provided for each classs to format the TOCWP as shown in this example. The image set and stylesheet is also available for download below:


Style Classes:

• .level-band : Container for Title Text
  
• .headertitle-band : Class for title Text (Boxed Title)
  
• .headertitle-band a : Class for A tag within Title Text
  
• .headertitle-large : Class for title text (Large Title)
  
• .headertitle-small : Class for Small Title text
  
• .level-bullet : Class for Bulleted text (pages)
  

Image Set:
The following classes replace the default classes, and includes background images and layout attributes required to position and align elements. The styles and images have been configured to allow the width of a heading and other elements in a TOCWP to be dynamic, re-sizing as required to fit the page size.



Download the TOCWP Style sheets & Image Set



Styles:

.level-band {
background-image: url('button63685311_mid.PNG');
background-repeat: repeat-x;
background-color:#FFFFFF;
width: 100%;
height: 34px;
padding-left: 0px;
padding-top: 0px;
color: #FFFFFF;
margin:0px;
}

.headertitle-band
{
color:#FFFFFF !important;

background-image: url('button63685311_left.PNG');
background-repeat: no-repeat;
width: 100%;
height: 34px;
padding-left: 20px;
padding-top: 6px;
margin:0px;
}

.headertitle-band a
{
color:#FFFFFF !important;

background-image: url('button63685311_right.PNG');
background-repeat: no-repeat;
background-position: right top;
border: 0;

width: 100%;
height: 34px;
padding-right: 0px;
padding-bottom:0px;
padding-top: 6px;
margin:0px;
margin-top:-6px;
}

.headertitle-large
{
width: 100%;
padding: 6px;

background-image: url('LargeTitleFade.jpg');
background-repeat: repeat-x;
background-position: left top;
border-bottom-color: #D5E9FF;
}

.headertitle-small
{
background-image: url('arrow.jpg');
background-repeat: no-repeat;
height: 15px;
padding-left: 34px;
padding-top: 1px;
padding-bottom: 2px;
width: 100%;
border-bottom:1px #BFDFFF dotted;
}

.level-bullet {
margin-left: 34px;
padding-left:14px;

list-style-type: none !important;
background-image: url('page-icon.jpg');
background-repeat: no-repeat;
}




3.2 Applying the New Style Classes to Override the Default
If overriding the default styles, you need to make sure the styles are on the page with the TOC Web Part, in a Style Sheet which is loaded after the the SharePoint core.css file. You could also modify the styles in the default class in the core.css file, but making changes to the core.css style sheet in my opinion is not good practice. You should always at least create a new stylesheet and copy styles from core.css across that are to be overridden.


3.2.1 Applying to an existing (global) style sheet
A style sheet separate to the default core.css may be used to apply company styles and branding to sites and pages in the site collection. As configurations similar to this generally override default classes from the core.css stylesheet, adding new classes to override default TOCWP styles can be placed in the secondary style sheet. Alternatively, you could include the styles in a new style sheet, then import into the existing style sheet that is separate to core.css. Using this method will result in all TOC Web Parts across the site collection being rendered with the updated styles.

If you are not using a separate global stylesheet for company branding, you could place the updated CSS classes into a new style sheet then set the new style sheet as the style sheet for a SharePoint Site via the site's Master Page settings.

Note: If changing the style sheet used by a SharePoint site, you need to ensure that the new style sheet imports style sheets containing styles for company branding, or any that may have been used in the previous style sheet if it was not the default stylesheet. Any styles which have not been overridden in the new style sheet will default to the style classes in core.css.


3.2.2 Applying directly to a page in SharePoint
The new styles can be applied directly to a page with a TOCWP, allowing the styles to override the default core.css classes. Styles can be included in a page with a TOCWP by importing the stylesheet when editing the page with Sharepoint Designer, or by including the classes in a style tag in the head section of the rendered page.

Attach a new or additional stylesheet to a page using SharePoint Designer:

1. Open the "Manage Styles" pane (from the "Task Panes" menu).
   
2. Click the "Attach Style Sheet..." link
3. Browse to the location of the new style sheet, or paste the address into the URL field.
4. Ensure the "Current page" option is selected

Manage Styles (Sharepoint Designer)




















- Attach Style Sheet Dialog











Apply to the head section of the rendered page:

1. Open the "Manage Styles" pane (screenshot above).
2. Click the "New Style..." link
3. Type the name of the new wtyle into the "Selector" (eg ".level-band" )
4. Set the value for the "Define in" option to "Current Page"

- New Style Dialog


This will create a new <asp:Content... tag ( <asp:Content
ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> ) with a
<style.. > element containing the new style class. If there are already CSS
styles defined in an existing "PlaceHolderAdditionalPageHead" element,
SharePoint Design (SPD) may add the new styles to this instead of a new
element. Alternatively, you can add the element and style tag to the page
yourself: