by drakinite » Sun Mar 13, 2022 2:03 am
belomeclone wrote: ↑Tue Mar 08, 2022 6:14 am
I appreciate the help Drakinite!
I am looking for:
-the same colours as in MM4's Gilded theme. This should be an easy one. According to an online colour picker, the colours are: #b9b9b9 for the left column with Home/Playing/Music. #f5f5f5 and #e9e9e9 for the alternating colours on the Music view. I would start with that.
-more importantly, I am looking at the bottom player bar. On MM4 it is larger with more information, and that information is visible in the bottom left of the screen, so the peek out of MM4 behind your browser has the Title, Artist, and Album visible. I'd like to recreate that view in MM5. Raise up the size of the player and move the Title (in a larger font), the Artist below it, and the album below that to the left side. I can provide images if needed. I'm sure we can throw in a visualization to fill in some of the empty space.
I'm not sure this is possible. This is what I'm looking for though. Thank you!
Hi, I'm sorry for the late reply.
Changing skin colors is simple once you've got it set up. I would recommend starting with one of the default skins, but there are a few others available at
https://www.mediamonkey.com/addons/brow ... 1/skins-1/ that you could use. (You're allowed to use & modify any skin published by Ventis Media, but most of the others don't have licenses attached, meaning you should ask permission if you want to redistribute it. I know that Code Monkey is distributed with the MIT license, essentially meaning you can do anything with it.)
Inside the Skins folder of your MM install, create a new folder, name it whatever you want, and paste the contents of the skin you're basing it on into that folder. (Make sure the files aren't in a subfolder). Then edit info.json with the new title and ID that you want.
After that's set up, you can edit .less files in the skin subfolder Start with skin_base_add.less - there, you can change the main colors of the skin. You can use a site like
http://hexpicker.com/ to figure out hex codes, but if you are using Visual Studio Code, it'll actually show a built-in color picker to make it easier.
As for changing the layout of the player: This really depends on what skin you're starting with. But as an example, I started with the Material Design skin and did a bit of rearranging. I put the player controls on the left, and replaced the trackSummary label with a list including Title, Artist, and Album. From there, you can tweak to your heart's content. There's a lot more to it, but the basic idea is that
class="classA classB" denotes that an element has two classes, .classA and .classB, and inherits the style associated with both of those. If you want to edit the attributes of a specific element, you can do it with the
style tag, such as for example
style="color: red;". This is the syntax:
https://www.w3schools.com/Css/css_syntax.asp
Here's the slightly tweaked player.html from Material Design:
Code: Select all
<div data-id="player" data-control-class="Player">
<div data-id="player-seekbar" class="stretchWidth" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max: 0, speechName: 'seek bar', speechUnit: 'seconds'}" data-player-control="seek" data-optional="{group: 40, order: 10}"></div>
<div class="flex column">
<div data-id="player-waveform" class="stretchWidth" data-control-class="Waveform" data-player-control="waveform" data-optional="{group: 40, order: 20}" style="display: none"></div>
<div data-id="player-row" class="fill flex row">
<div class="dynamic fill flex flexcenter column vSeparatorTiny" style="flex: 0 0 auto">
<div data-id="playerLeftButtons" class="playerButtons fill flex row static verticalCenter center">
<div data-id="player-prev" class="playerButton playerSmallButton" data-aria-label="Previous file" data-icon="player_prev" data-player-control="previous" data-optional="{group: 10, order: 10}">
</div>
<div data-id="player-play" class="playerButton playerLargeButton" data-aria-label="Play" data-icon="player_play" data-player-control="play">
</div>
<div data-id="player-pause" class="playerButton playerLargeButton" data-aria-label="Pause" data-icon="player_pause" data-player-control="pause">
</div>
<div data-id="player-stop" class="playerButton playerBigButton" data-aria-label="Stop" data-icon="player_stop" data-player-control="stop" data-optional="{group: 10, order: 20}">
</div>
<div data-id="player-next" class="playerButton playerSmallButton" data-aria-label="Next file" data-icon="player_next" data-player-control="next" data-optional="{group: 10, order: 30}">
</div>
</div>
</div>
<div class="flex row" style="flex: 10 10 auto; width: 100">
<div class="flex column dynamicShrink uiRows margins">
<div class="flex row">Title</div>
<div class="flex row">Artist</div>
<div class="flex row">Album</div>
</div>
<div class="flex column dynamicGrow uiRows margins">
<div class="flex row"><label data-id="player-title" class="textWrap" data-player-control="title"></label></div>
<div class="flex row"><label data-id="player-artist" class="textWrap" data-player-control="artist"></label></div>
<div class="flex row"><label data-id="player-album" class="textWrap" data-player-control="album"></label></div>
</div>
</div>
<div class="flex row" style="flex: 10 10 auto; width: 100">
<div class="fill flex column" style="z-index: -1"></div>
<div data-id="player-rating" data-control-class="Rating" data-init-params="{starWidth: '1.72em', starMargin: '0.15em'}" data-player-control="rating" data-optional="{group: 20, order: 20, title:'Rating'}" style="display: none"></div>
<div class="fill flex column" style="z-index: -1"></div>
<div class="flex row">
<div data-id="playerRightButtons" class="flex row static verticalCenter alignRight">
<div data-id="player-repeat" class="playerButton playerSmallButton checkable" data-aria-label="Repeat" data-icon="repeatOne" data-player-control="repeat" data-optional="{group: 30, order: 10}">
</div>
<div data-id="player-shuffle" class="playerButton playerSmallButton checkable" data-aria-label="Shuffle" data-icon="shuffle" data-player-control="shuffle" data-optional="{group: 30, order: 20}">
</div>
<div data-id="player-playto" class="playerButton playerSmallButton" data-icon="cast" data-player-control="playTo" data-init-params="{noAddClasses: true}" data-control-class="MenuButton" data-optional="{group: 30, order: 30}">
</div>
<div data-tip="Volume bar" class="paddingSides" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max:100, tickPlacement: 'none', tickInterval: 50, wheelStep: 5, speechName: 'volume', speechUnit: 'percent'}" data-id="player-volumebar" data-player-control="volume"></div>
</div>
<div data-id="player-vis-cont" class="flex column no-cpu">
<label data-id="player-rtime" class="paddingTop smallText top" data-player-control="remainingTime" data-optional="{group: 20, order: 20}"></label>
<div data-id="player-vis-subcont" data-optional="{group: 20, order: 30, title: 'Visualizer'}">
<div data-id="player-vis" data-control-class="Visualizer" data-player-control="visualizer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[quote=belomeclone post_id=495477 time=1646738073 user_id=20277]
I appreciate the help Drakinite!
I am looking for:
-the same colours as in MM4's Gilded theme. This should be an easy one. According to an online colour picker, the colours are: #b9b9b9 for the left column with Home/Playing/Music. #f5f5f5 and #e9e9e9 for the alternating colours on the Music view. I would start with that.
-more importantly, I am looking at the bottom player bar. On MM4 it is larger with more information, and that information is visible in the bottom left of the screen, so the peek out of MM4 behind your browser has the Title, Artist, and Album visible. I'd like to recreate that view in MM5. Raise up the size of the player and move the Title (in a larger font), the Artist below it, and the album below that to the left side. I can provide images if needed. I'm sure we can throw in a visualization to fill in some of the empty space.
I'm not sure this is possible. This is what I'm looking for though. Thank you!
[/quote]
Hi, I'm sorry for the late reply.
Changing skin colors is simple once you've got it set up. I would recommend starting with one of the default skins, but there are a few others available at https://www.mediamonkey.com/addons/browse/mediamonkey-5/appearance-1/skins-1/ that you could use. (You're allowed to use & modify any skin published by Ventis Media, but most of the others don't have licenses attached, meaning you should ask permission if you want to redistribute it. I know that Code Monkey is distributed with the MIT license, essentially meaning you can do anything with it.)
Inside the Skins folder of your MM install, create a new folder, name it whatever you want, and paste the contents of the skin you're basing it on into that folder. (Make sure the files aren't in a subfolder). Then edit info.json with the new title and ID that you want.
After that's set up, you can edit .less files in the skin subfolder Start with skin_base_add.less - there, you can change the main colors of the skin. You can use a site like http://hexpicker.com/ to figure out hex codes, but if you are using Visual Studio Code, it'll actually show a built-in color picker to make it easier.
As for changing the layout of the player: This really depends on what skin you're starting with. But as an example, I started with the Material Design skin and did a bit of rearranging. I put the player controls on the left, and replaced the trackSummary label with a list including Title, Artist, and Album. From there, you can tweak to your heart's content. There's a lot more to it, but the basic idea is that [b]class="classA classB"[/b] denotes that an element has two classes, .classA and .classB, and inherits the style associated with both of those. If you want to edit the attributes of a specific element, you can do it with the [b]style[/b] tag, such as for example [b]style="color: red;"[/b]. This is the syntax: https://www.w3schools.com/Css/css_syntax.asp
Here's the slightly tweaked player.html from Material Design:
[code]
<div data-id="player" data-control-class="Player">
<div data-id="player-seekbar" class="stretchWidth" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max: 0, speechName: 'seek bar', speechUnit: 'seconds'}" data-player-control="seek" data-optional="{group: 40, order: 10}"></div>
<div class="flex column">
<div data-id="player-waveform" class="stretchWidth" data-control-class="Waveform" data-player-control="waveform" data-optional="{group: 40, order: 20}" style="display: none"></div>
<div data-id="player-row" class="fill flex row">
<div class="dynamic fill flex flexcenter column vSeparatorTiny" style="flex: 0 0 auto">
<div data-id="playerLeftButtons" class="playerButtons fill flex row static verticalCenter center">
<div data-id="player-prev" class="playerButton playerSmallButton" data-aria-label="Previous file" data-icon="player_prev" data-player-control="previous" data-optional="{group: 10, order: 10}">
</div>
<div data-id="player-play" class="playerButton playerLargeButton" data-aria-label="Play" data-icon="player_play" data-player-control="play">
</div>
<div data-id="player-pause" class="playerButton playerLargeButton" data-aria-label="Pause" data-icon="player_pause" data-player-control="pause">
</div>
<div data-id="player-stop" class="playerButton playerBigButton" data-aria-label="Stop" data-icon="player_stop" data-player-control="stop" data-optional="{group: 10, order: 20}">
</div>
<div data-id="player-next" class="playerButton playerSmallButton" data-aria-label="Next file" data-icon="player_next" data-player-control="next" data-optional="{group: 10, order: 30}">
</div>
</div>
</div>
<div class="flex row" style="flex: 10 10 auto; width: 100">
<div class="flex column dynamicShrink uiRows margins">
<div class="flex row">Title</div>
<div class="flex row">Artist</div>
<div class="flex row">Album</div>
</div>
<div class="flex column dynamicGrow uiRows margins">
<div class="flex row"><label data-id="player-title" class="textWrap" data-player-control="title"></label></div>
<div class="flex row"><label data-id="player-artist" class="textWrap" data-player-control="artist"></label></div>
<div class="flex row"><label data-id="player-album" class="textWrap" data-player-control="album"></label></div>
</div>
</div>
<div class="flex row" style="flex: 10 10 auto; width: 100">
<div class="fill flex column" style="z-index: -1"></div>
<div data-id="player-rating" data-control-class="Rating" data-init-params="{starWidth: '1.72em', starMargin: '0.15em'}" data-player-control="rating" data-optional="{group: 20, order: 20, title:'Rating'}" style="display: none"></div>
<div class="fill flex column" style="z-index: -1"></div>
<div class="flex row">
<div data-id="playerRightButtons" class="flex row static verticalCenter alignRight">
<div data-id="player-repeat" class="playerButton playerSmallButton checkable" data-aria-label="Repeat" data-icon="repeatOne" data-player-control="repeat" data-optional="{group: 30, order: 10}">
</div>
<div data-id="player-shuffle" class="playerButton playerSmallButton checkable" data-aria-label="Shuffle" data-icon="shuffle" data-player-control="shuffle" data-optional="{group: 30, order: 20}">
</div>
<div data-id="player-playto" class="playerButton playerSmallButton" data-icon="cast" data-player-control="playTo" data-init-params="{noAddClasses: true}" data-control-class="MenuButton" data-optional="{group: 30, order: 30}">
</div>
<div data-tip="Volume bar" class="paddingSides" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max:100, tickPlacement: 'none', tickInterval: 50, wheelStep: 5, speechName: 'volume', speechUnit: 'percent'}" data-id="player-volumebar" data-player-control="volume"></div>
</div>
<div data-id="player-vis-cont" class="flex column no-cpu">
<label data-id="player-rtime" class="paddingTop smallText top" data-player-control="remainingTime" data-optional="{group: 20, order: 20}"></label>
<div data-id="player-vis-subcont" data-optional="{group: 20, order: 30, title: 'Visualizer'}">
<div data-id="player-vis" data-control-class="Visualizer" data-player-control="visualizer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[/code]