Customize TOC Web Part CSS – Part 1
Customize TOC Web Part CSS
How to override default CSS styles/classes for one or more TOC Web Part in SharePoint
How to override CSS classes used by one or many Table of Contents web Parts (TOCWP) without affecting the default classes or XSL stylesheets. Using CSS, the styles of one or more TOC Web Parts can be customised by overriding the default classes and styles. By placing styles direcly into a page, or attaching a stylesheet with the updated classes to the page containing a TOCWP, the default classes can be overridden when the updated classes have the same name. This can be utilised to allow customisation of the TOCWP without haveing to modify core functionality or style sheets (core.css).
How to customise CSS styles of a single Table of Contents Web Part on a specific page
How to customise a single or specific set of Table of Contents Web Parts, but not others that may exist in a SharePoint site collection. By Attaching an additional style sheet to a page containing a TOCWP, or by including styles directly in the page allows the TOCWP to be cusomised without having to modify core styles.
How to apply additional Styles to a SharePoint Site, Page or existing CSS Style Sheet
How to incorporate a new stylesheet into a SharePoint site or page. There are a number of methods available for incorporating styles into a page on SharePoint, including associating the stylesheet as the style sheet to be used by the SharePoint Site, attaching an additional style sheet to a page using SharePoint Designer, or by including the CSS classes in a style tag in the head section of a specific page.
What CSS Classes Does a TOCWP Use by Default
How do I know which CSS classes to make changes to in order to customise a specific presentation layout for a Table of Contents Web Part? The following provides a table containing the main classes and elements used to render a TOCWP. The classes can be overridden or replaced with new ones to allow Table Of Contents Web Part styles to be customised.
How to differentiate the styles between the Horrizontal & Vertical presentation Layouts
Many of the Horizontal and Vertical presentation layouts available for a Table of Contents web Part are shared with other presentation layouts, making it hard to customise a specific one. For example, the “Vertical with boxed title” and “Horizontal with boxed title” layouts both use the same class for the outer div container and title text. Overriding CSS styles for one of these presentation layouts will affect TOCWPs on the page with wither of the two layouts. To differentiate styles between the Vertical / Horizontal layouts (or any others), the XSL style sheet used to define elements and CSS classes for TOC Web Parts needs to be modified to include differentiated classes for the various presentation layouts.
How to include a custom background image for Table Of Contents Web Part Titles using CSS
How to override or replace the default classes used by a Table of Contents Web Part to incorporate background images and an alternate layout. How to incorporate background images and CSS into a page or style sheet so that they are available to all TOCWP that require the new styles.
Free example image set and styles for Table of Contents Web Part
Download a free example image set for use as background and bullet images for a Table of Contents web Part. Style Sheets are included to allow default classes to be overridden or replaced with new styles.
Incorporate company Branding into TOCWP Styles
Customise the CSS styles and classes used by a Table of Contents Web Part to include Company Branding. Apply company branding and theme (fonts, colours, images) into a TOCWP in SharePoint.
See Customize TOC Web Part CSS for details.