WordPress Table of Contents Plugin (CMTOC) - Style - Modifying TOC Button (Floating TOC, Show/Hide)
Modifying the Show/hide Table of Contents button
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 WordPress Table of Contents plugin settings.
Example
For these settings, navigate to Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents tab.
Hide Table of Contents by Default
To hide the TOC by default, under the Default appearance section enable the setting Collapse Table of Contents by default.
Appearance of the 'Show/Hide' button
The font size, color and style of Show/hide button can be manipulated inside the Title Style option.
- Show/hide label alignment - Choose between:
- Left edge
- Near the title text
- Right edge
- Show/hide toggle styling - Define:
- Size
- Color
- Weight
- Decoration
- Style
Floating Button
What Is It
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:
Example
Settings
- Show Button - Turn on or off.
- Render button in content area - The TOC button will appear only when the article/post content is visible on screen during scrolling. When the content is out of screen, the button will disappear.
- Hide main TOC - Hides the main Table of contents and only shows the floating TOC. Can only work if "Render button in content area" is enabled.
- Button Text - Front-End label.
- Button styling:
- Background color
- Text color
- Opacity
- Border color
- Border width
- Table of contents styling:
- Text font-size
- Text color
- Background color
- Background opacity
- Border width
- Border color
- Content height
- Auto - Adapts the height based on the TOC
- Full Height - Occupies the full page height
- Contents Position - Where it will appear on the page
- Top
- Middle
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 |