CM Table of Contents (CMTOC) - Style - Changing the TOC Appearance and Placement
Changing the Table of Contents Appearance
The Table of Contents plugin has many options to change the TOC's appearance. This guide mentions some of these.
Table of Contents
- TOC Wrapping
- Adding/Modifying Bullet Points to Items
- Changing the Font
- Putting a Border Around the TOC
- Changing the Background Color
- Displaying The TOC in Two Columns
- 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: CM Table of Contents (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: CM Table of Contents (CMTOC) - Style - Modifying TOC Button (Floating TOC, Show/Hide)
Example
 |
More information about the CM 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 |