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. This can keep your content more consistent and help keep your knowledge base content matching official branding/style guidelines.

Adjust numbered or bulleted list spacing or borders

Use Custom CSS to adjust the spacing between numbered list items and/or add a border. To do so:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Find the Article HTML section in our Initial them, usually between rows 500-600:

   /******************************************************** Article HTML ***************************************/
   /* add some padding to line items */
   .hg-article-body ol li {
     padding: 10px 0;
   }

4. To change the styling or spacing for numbered lists, adjust the .hg-article-page ol li CSS to get the spacing and treatment you want. Refer to Sample before and after for some sample changes.
5. To change the styling or spacing for bulleted lists, use the code below as a starting point to create some CSS you can add to your CSS just below the code in step 3:

   /* add some padding to bulleted line items */
   .hg-article-body ul li {
     padding: 10px 0;
   }

6. Be sure to Save your changes.

Add space between the start of lists and the text above it

If you want to adjust the space between the text that introduces the list and the list itself:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Find the Article HTML section in our Initial them, usually between rows 500-600:

   /******************************************************** Article HTML ***************************************/
   /* add some padding to line items */
   .hg-article-body ol li {
     padding: 10px 0;
   }

4. Copy the code below and add it somewhere into that Article HTML section:

   /* add some padding between introductory text and the start of lists */
   .hg-article-body ul,
   .hg-article-body ol {
     margin-top: 2em;
   }

5. Adjust the spacing until it's to your liking and decide which lists you want affected. The code sample will add space before both bulleted lists (ul) and numbered lists (ol). Remove or comment out list types you don't want styled this way. Refer to Sample before and after for some sample changes.
6. Be sure to Save your changes.

Sample before and after

For example, here's what our lists might look like before we made any changes:

Here's some introductory text about this numbered list, so you can see the spacing:

1. Step 1: do things.
2. Step 2: do more things.
3. Step 3: Save.

Here's some introductory text about this bulleted list, so you can see the spacing:

• First this
• Also this thing
• And a third thing

And if we apply this code:

.hg-article-body ol li,
.hg-article-body ul li {
  padding: 15px 0;
}
.hg-article-body ul,
.hg-article-body ol {
  margin-top: 2em;
}

Here's what it would look like:

Here's some introductory text about this numbered list, so you can see the spacing:

1. Step 1: do things.
2. Step 2: do more things.
3. Step 3: Save.

Here's some introductory text about this bulleted list, so you can see the spacing:

• First this
• Also this thing
• And a third thing