Custom Music Views - Album Artist / Album / Composer pages

[user24 84]

With the Album Artist / Artist / Composer pages the default order of the main Sections, below the top Overview, is currently:

• Songs
• Albums
• Appears On
• Included In
• Music Videos
• More Like This
• About

(I don’t know of any other Music Sections that I haven’t used as yet?)

After some experimenting with hiding unwanted Sections, I was curious to see if all of the Sections could be rearranged in any desired order, e.g.:

• Albums
• Appears On
• Music Videos
• Songs
• Included In
• More Like This
• About

After searching though some very old Emby forum posts and online CSS tutorials, I figured out that the following CSS may be used to create a customised Music Sections order, e.g.:

div.details-additionalContent { display: flex; flex-direction: column; } 
div.artistSongsSection { order: 4; } 
div.artistAlbumsSection { order: 1; } 
div.moreFromArtistSection { order: 2; } 
div.appearsOnListsSection { order: 5; } 
div.peopleItems { order: 3; } 
div.similarSection { order: 6; } 
div.aboutSection { order: 7; }

(Just change the numbers for your own preferred custom order.)

The left image below is the default Sections order (zoomed at 25% to fit the whole length screenshot).

The right image below is the example custom Sections order (zoomed at 25%).

Some Disclaimers/Findings/Notes:

1. If you change the relative order of the Music Sections and these same Sections are also used in other libraries (e.g. Movies) the order will be rearranged there as well.
2. If the About Section, normally at the bottom, is moved up, there will be less space before the next re-ordered Section directly below. A further CSS tweak will be required to give a larger balanced spacing (I haven't looked at this yet).
3. Changing the Section order changes the Artists appearing in the More Like This Section.
4. By using a combination of changing the order and hiding unwanted Sections it is possible to create many different custom views for individual personal preference (hiding Sections is already covered in other forum threads).

Comments and feedback most welcome!

[Happy2Play 8282]

Looks like you can do this to not affect TV/Movies

div.itemView:not(.darkContentContainer-tv) div.details-additionalContent { display: flex; flex-direction: column; } 

 

[user24 84]

@Happy2Play  Thanks for the very quick reply and the help with the code. Most appreciated!

As best that I can figure out .darkContentContainer-tv applies to the individual Movie and individual TV Series page views. Your CSS code means don't apply the custom flex ordering to these specific pages. 

Unfortunately, after a direct copy & paste of the code,  I couldn't get it to work correctly. 

I'm running Emby 4.8.1.0 on a Windows 11 laptop and accessing via Google Chrome Version 121.0.6167.161 (Official Build) (64-bit).

This is what I tried:

• Delete all Emby custom CSS to eliminate any other code potentially causing problems.
• Add my flex order code with order 1,2,3,4,5,7,6 to just swap the More Like This and About sections at the bottom.
• Check the changed order on all relevant pages (Musc/Movies/TV Series) - shows swapped sections everywhere, as expected.
• Copy & paste your code above mine - no changes to any pages (expected result should be to swap back the sections in Movies/TV Series only).
• Copy & paste your code below mine - no changes to any pages (expected result should be to swap back the sections in Movies/TV Series only).

Would using !important be necessary?

I do not know enough about CSS (or the correct code syntax)  to quickly try anything else myself.

If there is a quick fix - great! If not, no bother at all, as I am mainly interested in setting up the Music pages. The Movie/TV pages are of much less importance to me. It could be useful for others interested in doing the same re=ordering though?

Thanks again.

 

 

 

 

 

[Happy2Play 8282]

6 minutes ago, user24 said:

@Happy2Play  Thanks for the very quick reply and the help with the code. Most appreciated!

As best that I can figure out .darkContentContainer-tv applies to the individual Movie and individual TV Series page views. Your CSS code means don't apply the custom flex ordering to these specific pages. 

Unfortunately, after a direct copy & paste of the code,  I couldn't get it to work correctly. 

I'm running Emby 4.8.1.0 on a Windows 11 laptop and accessing via Google Chrome Version 121.0.6167.161 (Official Build) (64-bit).

This is what I tried:

• Delete all Emby custom CSS to eliminate any other code potentially causing problems.
• Add my flex order code with order 1,2,3,4,5,7,6 to just swap the More Like This and About sections at the bottom.
• Check the changed order on all relevant pages (Musc/Movies/TV Series) - shows swapped sections everywhere, as expected.
• Copy & paste your code above mine - no changes to any pages (expected result should be to swap back the sections in Movies/TV Series only).
• Copy & paste your code below mine - no changes to any pages (expected result should be to swap back the sections in Movies/TV Series only).

Would using !important be necessary?

I do not know enough about CSS (or the correct code syntax)  to quickly try anything else myself.

If there is a quick fix - great! If not, no bother at all, as I am mainly interested in setting up the Music pages. The Movie/TV pages are of much less importance to me. It could be useful for others interested in doing the same re=ordering though?

Thanks again.

 

 

 

 

 

Just going off the console

applied in music/artist display is changed to flex.

Where TV/Movies remain Display block so order is irrelevant.

[user24 84]

Thanks. I can find the two code lines you are referring to, but the flex badges appear on both lines.. I still can't get it to work as expected. It doesn't matter, though, because I can hide and reorder the Music sections to suit what I want and it doesn't have any negative impact on Movies and TV at the moment. Moving on to something else now... Cheers!