WordPress Glossary Plugin (CMTG) - Custom CSS styling

Video Guide

Back to User Guide

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

Custom CSS styling

There are many ways to change CSS styling. In this guide we will show you how to use a plugin to add new classes and id attributes.

You can also add custom CSS code in the Additional CSS option in the WordPress customizer, or change your themes styles by using a child theme.

To style any element in this plugin you need to:

  1. Install an additional plugin that lets user to apply custom CSS styles: Visual Theme Customizer.
  2. Know how to use the browser tools Inspect function to find elements classes or id names.
  3. Use Visual Theme Customizer to apply new class/id attributes.


To customize the Tooltip container, we need to find its ID name. In this case: (id="ttcont").

How to find the container ID - WordPress as a Wiki
How to find the container ID

Open the Visual Theme Customizer plugin page and click on the Customize link.

Visual theme customizer
Visual theme customizer

Click on the CSS Editor icon on the left menu and write your css styles here.

CSS editor
CSS editor

Click on Save and then close the Visual Theme Customizer's edit mode.

Saving the changes
Saving the changes

Your new styles should be applied successfully now.

Example of applied CSS style - WordPress Knowledge Base Plugin
Example of applied CSS style

Commonly asked questions

In this section we answer the most common questions about the custom styling of various elements of the WordPress Glossary plugin.

  • How to style links on hover?
    • To style links on hover, find the links class name and add attributes for this class name with a ::hover pseudoclass. Example: .some_link_class::hover { } .
  • How to change the size of the font in the tooltip?
    • The best way to change the font size in the tooltip is by the option in Admin Dashboard → CM Tooltip → Settings → Tooltip. But it you want to change that in the CSS, the rule is: 
    • div#ttcont {font-size: 17px !important;}
    • But please note that using this rule will also change the font size of the Tooltip's title, so you need a separate rule for the title:
    • div#ttcont .glossaryItemTitle { font-size: 20px !important;}

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. 

Example of the element with low priority - Knowledge Base WordPress Plugin
Example of the element with low priority

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

For example, this line

.div#ttcont {font-size: 17px; }
Would become this line
.div#ttcont {font-size: 17px !important;}

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

More information about the WordPress Glossary 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.