WordPress Glossary Plugin (CMTG) - Custom CSS styling

Video Guide

Back to User Guide

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.

Example

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

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

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

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

Your new styles should be applied successfully now.

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. 

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