MM5 Skinning question

Post a reply

Smilies
:D :) :( :o :-? 8) :lol: :x :P :oops: :cry: :evil: :roll: :wink:

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: MM5 Skinning question

Re: MM5 Skinning question

by Ludek » Mon Jan 06, 2020 9:38 am

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.

Re: MM5 Skinning question

by calibra69 » Tue Dec 31, 2019 4:45 am

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 ?

Re: MM5 Skinning question

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.

Re: MM5 Skinning question

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

Re: MM5 Skinning question

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!

Re: MM5 Skinning question

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;
}

Re: MM5 Skinning question

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?

MM5 Skinning question

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.

Top