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

Arman.Vinck25
Posts: 5 🌱
in Archived
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
-
@Arman Vinck You have to add a style to the ol tag with the desired number minus 1: style="counter-reset: item 1"
-
@Arman Vinck Hello! There's a couple of things you can try. For your use-case, I believe the second part would work best.
- 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)
- 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. 😊
Categories
- All Categories
- 6 Thought Leadership
- 7 Known and Fixed Issues
- 6 Product Roadmap
- 553 Archived
- 10 Accessibility
- 28 Community Corner
- 2 Welcome
- Updates
- Member Spotlights
- 4 Events
- 242 Development
- 746 Customer Enablement
- Evaluate - Assess Student Learning
- Get Comfortable with Brightspace
- Communicate - Engage with Your Students
- 1 Create - Set up your Brightspace course
- Action - Add or create student activities
- 26 Partners
- 9 Product News
- 2022
- 2022 Release Notes
- 2021 Release Notes
- 4 Training
- andycat