Changing the Music Menu Tabs - what is possible?

[user24 85]

Hi to all the clever CSS gurus!

I’m researching and experimenting with changes to the Top Menu Tabs for my Music Library.

I have made some good progress with hiding Tabs, but was wondering if it was also easily possible to swap them around?

My default Music Menu has ten Tabs as follows:

 

 

 

By using the following code, I can hide the four Tabs that I rarely use:

/* HIDE MUSIC TABS "SUGGESTIONS", "ARTISTS", "COMPOSERS" AND "FOLDERS" */
[data-index="2"] .tabs-viewmenubar-slider [data-index="0"] {display: none;}
[data-index="2"] .tabs-viewmenubar-slider [data-index="3"] {display: none;}
[data-index="2"] .tabs-viewmenubar-slider [data-index="4"] {display: none;}
[data-index="2"] .tabs-viewmenubar-slider [data-index="9"] {display: none;}

This leaves me with the six Tabs that I mainly use:

 

 

 

I would prefer the order of these remaining Tabs to be:

Genres | Album Artists | Albums | Songs | Playlists | Tags

I think following code refers to the Menu Bar, but don’t really understand what I should be looking for or how to properly use it:

div.headerMiddle.headerSection.sectionTabs.headerMiddle-withSectionTabs

Can some flex code be applied to swap the Tabs across the Menu Tab row?

{ display: flex; flex-direction: row; }

How do I combine this all together to swap the tabs?

Or I may well be completely looking at the wrong code and have absolutely zero idea?

If swapping is possible, then any help/suggestions would be most appreciated!

Edited February 17 by user24
formatting

[Happy2Play 8282]

Not that I am aware of as they are all script based.

Just like my server does not have a [data-index="2"] as it is 0 the same a TV content (on one server), but another server where it is 9 by itself.  So it looks hit and miss trying data-index and not affect other libraries.

But if you are lucky enough to actually target then specific to your setup

[data-index="2"] .tabs-viewmenubar-slider {display: inline-flex}
[data-index="2"] .tabs-viewmenubar-slider [data-index="6"] {order: 0}
[data-index="2"] .tabs-viewmenubar-slider [data-index="2"] {order: 1}
[data-index="2"] .tabs-viewmenubar-slider [data-index="1"] {order: 2}
[data-index="2"] .tabs-viewmenubar-slider [data-index="7"] {order: 3}
[data-index="2"] .tabs-viewmenubar-slider [data-index="5"] {order: 4}
[data-index="2"] .tabs-viewmenubar-slider [data-index="8"] {order: 5}

But as mentioned on this server since indexes overlap tv shows this

[user24 85]

@Happy2Play Brilliant! You are hereby awarded six gold stars       one for each Tab.

 

 

 

With my server (at the moment) most Libraries have different data-index numbers:

• TV Series         “0”
• Movies             “1”
• Music Videos  “1”
• Music               “2”

Therefore nothing else gets messed up by just changing Music and I am not greatly concerned about the other Library Menus default order anyway. 

Edited February 17 by user24
formatting