Article look and feel

Change the way content displays in articles: style numbered lists, add tables of contents, create tabs or accordion sections, and more.

Articles

Article Table of Contents
For long articles, you may want to create create a table of contents inside your articles with links to different sections of content. Rather than use manually-created anchors, you can save a bunch of time on setup by using one of our snippets. ...
Split up article content into tabs
Overview Sometimes, you want to be able to split an article into tabbed content. We've created some code that will automatically split an article into tabs, using Heading 2 headings as the split points/tab headings. Implementation : Create ...
Create expanding/collapsing sections in an article
Over the years, we've worked up a few different solutions for customers who want to collapse some content by default and then expand it--an accordion structure designed to keep pages looking cleaner so readers can engage with what they are most ...
Using H5 and H6 as Standard Formatting
Since some people don't typically use H5 and H6 headings we have an alternate solution that can come in handy. This solution allows you to take advantage of the H5 and H6 default formatting and create some formatting that you can use over and ov...
Adjust Line Spacing
By default, the line spacing, or line-height CSS attribute, is set to 31 pixels for maximum web readability. You can adjust the line-height of your text by pasting the following code into Settings > Style > Custom CSS : .hg-article-body { ...
Format numbered list spacing and borders
If you are using numbered lists to outline steps, you can adjust the formatting of your lists using some simple CSS. Adjusting these styles can help you consistently format lists with the same spacing and borders across your entire knowledge base. T...
Customize nested numbered list styles
By default, numbered lists with nested/indented items will display with the same numeric format as the main list. You can use custom CSS styles to globally set how your nested numbered list items display. This can be a great way to guarantee that al...
Make the PDF icon prettier
This script replaces the standard PDF icon with a nice Font Awesome version that matches the other Article action icons. To use these, copy the relevant code at the very bottom of the Article template (if you're not sure how to do this, see ...
Setup a JavaScript redirect
It's no longer necessary to use a JavaScript redirect. You can now 301 redirect old permalink/articles to new ones as well as set up URL Redirect categories and articles .  There are many situations where you may want an article to re...
Fix Email Article for Articles with Apostrophes
Customers sometimes run into an issue where the email option does not work on certain articles. The most common culprit is an apostrophe in the article title, which breaks our legacy code for the email option.  We've fixed the issue for...
Conditional content based on tags
Here we describe how to display one of any number of snippets based on the tags an article has. Some comfort playing with code is required, but no coding knowledge is needed - we will give you everything you need, just follow these steps exactly and...