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.
Posts
2 comments:
Hi could you help me? This thing is not working for me....
Thanks.
Hi @Kandarp,
Can you please explain what is happening when it doesn't work for you, including details of any error messages that you may be seeing and the method you are using to include or link the new CSS to pages containing TOC web parts.
Thanks
Post a Comment