Customize nested numbered list styles

If you'd like to change the number or bullet point format of a list, use the dropdown arrow next to list control in the editor:

Use the Ordered List and Unordered List dropdowns to change list style formatting

These options work great if you want authors to have flexibility to adjust list formats on the fly.

If you'd prefer to set nested list formats globally, 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 all numbered lists follow your official/branded guidelines for numbered list styles.

Here are instructions for some of our most-requested list style tweaks::

• Set different numbered list item display types for different levels of lists. For example: use numeric for top-level, lowercase letters for second-level, and lowercase Roman numerals for third-level. Refer to Use different display types for nested item levels for setup instructions.
• Set nested numbered list items to use numbers with counters. For example: top-level 1, nested list 1.1, nested second-level list 1.1.1. Refer to Use nested numbers with counters for setup instructions.

Use different display types for nested item levels

You might want to keep your first-level list items as the standard decimal (1, 2, 3), use lowercase letters (a, b, c) for the second-level items, and the use lowercase Roman numerals (i, ii, iii) for third-level items. For example:

1. North America
   1. Antiqua and Barbuda
      1. St. John's
2. South America
   1. Argentina
      1. Buenos Aires
3. Antarctica

To set these styles as your nested numbered list defaults:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Copy the CSS below and paste it into the CSS pane:

   /* -- Set default nested List styles -- */
   
   /* Set the first layer of list items to regular numeric decimals */
   .hg-article-body ol {
       list-style-type: decimal;
   }
   
   /* Set the second layer of list items to lowercase alphabetic */
   .hg-article-body ol > li > ol {
       list-style-type: lower-alpha;
   }
   
   /* Set the third layer of list items to lowercase Roman numerals */
   .hg-article-body ol > li > ol > li > ol {
       list-style-type: lower-roman;
   }
   

4. The code above uses numeric, then lower alphabetic, then lowercase Roman numerals. Adjust it as needed to match the defaults you'd prefer. Refer to the W3 Schools page on CSS list-style-types for additional options.
5. Be sure to Save your changes.

Use nested numbers with counters

You might want to use all numbers, but have each indented layer add a .+number onto it. For example:

Sample numeric nested lists with counter

To achieve the list style above, use a counter within the numbered list, so that it numbers the 1.x and 1.1.x strings, etc., based on the count and position of the list items:

1. Go to Customize > Style (HTML & CSS).
2.  In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Copy the CSS below and paste it into the CSS pane:

   /* Styles for formatting sub-ordered-list-items with 1.1., 1.1.1., etc.)*/
   	
   /* First, set all numbered lists to use counter-reset */
   .hg-article-body ol {
         counter-reset: item;
   }
   
   /* Display all list items in a numbered list in block display */
   .hg-article-body ol>li {
         display: block;
   }
   
   /* Use a counter that checks the number of items and adds a "." between them and ends with ". " */
   .hg-article-body ol>li:before { 
         content: counters(item, ".") ". "; 
         counter-increment: item;
   }

4.  Be sure to Save.