Customize how highlighted glossary terms and definitions look

The default highlighting of a glossary term looks like this: test. 

If you'd like to change that treatment, you can add custom CSS to style:

• The glossary term itself (with the double underline)
• The definition that displays on-hover

Refer to the detailed instructions for each below.

Customize glossary term

You can customize the look and feel of your glossary terms (the double underline) to change the thickness of the lines, the color, and the line style. To do so:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Copy the code below and paste it into your Custom CSS.

   /* Change glossary term underlining look */
   .ko-glossary-term {
     border-bottom: 3px #bbb double;
   }

4. You can make changes to the look by editing:
   • The thickness of the underlines: change 3px to the thickness you'd like to use. Lower pixels are thinner; higher are thicker.
   • The color of the underlines: change #bbb to the color of your choice. You can use a hex code or an rgb value.
   • The style of the line: change double to the style of your choice, using standard border-style options (double, dashed, dotted, etc.). If you're unfamiliar with border-style, refer to this quick reference for the available options.
     For example, this code would change the line width to 2px, make the underline a darker gray, and shift it to a single dotted line:

     /* Change glossary term underlining look */
     .ko-glossary-term {
       border-bottom: 2px #969696 dotted;
     }

5. Be sure to Save your changes. All glossary term underlining will now use the style you added.

For example, this code would change the line width slightly thinner, make the underline a darker gray, and shift it to a single dotted line:

/* Change glossary term underlining look */
.ko-glossary-term {
  border-bottom: 2px #969696 dotted;
}

Which will produce this treatment:

Glossary term underlining based on the sample above

Definitions

To customize the look of the hover-over definition, follow these steps:

1. Go to Customize > Style (HTML & CSS).In the Customize HTML, CSS, and JS section, select Custom CSS.
2. Copy the code below and paste it into the Custom CSS window.

   /* Change on-hover glossary definition display */
   span.ko-glossary-term + .popover {
     font-size: 14px;
     font-weight: normal;
     line-height: 1.2;
   }

3. You can change the font size and weight (bold vs. normal) by editing appropriately. The popover is done using Bootstrap. Refer to their popover documentation for more options.
4. Be sure to Save your changes. All glossary definitions will now use the style you added.