Hide Playlists from Included In section?

[user24 339]

Hi, Presently the music Included In section on the individual Artist pages shows both Collections and Playlists. Ideally, I would like them both shown on their own separate rows, but was wondering, as a first step, if there was a simple way to just hide the Playlists using CSS?

When looking at the CSS of the div.appearsOnLIstsSection,  it seems that an underlying Collection and Playlist have an identical structure, so it doesnt seem possible to differentiate and target just Playlists?

Is there anything obvious/easy that I am missing or do I need other method beyond CSS? Thanks!

[GrimReaper 4862]

On 3/21/2026 at 2:52 AM, user24 said:

was wondering, as a first step, if there was a simple way to just hide the Playlists using CSS?

Is there anything obvious/easy that I am missing or do I need other method beyond CSS?

As you've already surmised, it can't be done by CSS alone, you'd need to do it via js script (though it shouldn't take more than a few minutes to set that up). Note that you'd have to repeat that on each server update (not that often/tedious either, I have several scripts of my own, for different purposes).

Edit: If you wanna play with it, place the script in your server's \system\dashboard-ui folder; in the same folder, edit index.html and add a line at the very bottom: 

script src="hide_playlists.js"></script>

Hard-refresh browser (Ctrl+F5) or restart server.

Edited Sunday at 07:19 AM by GrimReaper
Script removed

[GrimReaper 4862]

On 3/21/2026 at 2:52 AM, user24 said:

Ideally, I would like them both shown on their own separate rows

Updated version.

 

playlist_row.js

Edited Sunday at 02:06 PM by GrimReaper

[user24 339]

@GrimReaper Thanks for the script... I played around with it for a bit. With a simple 1 Collection, 1 Playlist it works perfectly, but with more Collections there seems to be SPA/DOM timing issues??? Here are some results:

• C P works well
• C C C C P P works, though the spacing between all cards, in the new Playlists row only, is much wider than normal
• C C C C C C C C P P P P P P only the first P appears in the new Playlists row, the rest remain in the new Collections row, with a one card  'missing' gap from C to P (picure below)
• C C C C C C C C C C C C C C C C P P P P P P P P everything remains in the new Collections row

I'm not asking/wanting you to troubleshoot it for me (unless you want to for yourself). Just reporting on what I found and it was worth trying. I also have some additional complications when using this with my unrelated custom CSS that massively rearranges 'everything'. Anyway, this has at least got me started and I now have a couple of new ideas to try next:

• Hide the 8 playlists, that are annoying me right now, with CSS by targeting their specific IDs (short-term, not scalable)
• Use API to target Collections and Playlists for separating them (long-term, hopefully a viable solution)

Thanks again for your help!

[GrimReaper 4862]

Try this version, it should handle larger number of items better:

1 hour ago, user24 said:

C C C C P P works, though the spacing between all cards, in the new Playlists row only, is much wider than normal

1 hour ago, user24 said:

C C C C C C C C P P P P P P only the first P appears in the new Playlists row, the rest remain in the new Collections row, with a one card  'missing' gap from C to P (picure below)

1 hour ago, user24 said:

C C C C C C C C C C C C C C C C P P P P P P P P everything remains in the new Collections row

playlist_row.js

Edited Sunday at 07:35 PM by GrimReaper

[user24 339]

@GrimReaper This version works much better. Just had to fine-tune a couple of things. Needed my local server number in place of yours and had to change the 202px spacing to 145px. Not sure why (????) as DevTools showed 202px.

Also played around a bit with CSS for hiding individual selected Playlists as follows (e.g.)

/* 1970s */

.appearsOnListsSection .virtualScrollItem:has(img[src*="/Items/688474/"]) {

    display: none !important;

}

But, then the hidden items need to be sorted to the end of all Playlists, otherwise blank spaces occur.

Probably not a problem for me though, as my Playlists and Collections are sorted into sub-categories anyway and would only ever be shown or hidden as a set,  according to these categories.

There's probably some combination of splitting the row into two and hiding selected items on certain pages that will end up being useful.

Thanks and Cheers !!

[GrimReaper 4862]

24 minutes ago, user24 said:

Also played around a bit with CSS for hiding individual selected Playlists as follows (e.g.)

/* 1970s */

.appearsOnListsSection .virtualScrollItem:has(img[src*="/Items/688474/"]) {

    display: none !important;

}

But, then the hidden items need to be sorted to the end of all Playlists, otherwise blank spaces occur.

Yeah, you cant can't reflow the remaining items with CSS since they use absolute positioning with hardcoded inset values; the only way you could close the gaps is with js again; you could add those playlist IDs to an exclusion list in the same script?