The 'Elements' page from the Daylight Version 3 HTML templates contains an ordered list with large

Options
I have a use case in which I want to add paragraph text between some list items, as shown in the image (what I want).  However, in my case the lists starts counting from one again, shown in the image (not what I want).One can't use the "start" attribute for this large number list. At least, it doesn't do anything :(Who knows how I let this list (large number list from the daylight v3 html templates) start counting from different initial value? Kind regards,Arman

Answers

  • Jennifer.Wagner24
    Jennifer.Wagner24 Posts: 49 🌱
    edited November 2022

    @Arman Vinck​ You have to add a style to the ol tag with the desired number minus 1: style="counter-reset: item 1"

  • Shubham.Kumar22
    Shubham.Kumar22 Posts: 2 🌱
    edited November 2022

    @Arman Vinck​ Hello! There's a couple of things you can try. For your use-case, I believe the second part would work best.

    1. When you copy the Large number list component, you can add more break lines in the list by hitting SHIFT + ENTER. Doing this will let the editor keep you in the same list item. (Demo)
    2. This method is a bit technical (requires some coding).
    • When in edit mode, click <> icon to open the Source Code. Just before the closing </head> tag, add the custom CSS inside a <style> tag.
    • While still in the Source Code, find the Large Number list component and add the custom class name large-number-custom so it becomes <ol class="large-number large-number-custom">
    • Explanation: We created a custom CSS class to override the Large-Number list and to custom start our list at any number. In the below CSS, counter-reset: item+1 !important; tells the HTML to start the list counter and add 1 in it, so the list starts at 2. A simple rule could be item+(n-1) where n is the number where you want to start the list at. E.g. to start the list at 7, the CSS would be counter-reset: item+6 !important; (Demo)

     

    CSS:

    <style>

     .large-number-custom {

       /* change 1 to (n-1), where n is the number to start  */

      counter-reset: item+1 !important;

     }

     

     .large-number-custom li:before {

      content: counter(item) ". ";

      counter-increment: item;

     }

    </style>

     

    Hope this helps. 😊

  • Arman.Vinck25
    Arman.Vinck25 Posts: 5 🌱
    edited November 2022

    @Shubham Kumar​ Thanks a lot for your detailed solution. @Jennifer Wagner​ provided a simpler solution in my opinion. And her solution works as a charm, as shown in the attached image. The second table has style="counter-reset: item 1" in its <ol> tag, as suggested by Jennifer. Thanks! 😀 Ordered lists with second list starting  different initial value.