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.

Table of contents settings tab - Table of Contents WordPress
Table of contents settings tab

Wrapping - Choose between None, Left or Right.

Choosing wrapping side - WordPress Table of Contents Block
Choosing wrapping side

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:

    TOC example without text wrapping - Add Table of Contents WordPress
    TOC example without text wrapping
  • Left - The TOC will wrap text and be placed to the left, as shown:

    Text wrapping with TOC on the left side - Floating Table of Contents WordPress
    Text wrapping with TOC on the left side
  • Right - The TOC will wrap text and be placed to the right, as shown:

    Text wrapping with TOC on the right side - WordPress TOC Plugin
    Text wrapping with TOC on the right side

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.

Choosing list type - TOC Table of Contents WordPress Plugin
Choosing list type

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
Choosing square type of the list and saving the changes - WordPress Table of Contents
Choosing square type of the list and saving the changes

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

Examples of different list styles - Table of Contents WordPress
Examples of different list styles

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.

Examples of different font sizes - WordPress Table of Contents Block
Examples of different font sizes

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

Element styling settings - Add Table of Contents WordPress
Element styling settings

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.

TOC levels - Floating Table of Contents WordPress
TOC levels

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

Changing the font style - WordPress TOC Plugin
Changing the font style

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.

Border styling settings - TOC Table of Contents WordPress Plugin
Border styling settings

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.

Changing the border style - WordPress Table of Contents
Changing the border style

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.

Example of the custom border - Table of Contents WordPress
Example of the custom border

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.

Changing the background color - WordPress Table of Contents Block
Changing the background color

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

Using color picker - Add Table of Contents WordPress
Using color picker

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.

Example of the custom background color - Floating Table of Contents WordPress
Example of the custom background color

Displaying The TOC in Two Columns

Front-End Example

Displaying the TOC in two columns - WordPress TOC Plugin
Displaying the TOC in two columns

Settings

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

Enabling the two columns feature - TOC Table of Contents WordPress Plugin
Enabling the two columns feature

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

Show/hide button - WordPress Table of Contents
Show/hide button

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

Example of the floating TOC - Table of Contents WordPress
Example of the floating TOC

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
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.