Guide: Customizing Nested Numbered List | Community
Skip to main content

Guide: Customizing Nested Numbered List

  • March 19, 2021
  • 6 replies
  • 0 views
Stephen23

Hi,

This question is related to:

https://support.zendesk.com/hc/en-us/community/posts/360029569514-Bullet-Points-in-Zendesk-Guide-Articles

I'm having a similar issue with nested numbered lists. I have the following (scrubbed):

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

================

Problem is that "steps 3 -4" is ambiguous. Does it refer to the 2nd level? Or the 1st? IMO, this example exposes a weakness in Zendesk (at least the default style/theme.). 

In (e.g.) in Word or Google Docs, the 2nd level can be alphabetic

========================

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.

========================

and in Word, you can do all sorts of cool customizations.

Is there a way to configure Zendesk to have more workable nested lists, per the example above? The 2nd level could be alpha, or something like 4-1, 4-2, etc. etc.

If there is:

1) How would you do it? :)

2) Can I apply it on an article-by-article basis?

3) If not, would all my existing numbered lists change automatically to match the new theme? That would be a major problem, since I often write something like "Proceed to step 6."

Many thanks!

Stephen

 

 

      6 replies

      Ifra
      • Ifra
      • March 19, 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

       

      Stephen23
      • Stephen23
      • Author
      • March 20, 2021

      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.

      Ifra
      • Ifra
      • March 20, 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

      Stephen23
      • Stephen23
      • Author
      • March 20, 2021

      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.

      Shana12
      • Shana12
      • November 3, 2021

      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. 

        Dave12
        • Dave12
        • November 4, 2021
        Thanks for the tip, Shana! 
        Terms & ConditionsCookie settingsAccessibility statement