WordPress Table of Contents Plugin (CMTOC) - Style - Changing the TOC Appearance and Placement

Changing the Table of Contents Appearance

Back to User Guides

The WordPress Table of Contents plugin has many options to change the TOC's appearance. This guide mentions some of these.

Table of Contents

1. TOC Wrapping
2. Adding/Modifying Bullet Points to Items
3. Changing the Font
4. Putting a Border Around the TOC
5. Changing the Background Color
6. Displaying The TOC in Two Columns
7. Editing the TOC button and enabling the Floating TOC

TOC Wrapping

You can find some general settings about the TOC placement under Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents tab → General Settings section.

Wrapping - Choose between None, Left or Right.

Note that, in order for wrapping to work, the element next to the TOC can't have the parameters "position:relative" or "position:absolute". Learn more about the position property in CSS.

• None - The TOC will not wrap text. Instead, it will occupy all the necessary horizontal area, as shown:

  

• Left - The TOC will wrap text and be placed to the left, as shown:

  

• Right - The TOC will wrap text and be placed to the right, as shown:

  

Adding/Modifying Bullet Points to Items

To add bullet points or change the style of the bullet points, navigate to Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents tab → General Settings section.

Within the General Settings section identify the option List type. This setting has a drop down menu with a variety of different bullet point style options. Select the style that you would like to use:

• None 
• Circle
• Square
• Numbers
• Nested numbers
• Upper Roman
• Lower Roman
• Upper Alphabet
• Lower Alphabet

Once the chosen list type / bullet point style has been chosen scroll to the bottom of the page and click Save Changes.

Changing the Font

Would you rather the Table of Contents was a little larger or smaller? It is possible to style the font that appears in the Table of Contents through the Plugin Settings.

To modify the font of the Table of Contents, on the same tab Table of Contents, head to the Elements Styling section. 

Each different level that appears in the TOC is defined as a level, the first / largest by default is Level 0. The next one down is Level 1 and so on.

Change the font size, color, weight, decoration and style using the Configuration settings.

Once you have made the changes you wished to make to the TOC text, scroll to the bottom of the settings and click Save Changes.

Putting a Border Around the TOC

To put a border around the Table of Contents, navigate to Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents tab → General Styling section.

Within the Border styling section identify the options Border width and Border color. Define how many pixels the border should be and choose a color for it.

Choose the color from either the color selector or enter a hexadecimal color. When the desired color has been chosen scroll to the bottom of the page and click Save Changes.

Changing the Background Color

It is possible to change the background color of the table of contents through the plugin configuration settings. This can help the TOC blend into the website more or to help it stand out more.

To change the background color of the Table of Contents, navigate to Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents tab → General Styling section.

Identify the option Background color, and click on it to open Select Color.

Choose the color from either the color selector or enter a hexadecimal color. When the desired color has been chosen scroll to the bottom of the page and click Save Changes.

Displaying The TOC in Two Columns

Front-End Example

Settings

Under the General Settings section, you will see the relevant option.

Editing the TOC Button and Enabling Floating TOC

The Show/hide button appears by default above and to the right of the Table of Contents. There are several options for this within the Plugin Settings. Learn more: WordPress Table of Contents Plugin (CMTOC) - Style - Modifying TOC Button (Floating TOC, Show/Hide)

Example

Floating TOC 

The plugin also has a floating TOC option. This persistent button will be seen while the user navigates the content. Clicking it will trigger the TOC, as shown below. Learn more: WordPress Table of Contents Plugin (CMTOC) - Style - Modifying TOC Button (Floating TOC, Show/Hide)

Example

	More information about the WordPress Table of Contents Plugin Other WordPress products can be found at CreativeMinds WordPress Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center