/

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


Changing the Table of Contents Appearance

Back to User Guides

TheTable 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

TOC Wrapping

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

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, from the WordPress dashboard navigate to  CM Table of Contents Pro → Settings → Table of Contents → Table of Contents - General Settings.

Within the Styling section identify the option labeled 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.

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, from the WordPress dashboard navigate to  ƒ

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 1and 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, from the WordPress dashboard navigate to CM Table of Contents Pro → Settings → Table of Contents → Table of Contents - General Styling.

Within the Styling section identify the option labeled Border styling, to the right of this there is an input field for the width of the border in pixels and a color selector to choose the color of the border. 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, from the WordPress dashboard navigate to CM Table of Contents Pro → Settings → Table of Contents → Table of Contents - General Styling.

Within the Styling section identify the option labeled Background color, click on the button to the right of this to 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 General Settings, you will see the relevant option.


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