Customize how highlighted glossary terms and definitions look

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

You can customize this a bit using custom CSS.

Terms

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 Settings > Style.
  2. Under the preview pane, select Custom CSS.
  3. Copy the code below and paste it into the Custom CSS window.
    /* 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
    • 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, see this quick reference for the available options.
  5. Once you've made your changes, Save your Style Settings. All glossary terms are now updated with the changes you've made.

In this sample, we've change the line width to 2px, made it a darker grey, and shifted it to a single dotted line instead:

Sample code

Which will produce this treatment:

Glossary term underlining based on the sample above

Definitions

The hover-over definition can also be customized. 

  1. Go to Settings > Style.
  2. Under the preview pane, select Custom CSS.
  3. 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;
    }
  4. You can change the font size and weight (bold vs. normal) by editing appropriately. The popover is done using Bootstrap. See their popover documentation for more options.
  5. Once you've made your changes, Save your Style Settings. All glossary definitions are now updated with the changes you've made.