Scenario:
Single Web Part being used to pass filter values to multiple web parts on a page. After making changes to Web Part connections, only the most recent connection works. All other connections previously configured on the source web part no longer worked. The Web Parts being connected to were no longer displayed on the page. In the end I was able to resolve the issue, but was not sure of the underlying cause. My suspicions lean toward the custom web parts being used not being able to handle Web Part Connections properly.
Issue:
After completing the initial configuration of the various web parts on a page, I started configuring web part connections between the web parts. I noticed that after configuring a connection, that it would be the only connection that works once applied. Any previously configured connections to other web parts no longer worked and the web parts disappeared off the page.
I found that if configuring the connection from the source or destination web parts (“Send data to..” or similar) by editing the page using the browser, the web Part connections we able to be configured properly, and worked as expected once applied. If continuing to use the browser to configure or make changes to Web Part Connections, the changes remained in place on all web parts once applied.
I then wanted to adjust the text displayed by a web part if there were no items that matched the filter criteria, which I did using SharePoint Designer as the Web Part was a Data View. I loaded the page in SharePoint Designer and made the changes to the Data View Web Part, but upon saving the changes to the page, all except one Web Part Connection stopped working.
When viewing the page in a browser once saved, all Web Parts previously connected to the source web part were not visible on the page. Adjusting or re-setting the Web Part connection settings using SharePoint Designer had no affect on the connections once saved again and viewed in a browser.
My next step was to revert back to using the browser to configure the Web Part Connections. I then found that if trying to adjust the configuration of the connections, or even remove them using the browser was no longer working at all (because of making changes using SharePoint Designer). Removing the connections using the browser did not work, and if the page was opened using SharePoint Designer, the connection details were still inside the <SPWebPartConnections> element even after attempting to remove using the browser. Similarly, if adjusting the configuration of a connection using the browser, the changes seem to work for that particular connection after pressing ok, but after exiting edit mode, the web parts were not visible.
Solution:
To resolve the Web Part Connection issues, I needed to remove all connections using SharePoint Designer, then manually remove the connection details from the <SPWebPartConnections> element. Once this was done, the web parts were visible on the page again, with no Web Part connections configured.
Note: If further changes need to be made to the page or web parts using SharePoint Designer, it needs to be done here, before configuring the connections using the browser or the same issue will arise.
Using the browser, I re-configured each Web Part Connection from scratch, ensuring that the settings were being applied successfully each time. Once complete, I published the changes and did some testing until I was satisfied that the filter values passed by web part connections were working as intended.
I am not sure why the connections were playing up, as I have not come accross this issue before. In the case where I may forget that using SharePoint Designer to make changes to this page will break it, I have documented the process above. If anyone knows an explanation of the cause, I would be very interested to find out.
Thursday, July 22, 2010
Web Part Connections Not working - Web Parts Disappearing off page
Labels:
MOSS 2007,
SharePoint Designer,
SPD,
Troubleshooting,
Web Parts
Sunday, July 18, 2010
Can't Deploy Solution Once Added to Solution Store - SharePoint (MOSS 2007)
Can't Deploy Solution Once Added to Solution Store Via Central Admin
I tried deploying a custom Web Part solution to a MOSS 2007 environment via the Solution Management page in Central Admin. I was able to select the solution, time to deploy (now) and the Web Applications to deploy to, then press OK to initiate the process. From here I am taken back to the Solution Management page, where the solution I wish to deploy has the status “Deploying(scheduled at ... )”. After a few seconds and a page refresh, the status returns to “Not Deployed” and the “Deployed To” value remains as “None”.
Issues Deploy Solution using STSADM
I was able to add the solution to the solution store using the STSADM command line tool, but when trying to deploy the solution to Web Applications hosting SharePoint, the process didn't complete successfully although it states that it did.
If I open the Solution Properties, the Last Operation Result and Details both state “The solution was successfully deployed”, but the Deployment Status is “None”.
As there are multiple servers running in the farm, my first thought that deployment timer jobs were not being executed properly on each server.
STSADM - Deploy Solution on Frontend
My Solution, was to manually deploy the solution locally using STSADM on the frontend server. The following command allowed me to deploy the solution to site collections accross the farm:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\BIN>stsadm -o deploysolution -name "WebPartName.wsp" -allcontenturls -local -allowGacDeployment
After manually running this command, the result of the STSADM operation was: “Operation completed successfully”. When viewing the list of solutions installed, the status for the new Web Part solution had updated to “Deployed”, with the “Deployed to” column stating the applications in which the solution was deployed. I was then able to activate the solution for the site collection, via the Site Collecion Features.
References:
I tried deploying a custom Web Part solution to a MOSS 2007 environment via the Solution Management page in Central Admin. I was able to select the solution, time to deploy (now) and the Web Applications to deploy to, then press OK to initiate the process. From here I am taken back to the Solution Management page, where the solution I wish to deploy has the status “Deploying(scheduled at ... )”. After a few seconds and a page refresh, the status returns to “Not Deployed” and the “Deployed To” value remains as “None”.
Issues Deploy Solution using STSADM
I was able to add the solution to the solution store using the STSADM command line tool, but when trying to deploy the solution to Web Applications hosting SharePoint, the process didn't complete successfully although it states that it did.
If I open the Solution Properties, the Last Operation Result and Details both state “The solution was successfully deployed”, but the Deployment Status is “None”.
As there are multiple servers running in the farm, my first thought that deployment timer jobs were not being executed properly on each server.
STSADM - Deploy Solution on Frontend
My Solution, was to manually deploy the solution locally using STSADM on the frontend server. The following command allowed me to deploy the solution to site collections accross the farm:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\BIN>stsadm -o deploysolution -name "WebPartName.wsp" -allcontenturls -local -allowGacDeployment
After manually running this command, the result of the STSADM operation was: “Operation completed successfully”. When viewing the list of solutions installed, the status for the new Web Part solution had updated to “Deployed”, with the “Deployed to” column stating the applications in which the solution was deployed. I was then able to activate the solution for the site collection, via the Site Collecion Features.
References:
- Deploysolution: Stsadm operation (Office SharePoint Server)
- Deploying a Solution
- STSADM AddSolution and DeploySolution Object Reference not set to an Instance of the Object error
- Proper stsadm commands to update SharePoint Solution/Feature
- Having problems installing the latest 20 sample SharePoint applications?
- Problems installing a custom solution - Access to path ... denied
- stsadm -o deploysolution -immediate is not immediate at all
- STSADM problem
Sunday, July 11, 2010
Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007 - Page 2
The following is Page 2 of a two page article relating to modifying the styles of the Table of Contents web Part (TOCWP) for SharePoint.
Go to PAGE 1 of Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007.
Contents:
Page 1
Article Overview
1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
5. Related Articles1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
4. Replacing CSS Classes
This section explains how to create and apply new styles to specific presentation options for a Table of Contents Web Part. Once the new classes have been created, you need to also follow the steps later in this section relating to modifying classes via the default XSL stylesheets. The new classes will need to be included in the XSL templates used by TOC Web Parts for the site collection for the changes to be applied. Using this method would also allow you to differentiate the styles between the "Vertical with Boxed Title" and "Horizontal With Boxed Title" level presentation options, and any others if required. The replaced styles will affect all TOCWP in the site collection, so a high level of caution should be maintained.
4.1 Create new Style Classes
Firstly, I created a new CSS class for the Vertical with Boxed Title elements. For the purpose of this exercise, I have named the new class "level-band-new", which replaces the "level-band" class used when displaying the TOC Web Part to format the Vertical Boxed Title Cell. If you would like to modify the title text only, creating a class to replace the "headertitle-band" class should also work ("headertitle-band-new" example below). I have used the same styles used in earlier sections of this article relating to overriding default styles, with updated class names.
The steps below apply to a Table of Contents web Part that is configured as specified in Part 1 of this article. Please ensure that you have followed the steps to allow the new styles to be applied from the examples. Different classes and XSL templates (most likely within LevelStyle.xsl) will need to be modified to allow styles to be replaced for prosentation options other than the following, which are also explained in part 1.
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
New Style Classes:
- .level-band-new : Container for Title Text
- .headertitle-band-new : Class for title Text (Boxed Title)
- .headertitle-band-new a : Class for A tag within Title Text
- .headertitle-large-new : Class for title text (Large Title)
- .headertitle-small-new : Class for Small Title text
- .level-bullet-new : 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
New Styles:
| Original Class Name | New Class Name | Styles |
| .level-band | .level-band-new | .level-band-new { 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 | .headertitle-band-new | .headertitle-band-new { 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 | .headertitle-band-new a | .headertitle-band-new 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 | .headertitle-large-new | .headertitle-large-new { width: 100%; padding: 6px; background-image: url('LargeTitleFade.jpg'); background-repeat: repeat-x; background-position: left top; border-bottom-color: #D5E9FF; } |
| .headertitle-small | .headertitle-small-new | .headertitle-small-new { 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 | .level-bullet-new | .level-bullet-new { margin-left: 34px; padding-left:14px; list-style-type: none !important; background-image: url('page-icon.jpg'); background-repeat: no-repeat; } |
Apply the new Styles to make Available for Use by the TOCWP
There are a number of methods that can be used to apply additional styles to pages on SharePoint containing a TOCWP. Each require you to include the CSS classes into the page by doing one of the following:
- Setting a stylesheet with the new styles as the stylessheet for the SharePoint Site
- Including into an existing stylesheet which is already included used by SharePoint sites/pages, but not core.css.
- Including directly into the page containing the TOCWP.
Each of the above methods are explained in more detail, including instructions for implementation in Part 3.2 Applying the New Style Classes to Override the Default.
4.2 Customise the (default) XSL Style Sheet to the TOCWP
I was unsuccessful when attempting to apply a custom set of XSL stylesheets
to a specific TOC Web Part on a page. If anyone knows how to do this, I would
be very interested to find out the process. My attempt was update the link to
the stylesheets included in the TOC Web Part by default, to point to my
customised version of each stylesheet. I found that this had no affect on the
styles of the TOC Web Part, and needed to modify the default stylesheets for the
changes to be applied. I also found that removing the "<xsl:import href=... "
elements from inside the "<xsl:stylesheet"
element within the TOCWP altogether didn't stop the Web Part from working, which
I assume is why attempting to import alternate stylesheets into the Web Part was
unsuccessful.
to a specific TOC Web Part on a page. If anyone knows how to do this, I would
be very interested to find out the process. My attempt was update the link to
the stylesheets included in the TOC Web Part by default, to point to my
customised version of each stylesheet. I found that this had no affect on the
styles of the TOC Web Part, and needed to modify the default stylesheets for the
changes to be applied. I also found that removing the "<xsl:import href=... "
elements from inside the "<xsl:stylesheet"
element within the TOCWP altogether didn't stop the Web Part from working, which
I assume is why attempting to import alternate stylesheets into the Web Part was
unsuccessful.
The following processes allowed me to customise the default styles for the Table Of Contents Web Part, however the new style classes are then applied to all TOC Web Parts accross the site collection.
4.2.1 Locate the default TOCWP XSL Stylesheets
4.2.1 Locate the default TOCWP XSL Stylesheets
The XSL stylesheets associated with the Table of Contents Web Part are generally located in the following library of a SharePoint (MOSS) site collection:
- http://sitecollectionurl/Style Library/XSL Style Sheets/Header.xsl
- http://sitecollectionurl/Style Library/XSL Style Sheets/LevelStyle.xsl
- http://sitecollectionurl/Style Library/XSL Style Sheets/TableOfContentsMain.xsl
The main Style sheet I needed to work with was the LevelStyle.xsl sheet, which contains the template html and style classes for the various level types used by the TOCWP. For the purpose of this exercise, I customised the default "Vertical with boxed title", "Vertical with large title" and "Vertical with small title" presentation options by replacing the default styles defined in the XSL style sheet, with the new style classses from the table above.
4.2.2 Replacing Default CSS Classes in LevelStyle.xsl
VerticalBoxedTitle: (approx. line 41)
VerticalLargeTitle:(approx. line 73)
VerticalSmallTitle:(approx. line 105)
Once the modified XSL Style Sheet has been applied, Table of Contents web Parts accross the site collection will be rendered using the new classes. You need to ensure that the CSS styles are available to each TOCWP by included in the page using one of the method described earlier in the article.

VerticalBoxedTitle: (approx. line 41)
- find: <div class="level-band">
- replace with: <div class="level-band-new">
- Find: <span id="header" class="headertitle-band">
- Replace with: <span id="header" class="headertitle-band-new">
- Find (within VerticalBoxedTitle): <div class="level-item-pos level-item
level-bullet"> - Replace with: <div class="level-item-pos level-item level-bullet-new">
VerticalLargeTitle:(approx. line 73)
- Find: <span id="header" class="headertitle-large">
- Replace with: <span id="header" class="headertitle-large-new">
- Find (within VerticalLargeTitle): <div class="level-item-pos
level-item level-bullet"> - Replace with: <div class="level-item-pos level-item
level-bullet-new">
VerticalSmallTitle:(approx. line 105)
- Find: <span id="header" class="headertitle-small">
- Replace with: <span id="header" class="headertitle-small-new">
- Find (within VerticalSmallTitle): <div class="level-item-pos
level-item level-bullet"> - Replace with: <div class="level-item-pos level-item
level-bullet-new">
Once the modified XSL Style Sheet has been applied, Table of Contents web Parts accross the site collection will be rendered using the new classes. You need to ensure that the CSS styles are available to each TOCWP by included in the page using one of the method described earlier in the article.

5. Related:
Page 1: Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007
Labels:
CSS,
SharePoint Designer,
TOCWP,
UI,
Web Design,
Web Parts,
XSL
Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007 - Page 1
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
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
1.3 Apply "Presentation" Settings
1.4 Apply "Organization" Settings

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).
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.
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:
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:
Manage Styles (Sharepoint Designer)


- Attach Style Sheet Dialog

Apply to the head section of the rendered 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:
View Page 2 of this article for XSL Style Sheet and CSS Class manupulation for Table of Contents Web Parts:
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
Article Overview
1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
5. Related Articles1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
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://
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:
- Open the "Manage Styles" pane (from the "Task Panes" menu).
- Click the "Attach Style Sheet..." link
- Browse to the location of the new style sheet, or paste the address into the URL field.
- Ensure the "Current page" option is selected
Manage Styles (Sharepoint Designer)



Apply to the head section of the rendered page:
- Open the "Manage Styles" pane (screenshot above).
- Click the "New Style..." link
- Type the name of the new wtyle into the "Selector" (eg ".level-band" )
- Set the value for the "Define in" option to "Current Page"

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:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> <style type="text/css"> classes... </style> </asp:Content>
View Page 2 of this article for XSL Style Sheet and CSS Class manupulation for Table of Contents Web Parts:
Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007 - Page 2
Labels:
CSS,
SharePoint Designer,
TOCWP,
UI,
Web Design,
Web Parts,
XSL
Subscribe to:
Posts (Atom)
