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.

Set different levels of nested items to different display types

You might want to keep your main numbers as the standard decimal (1, 2, 3), but the second level to be lower-case letters (a, b, c), and the third level to be lower-case Roman numerals (i, ii, iii). For example:

Nested Numbered List



To achieve the above styles:

  1. Go to Settings > Style.
  2. Go to Custom CSS.
  3. Add this Custom CSS:
    /* -- Nested List  -- */
    
    .hg-article-body ol {
        list-style-type: decimal;
    }
    
    .hg-article-body ol > li > ol {
        list-style-type: lower-alpha;
    }
    
    .hg-article-body ol > li > ol > li > ol {
        list-style-type: lower-roman;
    }
    
  4. Click Save.

Use nested numbers with counters

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

Nested Numbered List with Counters

To achieve the above styles, you can 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 Settings > Style.
  2. Go to Custom CSS.
  3. Add this Custom CSS:
    /* Styles for formatting sub-ordered-list-items with 1.1., 1.1.1., etc.)*/
    .hg-article-body ol {
          counter-reset: item;
    }
    .hg-article-body ol>li {
          display: block;
    }
    .hg-article-body ol>li:before { 
          content: counters(item, ".") ". "; 
          counter-increment: item;
    }
  4. Click Save.