Topic display: Change Quick Links style and/or add header

In a topic display category, the Quick Links section looks like this by default:

Here in our Support KB, we add a "Table of Contents" header with a border, change the icon displayed, and the colors. So ours looks like this:

Interested in making a similar set of changes? Below, we walk through the various elements on how we did it.

Change the bullet points to an icon

To change the bullet points to the right-pointing caret, we add some Custom CSS and remove some existing Custom CSS (if it exists!). This uses our existing integration with Font Awesome.

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Copy the CSS below and paste it in to the CSS pane. If your knowledge base already has a lot of CSS in it, see if you have a section for Topic Category styles and add it there.

   /* In topic display categories, add > before the toc items */
   .topic-toc-item::before {
     font-family: 'FontAwesome';
     content: "\f105" !important;
     color: #F8B88B;
     font-size: 12px;
   }

4. The code above sets the icon to be our brand-specific light orange color. To use a different color, adjust the hex code listed in row 5 of the code from #F8B88B to the color of your choice.
5.  The code above sets the icon displayed to be a >. You can update this to use nearly any FontAwesome icon you'd like. To adjust the icon, replace the \f105 with the content value for another FontAwesome icon:
   1. You can see the content value if you open an icon in FontAwesome. Near the top, they'll list a Unicode value (they often begin with f). You can copy that Unicode value and replace the content value in row 4. Be sure to keep the slash and the quotes, so your value should still have "\fxxx" in the format.
   2. For example, if we wanted to use the circle plus icon:
      We would use this code in row 4: content: "\f055" !important;
6. Optional: You may need to play with the pixel size (px) of the font-size listed, as we picked one that looked good for our default font sizes and family.
7. If your knowledge base already has a lot CSS in it, you may also need to remove some default CSS we add. If your CSS had the Topic Category styles section, you'll want to remove the third set of styles defined in that section:

   /* change quick links styles */
   .hg-minimalist-theme  .topic-toc-item {
     margin-bottom: 10px;
     display: list-item;
     line-height: 1.2;
   }

8. Delete that code completely.
9. Be sure to Save your changes! (And if something goes awry, you can also Style Settings rollback to previous save to undo it!)

Change the background color and borders

We've also tweaked the background color and the borders slightly in our example. You certainly don't have to do that, but here's the Custom CSS we added to Settings > Style to achieve that look:

/* Change background color and borders */
.topics-toc-cntr {
  background: #FAFBFC;
  border: 1px solid #E6E6E6;
  border-radius: 5px;
}

You can add this CSS into the same section as you added the icon-adjusting CSS above.

Add the Table of Contents header

For this part, we run a script in the Article Custom HTML to create a div to house the table of contents header and insert it. First, we add a script to the Custom HTML to handle the div itself; then, we add some Custom CSS to style that div.

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom HTML is selected.
3. Select Article from the Custom HTML dropdown.
4. Copy the code below and paste it in to the bottom of the HTML pane.

   <script>
     //This script will add a "Table of contents" title into the Quick Links of a topic display category, formatted appropriately.
     $(function() { 
       //check if the .topics-toc-cntr exists and has col-md-6 divs in it (means it spans two columns and has extra padding)
       if( $('.topics-toc-cntr div.col-md-6').length > 0) {
         //Insert Table of contents with -col class in before the first column.
         $("<div class='td-toc-col'>Table of contents</div>").insertBefore(".topics-toc-cntr div.col-md-6:first-of-type");
       } else {
         // No .col-md-6 means no columns, so insert Table of contents without col class so it is properly aligned.
         $("<div class='td-toc'>Table of contents</div>").insertBefore(".topics-toc-cntr .topic-toc-item:first-of-type");
       }
     }); 
   </script>

5. If you'd like to use a header other than Table of Contents, replace Table of contents in rows 7 and 10 with the text you'd like to use. Here, we've replaced it with In this article:
   
6. Be sure to Save your changes.

Once you've added that header, you'll need to style it, too. We add some Custom CSS to Settings > Style, in the Topic Category styles section (if it exists):

1. Still in Settings > Style, select Custom CSS below the preview pane, instead of Custom HTML.
2. Copy the CSS below and paste it in to the CSS pane. If your knowledge base already has a lot of CSS in it, see if you have a section for Topic Category styles and add it there:

   /* Script in Custom HTML > Article adds Table of contents div with .td-toc and .td-toc-col classes, style that */
   .td-toc,
   .td-toc-col {
     border-bottom: 1px #E6E6E6 solid; /* Add a border underneath the header */
     font-weight: bold; /* Set to bold, otherwise default font weight is used */
     color: #1D284F; /* Override default color */
     padding-bottom: 10px; /* Add some space below the header/above the border */
     margin-bottom: 10px; /* Add equal amount of space below the border/above the article list */
   }
   
   /* Extra padding to the ToC div when there are multiple columns so the header indents to match the content */
   .td-toc-col {
     padding-left: 15px;
   }

3. Be sure to Save your changes.  (And if something goes awry, you can also Style Settings rollback to previous save to undo it!)

You should be able to play around with some of these settings to get the look and feel you're going for. For example, if you don't want a border between the header and the body content, you can remove lines 4, 7, and 8 from the CSS sample. If you don't want to bold the header, you can remove row 5.