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

4.1 Create new Style Classes
4.2 Customise the default XSL Stylesheet used by the TOC Web Part

5. Related Articles

---

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.

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

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)

• 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

• 
  
  Customizing Styles of Summary Links, Table of Contents, and Content By Query Web Parts
• 
  
  Creating custom landing pages in SharePoint Part 1 - TheTable of Contents Webpart
• 
  
  Customizing Styles of Table of Contents WebPart (TOC)

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

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

4.1 Create new Style Classes
4.2 Customise the default XSL Stylesheet used by the TOC Web Part

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:

<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

WebmasterHub.net - Webmasters Developmers and Designers

WebmasterHub.net is live!! WebmasterHub.net offers a directory of resources, tools and tutorials for webmasters, web developers and designers.

Register for free to receive free Search Engine Optimisation (SEO) including access to submit a site or resource to the resource directory and the Webmasterhub.net Bulk Pinger to bulk submit your site or blog to many popular sites and directories.