WordPress Table of Contents Plugin (CMTOC) - Style - CSS Adjustments

CSS Adjustments

You might need to further apply some css changes on the TOC style. Here is a short guide and few example you can use to make such changes with the WordPress Table of Contents plugin.

  1. You can always use the built-in browser "Inspect" feature to find out the exact class of the specific element you want to change:

    Where to find a class of the specific element - TOC Table of Contents WordPress Plugin
    Where to find a class of the specific element
  2. To apply a new CSS change or add a new one you need to have a place to apply custom css. It could be within your theme settings, adding it directly to your theme css file or by using an external plugin that supports custom css.

    You can also use custom CSS area in the plugin settings. You can find it by navigating to CM Table of Contents Pro → Settings → Table of Contents tab.

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

    Head to the Custom CSS section. You can put you CSS code to the Custom CSS area. Note: this option was introduced in version 1.5.3.

    Area for adding custom CSS - Table of Contents WordPress
    Area for adding custom CSS
  3. Some examples
    1. Changing the color or style of the title "Table of Contents" .cmtoc_table_of_contents_description { color:  blue; font-weight: 900; } 
    2. Change the color of the list numbering.cmtoc_table_of_contents_table { color:  blue; }

TIP: Making your custom CSS priority with !important

If your custom CSS is not working and appearing crossed out, it means other rules have higher priority.

CSS with low priority - WordPress Table of Contents Block
CSS with low priority

You can set your rule as more important by adding the !important property. 

For example, this line

.cmtoc_table_of_contents_table { color:  blue; }
Would become this line
.cmtoc_table_of_contents_table { color:  blue; !important; }

Read more about !Important: How to apply !important in CSS?

Quick Read

What is CSS

CSS allows you to make changes that WordPress, themes and even the plugins don't support. Be sure to test all changes before applying!

Learn more: General Support - Advanced - Custom CSS

CreativeMinds Can Help

If you prefer not modifying CSS and visual elements by yourself, CreativeMinds can help adapting CM plugins to your theme.

Learn more: Plugin Installation Service for WordPress by CreativeMinds

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.