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
Contact:

MM5 Skinning question

Post by JimPa »

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
Contact:

Re: MM5 Skinning question

Post by JimPa »

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: 3455
Joined: Fri Mar 09, 2007 9:00 am
Contact:

Re: MM5 Skinning question

Post by Ludek »

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
Contact:

Re: MM5 Skinning question

Post by JimPa »

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: 3455
Joined: Fri Mar 09, 2007 9:00 am
Contact:

Re: MM5 Skinning question

Post by Ludek »

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
Contact:

Re: MM5 Skinning question

Post by JimPa »

Thanks for the pointer, I'll take a look at the code and see if I can learn how it works.
calibra69
Posts: 2
Joined: Mon Dec 30, 2019 9:53 am
Contact:

Re: MM5 Skinning question

Post by calibra69 »

Hi Everybody!
First, i'm not CSS developper but only user.
Second, congratulations for this release of MM5, all my problems with DLNA doesn't exists any more!
Question: the only thing bad for me is the volume bar on the bottom right: it's too small! i often use it to manage the volume via DLNA, so i need to be as precisely as possible.
I there any way to modify ?
Ludek
Posts: 3455
Joined: Fri Mar 09, 2007 9:00 am
Contact:

Re: MM5 Skinning question

Post by Ludek »

the volume bar width is depending on skin, we have already enlarged it in the default Material Design (Dark) skin, are you using version 2219 and the default skin?Also try to see here: https://www.mediamonkey.com/forum/viewt ... ar#p463106 how to make it wider easily.
Post Reply