maybe you can help me and I hope you understand my english.
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.
boardgame x with 89 points
boardgame y with 80 points
boardgame z with 75 points
…
Now comes a new boardgame with 83 points and I want a automatic update of these list.
boardgame x with 89 points
new boardgame with 83 points
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 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.
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.
Hi @webdev and @Gazpod, thank you guys for this solution - it works but I wonder how I can move the resulting rank number around. For example, by default it sits on top of every collection list item. But I want to move it inside to where it says “rank #”. I want to replace the “#” with the collection item number that currently still sits outside on top of it.
