Guide: Customizing Nested Numbered List

Answered

6 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi,  if you are creating a nested list for the articles then you know how to achieve. All depends that how you write the code, what's the structure of your list. Meant you want a nested list like:

    1.  Retrieve eggs from fridge.
      2. Open carton of eggs.
      3. Remove egg from carton
      4. Proceed as follows:
          a. Crack egg.
          b. Dump into bowl.
          c. Throw away shell.
          d. Wipe hands.
      5. Repeat steps 3 - 4 for each additional egg.

     

    so copy the below code and paste at your stylesheet:

    .article-body ol li ol li {
     list-style: lower-alpha;
    }

     

     

    More Exmample 

    /* if you have unordered list */
    .article-body ul li ul li {
     list-style: lower-alpha;
    }

    /* if you have ordered list but child list is unordered */
    .article-body ol li ul li {
     list-style: lower-alpha;
    }


    All nesting depends on the list structure here:
    ol li ul li
    ul li ul li
    ul li ol li ol li

     

    Thanks

     

    0
  • Stephen Kairys

    Hi, I thought I had commented on this earlier but don't see what I added. So...

    1) Is the above intended to affect all articles, or just the article I'm working on. Or even just the numbered list I'm composing?

    2) Could you please provide a link to info on how to modify the stylesheet?

    Thanks.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey, you can follow this article for To customize the CSS or Js

    https://support.zendesk.com/hc/en-us/articles/203664326-Customizing-your-help-center-theme#topic_gxl_3qw_n3

     

    1) Is the above intended to affect all articles, or just the article I'm working on. Or even just the numbered list I'm composing?
    ans. It will affect all article's lists.

    If you remove this class 

    .article-body

     

    and write only

    ol li ul li {
     list-style: lower-alpha;
    }

     

    then it will affect all lists wherever you create like on section_page.hbs, category_page.hbs means all templates.

     

    Thanks

    Team

    0
  • Stephen Kairys

    Hello, thanks for the reply.

    Will it affect existing lists in existing articles?

    If it will, then at this point I'm going to concede that Zendesk cannot adequately support what we need and go with the default format. In the actual document, there are only 3 sub-steps; I had added #4 to increase the chance there might be confusion.  And I wrote:

    5. Repeat steps 3 - 4 (sub-steps included) for each egg....

    Thanks. You can consider this question closed.

    0
  • Shana Blackstone

    For those not working with code...

    I've been messing with numbered lists quite a bit with ZD and I was able to get the following to work:

    1. Step 1

    2. Step 2

    3. Step 3

    • Sub item 1
    • Sub item 2

    4. Step 4

    In order to make this happen you can put your cursor at the first sub item (that probably has a 1 on it) then just press the bullet list. This will change all the sub items have bullets instead of numbers. (It's not a good as Word or Google but a work around that we are having to deal with) This does NOT change all of your articles of course, only helpful as you build lists. 

    Unfortunately, the above example I typed displays space between each line, which is what I would love to happen, but I can't figure out how to achieve w/o code. 

    1
  • Dave Dyson
    Thanks for the tip, Shana! 
    0

Please sign in to leave a comment.

Powered by Zendesk