getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: hiccup on October 26, 2018, 05:24:32 PM

Title: Elemental
Post by: hiccup on October 26, 2018, 05:24:32 PM
(https://i.imgur.com/zoWH6Qy.png)

Because of the somewhat larger player controls and volume slider, this skin should also be useable on touch-screen devices.


(https://i.imgur.com/EhNQGMY.png)


download Elemental (https://rebrand.ly/skin_Elemental)
Title: Re: Elemental
Post by: phred on October 26, 2018, 06:34:31 PM
Nicely done. Especially like the wide-narrow-wide effect with the play controls.
Title: Re: Elemental
Post by: hiccup on October 27, 2018, 12:27:55 PM
Thanks.
In case you are going to use it yourself, make sure to re-download since I fixed an oversight and made some refinements today.

(but you probably won't, since I don't think a skinner would ever use another one's skin)
Title: Re: Elemental
Post by: wealstarr on November 06, 2018, 08:12:26 PM
Thanks for this awesome wok hiccup. Excellent choice of colors. It just can't get any better then this. Not too dark for a dark skin, just right.

However,there seems to be an issue

(https://i.postimg.cc/JhVsd28p/Capture.png)

Look at the header of playing track info panel. The header for this panel is hidden but it leaves a band visible. Is it possible to solve this ?

Also, is it possible for you to create a version that has auto hide scrollbars. It changes colors on hover but I want it be completely hidden until hovered. Is it possible ?

Title: Re: Elemental
Post by: hiccup on November 07, 2018, 03:11:43 AM
Look at the header of playing track info panel. The header for this panel is hidden but it leaves a band visible. Is it possible to solve this ?
Also, is it possible for you to create a version that has auto hide scrollbars. It changes colors on hover but I want it be completely hidden until hovered. Is it possible ?

I will not change the skin itself, but I have created an supplementary skin file that will only change the colouring of the items that you mention.
You'll find the file: Elemental (tweak).xml at the original download location of the skin.
Unpack it, add it to MusicBee's skin folder (and be sure to keep the original Elemental skin in that folder too), and after restarting MB select 'Elemental (tweak)' instead of 'Elemental' as your skin.

P.S.
In your screenshot I see (barely noticeable) slightly lighter horizontal lines under and above the words 'stop', 'pause', etc. in the player control buttons.
They shouldn't be there.
Are they visible when you use the skin, or did they perhaps get generated by creating the screenshot somehow?
Title: Re: Elemental
Post by: wealstarr on November 07, 2018, 10:17:25 AM
Thanks for the tweak hiccup. Highly appreciated.


Yes those lines are indeed visible moreover there are other UI elements that appear to be off too.

(https://i.postimg.cc/LXYWk2SC/zx-element-1.png)

Notice the wave bar is not exactly in the middle of the background band and the track timers are overlapping the wave bar too.

(https://i.postimg.cc/0Nmm7B3G/zx-element-2.png)

Notice the track timers again, they appear at the place they don't suppose to. Also the volume slider and progress bar. Not sure if they are in the places intended.

(https://i.postimg.cc/xCp080R6/zx-element-3.png)

The text of the tab is off too, not exactly in the center but a bit lower then what it's supposed to be.

I will gladly accept the improved version but even if you don't improve this skin, I'll still keep using it.

Thanks again for the fix.
Title: Re: Elemental
Post by: hiccup on November 07, 2018, 10:39:46 AM

Yes those lines are indeed visible

That's odd. What version of MusicBee are you using?
(It looks like it doesn't handle the transparency the buttons are using correctly)

Do you have Windows scaling set to something else than 100%?

Quote
Notice the wave bar is not exactly in the middle of the background band and the track timers are overlapping the wave bar too.

It is not possible to simply adjust the position of the wavebar itself without influencing other parts of the player panel.
I am not satisfied with it myself either but this is the best compromise I could come up with.

Quote
Notice the track timers again, they appear at the place they don't suppose to. Also the volume slider and progress bar. Not sure if they are in the places intended.

I suspect that could be a result of Windows scaling. (assuming that you are using that?)

Quote
The text of the tab is off too, not exactly in the center but a bit lower then what it's supposed to be.

That's not something that can be adjusted by skinning.


Thanks for the feedback!
Title: Re: Elemental
Post by: wealstarr on November 07, 2018, 12:04:55 PM

Quote
That's odd. What version of MusicBee are you using?
(It looks like it doesn't handle the transparency the buttons are using correctly)

I'm on version 3.3


Quote
Do you have Windows scaling set to something else than 100%?

Yeah! It's a high DPI resolution monitor, 100% is barely readable.


Quote
It is not possible to simply adjust the position of the wavebar itself without influencing other parts of the player panel.
I am not satisfied with it myself either but this is the best compromise I could come up with.

oh! I understand. I apologize I wasn't aware of this shortcoming.


Quote
That's not something that can be adjusted by skinning.


I don't want to say it but it's quite unfortunate that Musicbee's UI capabilities doesn't match it's functionalities. I wish Steven had paid little attention on this.

Thank you for this fine skin hiccup. I will look forward to more stuff from you.
Title: Re: Elemental
Post by: hiccup on November 08, 2018, 03:22:53 PM
I don't want to say it but it's quite unfortunate that Musicbee's UI capabilities doesn't match it's functionalities. I wish Steven had paid little attention on this.

I don't think that's a fair, or a correct statement.


I have made a change to the skin so that the faint lines that appeared on the player buttons when Windows' scaling is set should be gone.

(the download link is in the start post)
Title: Re: Elemental
Post by: Sand Raider on November 27, 2018, 08:00:31 PM
Superb skin, just one issue, after proceeding to the download link the folder appears to be empty...
Title: Re: Elemental
Post by: hiccup on November 28, 2018, 08:42:29 AM
Superb skin, just one issue, after proceeding to the download link the folder appears to be empty...

I'm sorry, not sure what happened.
The download should now work again.
Title: Re: Elemental
Post by: Sand Raider on November 28, 2018, 09:05:06 PM
Superb skin, just one issue, after proceeding to the download link the folder appears to be empty...

I'm sorry, not sure what happened.
The download should now work again.

Thank you and well done on the skin  :)
Title: Re: Elemental
Post by: hiccup on November 29, 2018, 03:49:40 PM
:-)
Title: Re: Elemental
Post by: hiccup on November 30, 2018, 10:21:33 AM
Notice the track timers again, they appear at the place they don't suppose to.

This is fixed now.
Title: Re: Elemental
Post by: hiccup on January 03, 2019, 09:40:10 PM
Some errors were fixed for when the player controls are positioned in the top pane.
Title: Re: Elemental
Post by: gpzbc on January 22, 2019, 04:00:53 AM
I'm loving this skin. Thank you!
Title: Re: Elemental
Post by: hiccup on April 07, 2019, 05:48:38 PM
minor update
Title: Re: Elemental
Post by: hiccup on May 24, 2019, 08:48:33 PM
Updated, a small glitch with the player controls when the wave bar was selected is fixed.
Title: Re: Elemental
Post by: Logan on June 29, 2019, 10:57:48 PM
Really easy on the eye. Thank you!
Title: Re: Elemental
Post by: neworleans on October 01, 2019, 01:41:53 PM
I love this skin. Thank you!
I have a small suggestion. Status bar is hardly readable that i need to squint my eyes to read it. Can we change it to another color?
Title: Re: Elemental
Post by: hiccup on October 01, 2019, 05:42:21 PM
Status bar is hardly readable that i need to squint my eyes to read it. Can we change it to another color?

Yes we can!
(...but I won't, since I like it as it is ;-)

You can change it's colour by creating your own piggy-bag skin:

- create a new text file.
- copy this code into it:

Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="Elemental.xmlc">
<colours id="Default">
 <element id="Panel.StatusBar.Default" bg="48,48,48" fg="160,160,160" bdr="48,48,48" />
 <element id="Panel.StatusBarInPanel.Default" bg="48,48,48" bg2="48,48,48" fg="160,160,160" bdr="48,48,48" />
 <element id="Panel.StatusBarBelowPlayer.Default" bg="48,48,48" bg2="48,48,48" fg="160,160,160" bdr="48,48,48" />
</colours>
</root>

- save the file as: Elemental Edit.xml  (or use any name  you like)
- put the file in MusicBee's skin folder

Next, in MusicBee select that skin.
That's it.

If you want to make the text lighter or darker, change the 160,160,160 RGB values to something else.

Note that the original Elemental.xmlc skin needs to be present in that folder to make this work.
Title: Re: Elemental
Post by: neworleans on October 01, 2019, 06:35:47 PM
Thanks for quick reply and help man. I appreciate it.


This is just looking perfect
(https://i.ibb.co/FwyXpsH/Screenshot-6.jpg)
Title: Re: Elemental
Post by: alec.tron on October 12, 2019, 08:44:07 AM
Hey Hiccup,
really neat skin - just switched to it as my new default ;)

I would love to do 2 colour adjustments too.... one being the rating value icons and colour them differently, i.e. thumbs down (dark grey) & stars icon (bright grey, or even yellow/orange, not sure yet... :D ).
As well as potentially adjust the Waveform display colours slighty....
Can that be achieved easily on my end (i.e. through a similar tweak as above via - Elemental Edit.xml ) ?

Cheers.
c.
Title: Re: Elemental
Post by: hiccup on October 12, 2019, 08:53:41 AM
That's nice to hear.

Have you seen/tried this tutorial?: how to change skin colours (http://bit.ly/MBforumLinkChangeSkinColours)
Title: Re: Elemental
Post by: hiccup on October 12, 2019, 09:01:42 AM
PS

The thumbs-down icon colour looks fine here (in my opinion)

(https://i.imgur.com/Lq1PmET.png)

Is there perhaps another location where it displays badly and I may need to change it myself?
Title: Re: Elemental
Post by: alec.tron on October 12, 2019, 11:16:06 AM
Thanks for the link!

The colouring is just a subjective preference, no objective issue ;)
I would love to have contextual colouring - ideal would be the more stars, the brighter, or even full colour changes...
But for starters, dimming down the thumbs down, and colouring stars differently from thumbs down would for quick visual readability for me (which I would prefer over a consistent look).

Is there a list/documentation of "element id=" your Elemental Skin uses, and which can be altered by ID ? So does waveform and/or stars/thumbs-down have an element ID  I could ise ?

Churs.
c.

ps. the example skin in there was great info! Thanks!
I would have thought this would colour the wavebar in yellow/red for testing.... but no luck thus far...
Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="Elemental.xmlc">
<colours id="Default">
 <element id="Player.Wavebar" bg="242,238,238" fg="255,255,0" fg2="255,0,0" />
 <element id="Player.Wavebar.Inner" fg="255,255,0" fg2="255,0,0" />
</colours>
</root>


This unfortunately doesn't show any notoicable change to the wavebar either, and that has all wavebar IDs I could find:
Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="Elemental.xmlc">
<colours id="Default">
 <element id="Player.Wavebar" bg="255,255,0" fg="255,255,0" fg2="255,0,0" />
 <element id="Player.Wavebar.Inner" fg="255,255,0" fg2="255,0,0" />
 <element id="PlayerFlat.Wavebar" fg="0,0,255" fg2="0,0,255" />
 <element id="PlayerFlat.Wavebar.Inner" fg="0,0,255" fg2="0,0,255" />
 <element id="PlayerTopFlat.Wavebar" fg="0,0,255" fg2="0,0,255" />
 <element id="PlayerTopFlat.Wavebar.Inner" fg="0,0,255" fg2="0,0,255" />
 <element id="Compact.Player.Wavebar" fg="0,255,0" fg2="0,255,0" />
 <element id="Compact.Player.Wavebar.Inner" fg="0,255,0" fg2="0,255,0" />
</colours>
</root>
Title: Re: Elemental
Post by: hiccup on October 12, 2019, 11:42:43 AM
This unfortunately doesn't show any notoicable change to the wavebar either, and that has all wavebar IDs I could find:
Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="Elemental.xmlc">
<colours id="Default">
 <element id="Player.Wavebar" bg="255,255,0" fg="255,255,0" fg2="255,0,0" />
 <element id="Player.Wavebar.Inner" fg="255,255,0" fg2="255,0,0" />
 <element id="PlayerFlat.Wavebar" fg="0,0,255" fg2="0,0,255" />
 <element id="PlayerFlat.Wavebar.Inner" fg="0,0,255" fg2="0,0,255" />
 <element id="PlayerTopFlat.Wavebar" fg="0,0,255" fg2="0,0,255" />
 <element id="PlayerTopFlat.Wavebar.Inner" fg="0,0,255" fg2="0,0,255" />
 <element id="Compact.Player.Wavebar" fg="0,255,0" fg2="0,255,0" />
 <element id="Compact.Player.Wavebar.Inner" fg="0,255,0" fg2="0,255,0" />
</colours>
</root>

It works for me.
Have you named your new skin file differently from 'Elemental', and did you select that new skin name in MusicBee?
Title: Re: Elemental
Post by: alec.tron on October 12, 2019, 11:43:00 AM
Nevermind, user-error.
I did not re/point MusicBee to the edited .xml that references the .xmlc.
Done now & now I have blindness inducing yellow & reds...
Cheers.
c.
Title: Re: Elemental
Post by: hiccup on October 12, 2019, 11:49:19 AM
I would love to have contextual colouring - ideal would be the more stars, the brighter, or even full colour changes...
But for starters, dimming down the thumbs down, and colouring stars differently from thumbs down would for quick visual readability for me (which I would prefer over a consistent look).

At the moment MusicBee already dims the 'No stars' icon by some 20%. (which I don't like personally, I prefer consistency)

It is currently not possible to set different colours as you describe above.
You could post a wish for that in the skin developers board.
 

Quote
Is there a list/documentation of "element id=" your Elemental Skin uses, and which can be altered by ID ?

All elements that are in my Sample Skin should be present in all my other skins too.
So if you use a colour picker on the Sample Skin it shouldn't be hard to find the right element.
Title: Re: Elemental
Post by: hiccup on October 12, 2019, 11:52:18 AM
Done now & now I have blindness inducing yellow & reds...

Haha, please be kind to my delicate skin ;-)
Title: Re: Elemental
Post by: alec.tron on October 12, 2019, 12:33:40 PM
Haha, please be kind to my delicate skin ;-)

I'll try to... dialed it back to useable levels, and re-using your orange:

Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="Elemental.xmlc">
<colours id="Default">
 <element id="Player.Wavebar" bg="54,54,54" fg="68,68,68" fg2="111,88,66" />
 <element id="Player.Wavebar.Inner" fg="42,42,42" fg2="245,124,3" />
</colours>
</root>

That'll do for now for me.
c.
Title: Re: Elemental
Post by: alec.tron on October 12, 2019, 12:56:51 PM
One oddity still - the Playlist Explorer, which I use heavily, has a slightly different background grey, i.e. 54,54,54, similar to the "Library Explorer" which pops out from left on hover. But, all other Music Explorer panels use a 48, 48, 48 grey....
I can't find a Playlist Explorer panel explicitly mentioned in the sample xml... any idea how/where the Playlist Explorer panel bg setting would live ?

Cheers.
c.
Title: Re: Elemental
Post by: hiccup on October 12, 2019, 01:14:32 PM
I can't find a Playlist Explorer panel explicitly mentioned in the sample xml... any idea how/where the Playlist Explorer panel bg setting would live ?
Are you using a colour piker on the Sample Skin?
That would tell you it uses the same colour as the library explorer panel:
<element id="Panel.Body.Default"
Title: Re: Elemental
Post by: watdub on October 14, 2019, 07:55:50 PM
Thanks for this skin.  The album covers/photos really 'pop' (albums and tracks view).  
I've just 'wasted' an half hour scrolling up and down through the album photos reconnecting album covers with old memories  :)
Title: Re: Elemental
Post by: hiccup on October 14, 2019, 08:11:01 PM
I've just 'wasted' an half hour scrolling up and down through the album photos reconnecting album covers with old memories  :)

That's half an hour well-spent.
Men in chairs smoking cigars or scrolling albumart in MusicBee don't cause wars...
Title: Re: Elemental
Post by: Johan_A_M on October 16, 2019, 07:56:09 PM
This is a fantastic skin, thank you Hiccup, I really love it! One question (sorry, I can't do a screenshot right now): When tagging multiple files with different e.g. genres, the dropdown menu does not have any visual checkboxes. Instead, I think the text changes color on mouse-over. Is this by design or a minor glitch?
Title: Re: Elemental
Post by: hiccup on October 16, 2019, 08:00:29 PM
the dropdown menu does not have any visual checkboxes.

What location is this?
Docked tag editor? Floating tag editor, sidebar editor? Somewhere else maybe?
Title: Re: Elemental
Post by: Johan_A_M on October 16, 2019, 08:13:28 PM
the dropdown menu does not have any visual checkboxes.

What location is this?
Docked tag editor? Floating tag editor, sidebar editor? Somewhere else maybe?

It's at least in both the vertical tag editor as well as the Edit window. It's when you see "Mixed" in a tag and click the arrow to pick one or several. I suspect this is by design, just curious. I'll make a screenshot later when I'm at the correct computer, if not for anything else then at least for future clarity.
Title: Re: Elemental
Post by: hiccup on October 16, 2019, 08:18:47 PM
Take your time.
My eyes are a bit tired, my display set to very low brightness/blue light, so I'm going to take a look at this with fresh eyes probably tomorrow.
Thanks for reporting.
Title: Re: Elemental
Post by: hiccup on October 16, 2019, 08:46:44 PM
It's when you see "Mixed" in a tag and click the arrow to pick one or several.

Ah yes, I see what you mean.
I'll see if I can change it, but it might be a bit difficult because it shares the colour of similar elements at other locations.
And since it is a low contrast grey skin, and small deviations in brightness is pretty much the only thing I can toy with here, this might require a new colouring element that does not yet exist.
I'll see what I can figure out one of these days.
Title: Re: Elemental
Post by: Johan_A_M on October 16, 2019, 08:49:49 PM
It's when you see "Mixed" in a tag and click the arrow to pick one or several.

Ah yes, I see what you mean.
I'll see if I can change it, but it might be a bit difficult because it shares the colour of similar elements at other locations.
And since it is a low contrast grey skin, and small deviations in brightness is pretty much the only thing I can toy with here, this might require a new colouring element that does not yet exist.
I'll see what I can figure out one of these days.

Don't put too much time into this, I was mostly curious :)
Title: Re: Elemental
Post by: hiccup on November 03, 2019, 11:54:24 AM
Updated.

- Fixed a bug when having the player bar on top and tabs in the caption bar.
- Added icons for drives and devices. (they will only display with MB 3.4 which is at the moment not yet available as a stable release)

@Johan_A_M,
The issue with the invisible check-boxes has not been fixed. I've put out a skinning feature request to make it possible to hopefully address this in the future.
Title: Re: Elemental
Post by: Johan_A_M on November 04, 2019, 08:54:25 AM
Updated.

- Fixed a bug when having the player bar on top and tabs in the caption bar.
- Added icons for drives and devices. (they will only display with MB 3.4 which is at the moment not yet available as a stable release)

@Johan_A_M,
The issue with the invisible check-boxes has not been fixed. I've put out a skinning feature request to make it possible to hopefully address this in the future.

Great news, I still find this skin to be my absolute favourite!
Title: Re: Elemental
Post by: hiccup on December 25, 2019, 01:40:26 PM
Updated, minor tweaks.

Quote
The issue with the invisible check-boxes has not been fixed. I've put out a skinning feature request to make it possible to hopefully address this in the future.

This is now also fixed.
Thanks Johan_A_M for reporting.
(Note that this will only be fixed for MusicBee 3.4+ which is not yet available at this moment.)
Title: Re: Elemental
Post by: Johan_A_M on December 26, 2019, 08:17:04 PM
This is now also fixed.
Thanks Johan_A_M for reporting.
(Note that this will only be fixed for MusicBee 3.4+ which is not yet available at this moment.)

Great, thanks!
Title: Re: Elemental
Post by: hiccup on February 15, 2020, 04:36:08 PM
Updated, fixed the wavebar being slightly off-center.
Title: Re: Elemental
Post by: hiccup on June 21, 2020, 12:31:13 PM
updated

Main changes:
- The Jukebox view is skinned.
- The readability/contrast of sub-text fields in 'Album and Tracks' view and in the Expanded Album panel is improved.

note: both these updates only function under MusicBee 3.4
(which is currently under development and in alpha release state)
Title: Re: Elemental
Post by: hiccup on April 11, 2021, 09:55:56 AM
updated

improved the contrast/legibility of the text in the status bar
Title: Re: Elemental
Post by: hiccup on October 23, 2021, 09:21:19 AM
updated

The last.fm scrobble button can now be hidden.
Title: Re: Elemental
Post by: hiccup on April 17, 2022, 07:30:35 PM
updated

I actually updated all my skins, but I didn't feel like creating 20+ 'updated' posts, so I only announce it for three popular ones.

- fixed the issue where custom contrast settings for the Track Information panel would not function on pre-3.5 MB versions
- improved the quality of the 'Unknown Artist' image in Explorer
- added: PDF indicator icon