Streaming live at 10am (PST)

Numbered ordered Collection-list

#1

Hey Webflow Community,

maybe you can help me and I hope you understand my english. :blush:

I try to build a top-list, depends on a rating. I have a blog about boardgames, the articles comes from a collection. Any boardgame has a rating. Now I want a ordered list of these.

  1. boardgame x with 89 points
  2. boardgame y with 80 points
  3. boardgame z with 75 points

Now comes a new boardgame with 83 points and I want a automatic update of these list.

  1. boardgame x with 89 points
  2. new boardgame with 83 points
  3. boardgame y with 80 points

How I sort the collection-list is clear, but I dont know how bring this in a numbered ordered list.

I hope that is clear what I want and maybe you have an idea.

Thanks for help!


#2

I suggest reviewing the number field in a collection. Options to sort a collection by number exists.

#3

Thanks for your answer. But I have no problem with the sorting. That works fine. I have a problem to display the NUMBER of the place, like an “ordered List”. I have not found a function in the number field that helps me.

Thanks!

#4

Please share a read-only link to your site.

#5

Here is the link:
https://preview.webflow.com/preview/100meeple?utm_source=100meeple&preview=fd44d26c42338ace52a5f9334b9b690e

See “Top 100”-Page.

Thanks!

#6

Can you please explain this in more detail? I don’t understand what you mean by “NUMBER of the place”.

#7

Sorry! :disappointed_relieved:
Maybe its more clear in a picture…

Thanks for your patience! :slight_smile:

#8

I got it. So the issue is this; while a collection list is referred to as a list, you can’t drop the collection into a list element. Good news is that you can treat any element as a list item with CSS.

So custom code to the rescue. It’s not really custom code it’s just plain CSS. But you need to add it to your page “top100”. So looking at your code, the collection list is .collection-list and your collection items are . top100item; the custom code below will style the collection list as a ordered list and each item a list item.

<style>
// class below is your collection list
.collection-list {
    list-style-type: decimal;
}
// class below is your cms item
.top100item {
    display: list-item;
    color: white;
}
</style>

That should give you the results you want. You can always refine the CSS to get the final design look.

#9

Great! It works.
Thanks for your support!!! :grin: