MM5 Skinning question

To discuss development of addons / skins / customization of MediaMonkey.

Moderator: jiri

JimPa
Posts: 55
Joined: Wed Feb 12, 2014 6:58 am

MM5 Skinning question

Post by JimPa » Sun Sep 16, 2018 4:25 pm

Firstly, sorry if this is a stupid question - I'm usually OK with basic CSS editing but maybe I'm missing something here.

In MM5 (Material Design/Dark skin) if I wanted to remove the heading that appears at the top when you click on a playlist (the one with the Playlist name/Edit/Play/Shuffle) I thought a quick fix would be to add something like:

.PlaylistHeader {display: none;}

But I can't seem to make it work. Can someone point me in the right direction as to what CSS I need and which .less file I would need to edit.

Thank you.

JimPa
Posts: 55
Joined: Wed Feb 12, 2014 6:58 am

Re: MM5 Skinning question

Post by JimPa » Sun Sep 16, 2018 4:37 pm

Sorry, just found I can disable it by deselecting 'Info panel' but still curious as to whether I could have disabled via CSS?

Ludek
Posts: 2498
Joined: Fri Mar 09, 2007 9:00 am

Re: MM5 Skinning question

Post by Ludek » Mon Sep 17, 2018 9:30 am

Hi,
right-clicking the header and selecting 'Inspect Element' see that it is 'PlaylistHeader' component (data-control-class):
https://www.dropbox.com/s/bvqsrnpk44vd6 ... 7.png?dl=0

You can override or modify the 'PlaylistHeader' component (either JS or HTML) by adding file:
/controls/playlistHeader_add.js
or
/controls/playlistHeader.html
into your skin folder.

But this rather modifies the component and behaviour for the playlist header/info panel, so this isn't much about skinning, but rather scripting.

As for using CSS, you can use [data-control-class='PlaylistHeader'] selector:

Code: Select all

[data-control-class='PlaylistHeader'] {
	display: none;
}

JimPa
Posts: 55
Joined: Wed Feb 12, 2014 6:58 am

Re: MM5 Skinning question

Post by JimPa » Mon Sep 17, 2018 1:21 pm

Thank you, that's very helpful. I was getting close but hadn't got as far as working out I needed to use [data-control-class]. Guess I need to brush up on my CSS skills ;)

No idea how I would do something like rearrange the actual positioning and order of the elements (e.g. moving Play/Previous/Next) to the left but hopefully I'll get the hang of it eventually.

Really liking MM5 now, good work!

Ludek
Posts: 2498
Joined: Fri Mar 09, 2007 9:00 am

Re: MM5 Skinning question

Post by Ludek » Tue Sep 25, 2018 2:51 pm

JimPa wrote:
Mon Sep 17, 2018 1:21 pm

No idea how I would do something like rearrange the actual positioning and order of the elements (e.g. moving Play/Previous/Next) to the left but hopefully I'll get the hang of it eventually.

Really liking MM5 now, good work!
As for the moving them to the left, you can just look into the other sample skins, e.g. "Purple Haze" or "Red Devil" skins has these buttons on the left.
The skins are available in /sampleScripts/skins/ folder as *.mmip files, you can install then via Tools > Extensions > Add
and then you can switch to them, their code will be available under the /skins/ folder then

But also BlackMonkey skin has the buttons on the left, it does it by defining own player.html, see /skins/BlackMonkey/Player.html

JimPa
Posts: 55
Joined: Wed Feb 12, 2014 6:58 am

Re: MM5 Skinning question

Post by JimPa » Tue Sep 25, 2018 2:58 pm

Thanks for the pointer, I'll take a look at the code and see if I can learn how it works.

Post Reply