Style the letters at the top of the glossary

When you view the glossary, all letters in the alphabet are displayed across the top for quick navigation.

When no glossary terms begin with a letter, that letter is displayed as normal text. The letters containing glossary terms are hyperlinked, and will appear the same color as other hyperlinks in your knowledge base.

You can customize the color and look and feel of inactive (no hyperlink) and active (hyperlinked) glossary header letters.

Active letters

To change the color of the glossary active/hyperlinked letters:

1. Go to Settings > Style.
2. Make sure you're viewing the Custom CSS section.
3. Copy this code and paste it into the bottom of your Custom CSS:

   /* Set color of active Glossary navigation letters */
   a.glossary-jump-to-link:not(.btn) {
     color: #1f9baa;
   }

4. To change the color, update the hex codein line 3 to be the color you'd like. You can also add additional styling, like changing the font-weight, font-family, underlining, etc.
5. If you'd like, you can also update the color of the link on-hover. To do so, repeat the steps above but copy and paste this code:

   /* Set color of active Glossary navigation letters on-hover*/
   a.glossary-jump-to-link:not(.btn):hover {
     color: #fc9f00;
   }

6. Be sure to Save your changes.

Inactive letters

To change the color of the glossary inactive/unhyperlinked letters:

1. Go to Settings > Style.
2. Make sure you're viewing the Custom CSS section.
3. Copy this code and paste it into the bottom of your Custom CSS:

   /* Set color of inactive Glossary navigation letters */
   span.glossary-jump-to-link {
     color: #1f9baa;
   }

4. To change the color, update the hex code in row 2 to be the color you'd like. You can also add additional styling, like changing the font-weight, font-family, underlining, etc.
5. Be sure to Save your changes.

See an example

Here, I've added Custom CSS to adjust the active glossary letters to be blue, the inactive letters to be a light orange, and active glossary letters to turn a dark orange and get underlined when they're hovered over:

Sample letter custom CSS

And here's the sample end-product, where I have active terms in A and S and I'm hovering over the S:

Sample letter treatment