Hide Sort Option Using CSS

huuduy216

Hello,

Is it possible to hide a few thread sort option in the dropdown list using CSS? Ibtry to inspect the element, but couldn't really find any meaningful class name.

clarkwinkelmann

huuduy216 you could use the :nth-child() CSS selector to target a particular item by its position in the dropdown.

What are you trying to accomplish though? There's already so few of them (4 by default I believe).

In any case it wouldn't prevent people from using the API directly to sort, or pass the sort order through a query string parameter to Flarum.

huuduy216

clarkwinkelmann Some extensions give extra sorting feature. Right now my forum has 7 or 8 so it's a little too much. Some of them are kind of the same (not entirely) so I want to hide a few away to avoid confusing the user 😀

KolaBilewu

clarkwinkelmann hi can show you a sample of how the code should look like please

huuduy216

KolaBilewu
This would hide 2 options. Depending on which extension you are using, it might be different for you, but you get the idea:

.IndexPage-toolbar-view .Dropdown-menu>li:nth-child(2) {
display: none;
}

.IndexPage-toolbar-view .Dropdown-menu>li:nth-child(4) {
display: none;
}

KolaBilewu

huuduy216 Thanks for this I really appreciate, can you please use latest or newest sort option as an example please instead of the numbers
this is what i want to hide
Latest, Trending, Top, Newest and Oldest. i want only the Frontpage Sort Option to show
Thanks anticipate your reply

Ralkage

KolaBilewu FrontPage is getting some needed TLC after beta 14 releases 🙂 I have plans to make it much more flexible so you don't have to resort to sort option hacks 😉

huuduy216

KolaBilewu this will be relative to your forum. The numbers are corresponding to the position of the sort option. Just play around with the number and you will get the idea very quickly 🙂

KolaBilewu

Ralkage Thanks for this i await this