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/viewtopic.php?f=30&t=95420&p=463092&hilit=volume+bar#p463106 how to make it wider easily.

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 ?

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

[quote=JimPa post_id=449598 time=1537208509 user_id=71037]

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!
[/quote]

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 [b]/sampleScripts/skins/[/b] 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

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!

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

Hi,
right-clicking the header and selecting 'Inspect Element' see that it is 'PlaylistHeader' component (data-control-class):
https://www.dropbox.com/s/bvqsrnpk44vd6rs/Screenshot%202018-09-17%2016.23.07.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]
[data-control-class='PlaylistHeader'] {
display: none;
}
[/code]

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

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.