getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: hiccup on July 09, 2017, 10:36:38 PM

Title: Sample Skin
Post by: hiccup on July 09, 2017, 10:36:38 PM
(http://i.imgur.com/Ed3gQXP.png)


What is this?

It is a MusicBee skin, but it's not intended as an end-user skin, but as a tool for both novice and experiences skinners.

Every colour appearing in this skin is unique and used only once.
This makes it possible to 'eye-drop' or 'color-pick' any part of the skin, and then use that rgb value to easily locate the corresponding element in the skin xml.

It was inspired by the great 'dummy skin' by lminente, but since that one hasn't been updated after it's release many years ago, I created my own personal version a while back. But it was not very complete or fully reliable, so I never shared it.

But recently I managed to complete it and more thoroughly test it, and by now it works quite well. So I thought to publish it.

Apart from the 'colour-picking' feature, there are some other features to be aware of, or that could be made use of:

- It has been stripped of all obsolete and pre- MB v3 elements that I could find.
- It should contain all elements up to the most recent MusicBee version (currently 3.2.6675)

This means it's also intended as some sort of a reference skin. So if you find elements in your own skin that are not in this one, my intention is that it should be safe for you to remove those elements from your skin. And so preventing wasting time on dis-functional and obsolete elements.
But of course, removing such elements is at your own risk. That this works well for me, doesn't mean it's 100% reliable. And if you need full backwards compatibility with MB v2.x it's probably wise not to touch those at all.

- It should also be quite reliable in relation to the presence or absence of 'fg', 'bg', 'bdr' attributes for each element.
  (although I can not guarantee this, since this is not very well documented anywhere else)

- Even-though all elements in this skin were matched against the list of elements that Steven recently provided, I couldn't get a lot of them working.
 This could be either because I missed some spots, because they are just obsolete, or perhaps because they are there for backward compatibility with pre- MB v3.0 skins.
 I have given all those elements the rgb value of '0,255,0'. It might be safe to remove those elements from your own skins. (e.g. in case you have no interest in supporting pre- MB v3 versions)
But again, do that at your own risk. I can't guarantee for 100% that they are obsolete or dysfunctional.

- Even-though this skin is made up with some 'fantasy colour' design, it is very functional.
 It's probably even more useful than most other skins to get a view and a sense of what would be possible to adjust or create by skinning, and will also give a good sense of 'how things work' with all these elements.

- When colour-picking a font, Windows's cleartype will probably make that a bit difficult for you. (unless you have disabled cleartype completely)
 But if you pick the wider horizontal part of a letter (E, F, Z, L, T are good letters for this) you should get the correct rgb value:

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

(I myself am using ICP (Instant Color Picker) for this, and have it configured so that it automatically pastes the rgb value of a clicked colour to Windows' clipboard. That's very handy.)

download Sample Skin  (http://bit.ly/Sample_Skin)
 
Title: Re: Sample Skin
Post by: Alumni on July 10, 2017, 08:11:07 AM
Great idea, hiccup! I wish I had something like this when I first started skinning, would have saved me lots of trial and error. As a side note, I would strongly encourage any novice skinners to use global variables whenever possible.
Title: Re: Sample Skin
Post by: hiccup on July 10, 2017, 08:50:21 AM
updated, added a missing element
Title: Re: Sample Skin
Post by: Bee-liever on July 10, 2017, 10:41:26 AM
Nice work.
Thanks very much for doing this!
Much easier on the eyes than the old 'dummy skin' as well.
Title: Re: Sample Skin
Post by: redwing on July 10, 2017, 11:37:19 AM
I have given all those elements the rgb value of '0,255,0'. It might be safe to remove those elements from your own skins. (e.g. in case you have no interest in supporting pre- MB v3 versions)
But do that at your own risk. I can't guarantee for 100% that they are obsolete.

@users of this tool;
I wouldn't remove them as lots of them are currently working and your skin might not work properly without them.

@hiccup;
I'd provide a unique value for each of 0,255,0 too. Then even when you fail to spot its effect, the user could be benefited because some elements are working only under specific settings, conditions, with/without specific elements/attributes, and that's the real value of this kind of tools just as the dummy skin does. And if the attribute actually does nothing, providing a unique value won't do any harm. Just my 2 cents.
Title: Re: Sample Skin
Post by: hiccup on July 10, 2017, 11:58:13 AM

@users of this tool;
I wouldn't remove them as lots of them are currently working and your skin might not work properly without them.

@hiccup;
I'd provide a unique value for each of 0,255,0 too.

After I get the first reports of 'greenies' (0,255,0) showing up under v3.1 I might consider that.
Otherwise it would be a useless exercise.
Title: Re: Sample Skin
Post by: redwing on July 10, 2017, 12:02:56 PM
Unbelievable...

Then just try this one. Hide header bar, and tell me what's the bg of the tabs bar.
Title: Re: Sample Skin
Post by: hiccup on July 10, 2017, 12:13:05 PM
Unbelievable...

..., and tell me what's the bg of the tabs bar.

So your long absence hasn't cured you from your arrogance.
I'll just ignore you again just like before. Please do the same.
Title: Re: Sample Skin
Post by: redwing on July 10, 2017, 12:23:02 PM
Unbelievable...

..., and tell me what's the bg of the tabs bar.

So your long absence hasn't cured you from your arrogance.
I'll just ignore you again just like before. Please do the same.

Sorry but I don't get it. Why am I arrogant, not you?
Title: Re: Sample Skin
Post by: hiccup on July 10, 2017, 12:47:30 PM
Oh, I see this topic was made sticky.
That makes it slightly more official now.

If anybody uses this skin, and finds oddities or irregularities, please report the specifics here.
I'll follow this thread and will do my best to improve on this skin where possible.
Title: Re: Sample Skin
Post by: hiccup on July 13, 2017, 07:48:53 AM
Minor update.
Title: Re: Sample Skin
Post by: hiccup on July 22, 2017, 02:40:55 PM
updated
Title: Re: Sample Skin
Post by: hiccup on July 27, 2017, 07:37:54 PM
updated
Title: Re: Sample Skin
Post by: hiccup on September 21, 2017, 09:04:29 PM
updated

The previous release had a defect that broke the player panel and the skinned Windows borders.
Title: Re: Sample Skin
Post by: hiccup on April 12, 2018, 01:06:20 PM
updated for MB 3.2 beta
Title: Re: Sample Skin
Post by: hiccup on December 25, 2019, 06:22:01 PM
updated
Title: Re: Sample Skin
Post by: sveakul on December 25, 2019, 07:52:06 PM
Thanks hiccup!
Title: Re: Sample Skin
Post by: hiccup on December 25, 2019, 09:03:56 PM
You're welcome sveakul!

Just curious, do you use it to create your own skins?
If so, perhaps publish them on the Add-ons > Skins pages?
Title: Re: Sample Skin
Post by: sveakul on December 25, 2019, 09:57:40 PM
Just curious, do you use it to create your own skins?
If so, perhaps publish them on the Add-ons > Skins pages?

I use it for color-picking when seeing how some stock skins look with/without a color change in certain elements--invaluable!  For now I have to leave skin creation to the experts.. appreciate your many contributions there too!
Title: Re: Sample Skin
Post by: DonP on April 14, 2020, 10:53:40 AM
Is this skin still useable for 3.3, as I am making a skin and just want to make sure I am using the latest skin to do it?
Title: Re: Sample Skin
Post by: phred on April 14, 2020, 01:12:42 PM
If you read through the thread, you'll see that it's been updated many times.
Title: Re: Sample Skin
Post by: hiccup on April 28, 2020, 02:01:36 PM
Updated

It now shows the suggested image sizes for the border elements.
Title: Re: Sample Skin
Post by: hiccup on July 09, 2020, 04:18:22 PM
Updated

- Added elements for the new Jukebox mode
- Removed some elements I am reasonably sure of were obsolete
- Some minor tweaks
 
Title: Re: Sample Skin
Post by: fred on April 09, 2021, 05:38:55 PM
Simple question - how do I get to the Elements.Panel? Menu,, right-click menu ....?

EDIT: Restored thread subject back to what it was originally.
Title: Re: Sample Skin
Post by: hiccup on August 21, 2021, 05:52:07 PM
updated
Title: Re: Sample Skin
Post by: sveakul on August 21, 2021, 07:54:55 PM
updated
Thanks, a must-have.
Title: Re: Sample Skin
Post by: chrctrlmt on August 23, 2021, 10:15:20 PM
hiccup - any idea how to color the background of the menu button (the musicbee button)?  it's not colored in your sample skin, but is in included skins (such as the pastels).  i've been experimenting with tabsbar, captionbar, menubutton, etc. elements but just can't find it.

https://getmusicbee.com/forum/index.php?topic=35142.msg193855#msg193855 (https://getmusicbee.com/forum/index.php?topic=35142.msg193855#msg193855)
Title: Re: Sample Skin
Post by: hiccup on August 23, 2021, 10:41:53 PM
hiccup - any idea how to color the background of the menu button (the musicbee button)?  
How that button appears can depend on the settings under <settings> in the skin.xml.
If you post a screenshot of what you are looking at it might help.
Title: Re: Sample Skin
Post by: chrctrlmt on August 23, 2021, 10:54:40 PM
sure - the first screenshot shows the 'azure' skin which has a unique color applied to just the background of the main menu/musicbee button.  the second screenshot is of the skin as i have it (an edited dark metro skin using "<root dependsOn="DarkLIME.xmlc">), with no background color applied.  i've only been able to color the text.

https://imgur.com/a/P5b8ATU (https://imgur.com/a/P5b8ATU)

Title: Re: Sample Skin
Post by: hiccup on August 24, 2021, 06:54:14 AM
That must be the FormBorderTopLeft element.
It is supposed to be 5x28 pixels, but it looks like the creator of that skin made it a lot wider.

In the sample skin (latest version) you should be able to see it and pick it if you colour pick the very top--left of the caption bar.
Title: Re: Sample Skin
Post by: chrctrlmt on August 24, 2021, 01:34:40 PM
I tried copying the string mentioned:

 <element id="FormBorderTopLeft">
        iVBORw0KGgoAAAANSUhEUgAAAAUAAAAcAQMAAACTeOf1AAAAA1BMVEU+ZYvrbzAKAAAAC0lEQVR4
        XmMgEwAAADgAARjE5tUAAAAASUVORK5CYII=
  </element>

as well as experimenting with things like:

<element id="FormBorderTopLeft" fg="155,155,155" />

etc, but it seems to make the entire skin fail to load and reverts back to the default.  For darkLIME, I'm trying to color the background of the button the same shade of lime the rest of the skin uses.  Any idea what that line might look like?

Thanks for your help.
Title: Re: Sample Skin
Post by: hiccup on August 24, 2021, 01:51:42 PM
Are you editing the original skin xml?

Or are you trying to do this using a piggyback skin?
That will not work for this.

Could you please post skinning questions that do not directly pertain to the Sample Skin, in the general 'Skins' board?
https://getmusicbee.com/forum/index.php?board=21.0

Or see if there is a forum topic by the original skin creator and post any questions there.
Title: Re: Sample Skin
Post by: Mayibongwe on November 18, 2021, 04:15:56 PM
Hiccup,
I've decided to take my shot at skin creation and your sample skin has been really really helpful so far (so thanks a lot for that!).
There's something I need help with though...
(https://i.imgur.com/qNk0Qyz.png)
I can't seem to find the element that corresponds with the icon colour in the tabs bar.
Title: Re: Sample Skin
Post by: hiccup on November 18, 2021, 07:21:41 PM
I can't seem to find the element that corresponds with the icon colour in the tabs bar.
It is "IconColourOverride.Default"
The reason why it wasn't matched is because you picked it's colour on an inactive tab instead of on an active tab.
And for inactive tabs, the icon colour is (can be) adjusted using the 'InactiveTabIconMask' element.
(to e.g. have the icon higher contrast for active tabs, and lower contrast for inactive tabs)

Thanks for bringing this to attention. I have updated the Sample Skin so this will work on inactive tabs now too.
Title: Re: Sample Skin
Post by: Mayibongwe on November 19, 2021, 02:27:01 PM
Thanks. One more thing, can you please confirm if the colour below is available in the xml file...I can't find it.
(https://i.imgur.com/B2lAfzW.png)
Title: Re: Sample Skin
Post by: hiccup on November 19, 2021, 04:18:55 PM
Thanks. One more thing, can you please confirm if the colour below is available in the xml file...I can't find it.
(https://i.imgur.com/B2lAfzW.png)
That's an odd duck indeed.

For as far as I can tell, it is auto-calculated somehow using values from "Content[TrackDetail].Body.Default" and "Content[TrackDetail].Body.Disabled"
Which seems a bit weird and unexpected for a panel containing artwork, and the result in the Sample Skin surely looks a bit off.

Only Steven will be able to tell how it works exactly, and if this intentional.
As long as it doesn't cause issues for normal skins it's probably not a problem.
Title: Re: Sample Skin
Post by: Mayibongwe on November 19, 2021, 06:59:33 PM
For as far as I can tell, it is auto-calculated somehow using values from "Content[TrackDetail].Body.Default" and "Content[TrackDetail].Body.Disabled"...
That turned out to be true (thanks).
Taking what you said into account, does this also mean that the text below (demarcated in green) also gets its respective colours from certain groups of elements?
Are their RGB values also auto-calculated? (Since I cannot locate their specific elements in the xml file)
(https://i.imgur.com/qv2Afhv.png)
Title: Re: Sample Skin
Post by: hiccup on November 19, 2021, 07:12:19 PM
…does this also mean that the text below (demarcated in green) also gets its respective colours from certain groups of elements?…
I'm currently not in a focussed state of mind/mood to go into much details, but…

If you colour pick a colour in the Sample Skin, and it's not defined in the xml, the only explanation is that that colour is auto-calculated by MusicBee.
If you think about what a skin xml does, this will be obvious.
( edit, not entirely true, see here: https://getmusicbee.com/forum/index.php?topic=22300.msg195851#msg195851 )

If you go years back, a lot of elements were auto-coloured using some smart algorithm.
They usually worked fine in general, but skinners were not always satisfied in how they turned out for their skins, and then asked for new and dedicated skinning elements that made it possible to define them specifically.
Pretty much all sensible requests have been fulfilled on that.
(if you check very old skin xml's you will see they have far fewer lines of 'elements' than current ones)

So if you run into an element that you can not define yourself, and are not happy about how the auto-colouring algorithm makes it look:
Create a wish for a dedicated element to define it.
Title: Re: Sample Skin
Post by: hiccup on November 19, 2021, 07:20:14 PM
Taking what you said into account, does this also mean that the text below (demarcated in green) also gets its respective colours from certain groups of elements?
Are their RGB values also auto-calculated? (Since I cannot locate their specific elements in the xml file)
Not speaking about this specific screenshot, but keep in mind that at several locations in MusicBee you (and any user) can adjust the contrast for specific fields using panel configuration settings.
So if you have set the contrast of a specific text field to e.g. 40%, where my Sample Skin was using 100%, colour picking that text field will also fail.
Title: Re: Sample Skin
Post by: Mayibongwe on November 19, 2021, 07:38:22 PM
Oh I see. That makes so much sense. I've been trying to recreate your Tron Punk skin (using the sample skin as a template).
I figured that would be the easiest way for me to learn about skins...and so far this approach has worked well.

That clears up most of my confusion. I'll direct more questions/requests to their relevant threads.
The sample skin is a perfect tool for one to get started. Thanks Hiccup.

Got a long way to go...but this has helped with my general understanding of the basics.
(https://i.imgur.com/UvGGrEE.png)
Title: Re: Sample Skin
Post by: Mayibongwe on March 03, 2022, 04:42:40 PM
hiccup...got a couple of things to report.

- The background (bg) attribute for PlayerTopFlat.DisplayPanel is missing.
- Colours from the Now Playing pop up do not match with those of NowPlayingPopup.Body and NowPlayingPopup.Border.
Title: Re: Sample Skin
Post by: hiccup on March 03, 2022, 06:50:19 PM
- The background (bg) attribute for PlayerTopFlat.DisplayPanel is missing.
Thnx, now added.

Quote
- Colours from the Now Playing pop up do not match with those of NowPlayingPopup.Body and NowPlayingPopup.Border.
That's because the pop-up panel always gets some transparency applied.
Even if you have set the slider completely to 'opaque'
I added a little comment in the skin xml to explain that.

Thanks for reporting!
Title: Re: Sample Skin
Post by: hiccup on March 05, 2022, 02:13:21 PM
- Colours from the Now Playing pop up do not match with those of NowPlayingPopup.Body and NowPlayingPopup.Border.
Since the transparency that is applied to the pop-up panel is very minor, it was doable to add all resulting rgb variations in comment fields.

I believe that every item that is colour-picked in the pop-up panel should now get results, irrelevant of the background that is behind that panel.
Let me know if you find something still not working there?
Title: Re: Sample Skin
Post by: Mayibongwe on March 05, 2022, 02:57:18 PM
(https://i.imgur.com/LtDwle5.png)
Seems to be off by a single digit.
I'm not getting a single match for the other element.
Title: Re: Sample Skin
Post by: hiccup on March 05, 2022, 03:16:53 PM
added 0,234,133

I'm not getting a single match for the other element.
What other element do you mean?

edit,
You mean the pink line beneath it?
Hm, I'll re-check that one too.
(b.t.w. your screenshot has weird rgb values, I am guessing it's a jpg, not a png?)
Title: Re: Sample Skin
Post by: Mayibongwe on March 05, 2022, 04:35:35 PM
What other element do you mean?
NowPlayingPopup.Body

On my system, the bg attribute for this popup element has three different rgb combinations which are all not present in the xml file... (1 (https://i.imgur.com/piBWNwO.png), 2 (https://i.imgur.com/pqXehul.png), 3 (https://i.imgur.com/qEBNI7l.png))
Although when having the popup appear on a pure white background, I managed to get the exact rbg value outlined in <element id="NowPlayingPopup.Body" bg="181,203,235"...

There just seems to be too many variations for us to cover them all.
What we can bet on is that, anyone who later struggles to identify these colours will come to this thread and hopefully understand why they aren't getting any matches.

- Colours from the Now Playing pop up do not match with those of NowPlayingPopup.Body and NowPlayingPopup.Border.
That's because the pop-up panel always gets some transparency applied...even if you have set the slider completely to 'opaque'
Title: Re: Sample Skin
Post by: hiccup on March 05, 2022, 05:12:22 PM
There just seems to be too many variations for us to cover them all.
Yeah, so there are more than I anticipated on.
The only solid solution would be if MusicBee wouldn't apply any transparency at all when the opacity slider is completely to the right.

Anyway, with all the values added now, chances are very slim someone wouldn't be able to find the element at all.
Most likely at least one of the items of the panel will now give a match and lead to the element and the explanation in the xml.
Title: Re: Sample Skin
Post by: Mayibongwe on March 20, 2022, 10:22:07 AM
hiccup...Controls.InputControl.Modified is missing a bdr attribute.
(looks like you also never made use of it in your Tron Punk skin)
Title: Re: Sample Skin
Post by: hiccup on March 20, 2022, 01:18:56 PM
hiccup...Controls.InputControl.Modified is missing a bdr attribute.
(looks like you also never made use of it in your Tron Punk skin)
Where and when does this bdr show up? (I can't find it right now)
Title: Re: Sample Skin
Post by: Mayibongwe on March 20, 2022, 02:01:06 PM
Sorry, should have elaborated there.
- open the tag editor and modify a field.
- switch to another tab within the editor.
- return to the tab with the modified field and you'll see a grey border around it.
Title: Re: Sample Skin
Post by: hiccup on March 20, 2022, 02:17:06 PM
- return to the tab with the modified field and you'll see a grey border around it.
Ah yes, I see.
To be honest, I have some suspicion this may not be an intended feature.
Anyway, since it indeed does this, I'll add it to the Sample Skin and to Tron Punk. (and I will probably need to check all my skins ;-(
Thnx.
Title: Re: Sample Skin
Post by: ben1arh on March 24, 2022, 09:08:30 AM
Hi, when I open up the upcoming concerts, the link button to songkick.com is completely coloured in dark green.
Probably the effect of IconColourOverride.Default but it would be great if this songkick button could be excluded. Is that possible?
Title: Re: Sample Skin
Post by: Mayibongwe on March 24, 2022, 09:19:57 PM
...but it would be great if this songkick button could be excluded. Is that possible?
I believe the exclusion can only be done from Steven's (MusicBee's developer) side.
Without his intervention, the only way around this would be getting rid of IconColourOverride.Default altogether and having your own appropriately coloured icons.

For now, create a separate topic for this request in the (Developers' Area) skins board. 'Cause it might not get seen if it just remains here.
And from what I've noticed, it's not just the Upcoming Concerts icon that gets blanked out...the SoundCloud icons (in the Search Service and Play History node) also get affected.
Title: Re: Sample Skin
Post by: ben1arh on March 24, 2022, 10:28:39 PM
the SoundCloud icons (in the Search Service and Play History node) also get affected.
Yes indeed, maybe because these are icons without transparency?

create a separate topic for this request in the (Developers' Area) skins board.
Ok, I will try to find my way  8)
Title: Re: Sample Skin
Post by: Mayibongwe on April 09, 2022, 12:22:42 PM
Controls.ScrollBar.Default (scrollbar in the tag inspector) is missing a bdr attribute.
Title: Re: Sample Skin
Post by: hiccup on April 09, 2022, 04:25:49 PM
Controls.ScrollBar.Default (scrollbar in the tag inspector) is missing a bdr attribute.
Thanx, added.
I also changed the elements that we both believe to be obsolete to greenies.
Title: Re: Sample Skin
Post by: MusicBebe on May 25, 2022, 05:39:20 AM
Thanks for this! I like this skin pretty much as it is. I am playing with a second portable install of MB, and wanted something I couldn't possibly mistake for my regular one. It serves its purpose well, and keeps the different MB zones visible, but without being distracting or compromising usability or imposing a strong style or aesthetic. Colorfully zen.

The one thing I'd like to change, I can't figure out from looking at the xml. In the main view, I would like the text color to be the same on all lines. and not alternate every line, though the alternation of the bg is perfect. Unless - it only looks like alternating text color because of the different backgrounds? (I don't think it's that, but it seems possible.)

I've looked around the xml, and I can see how I could modify it, but I haven't identified which value to mod. I 've searched for "text" and "color" and even "font" and have made a number of fun changes! But not the one I want. So I thought I'd ask. It's in there somewhere, isn't it?

Thanks!
Title: Re: Sample Skin
Post by: hiccup on May 25, 2022, 06:24:07 PM
Thanks for this! I like this skin pretty much as it is.…
Colorfully zen…
Haha, thanks. While 'normal usage' was not the purpose of this skin, it's nice to hear that it is suitable for that, and that it is also able to trigger zen moods in people ;-)

Quote
…I would like the text color to be the same on all lines. and not alternate every line, though the alternation of the bg is perfect…
I've looked around the xml, and I can see how I could modify it, but I haven't identified which value to mod. I 've searched for "text" and "color" and even "font" and have made a number of fun changes! But not the one I want. So I thought I'd ask. It's in there somewhere, isn't it?
Have you read the start post? I think it explains pretty well how to find any specific element. (using a colour picker)
Title: Re: Sample Skin
Post by: MusicBebe on May 25, 2022, 08:39:53 PM
Have you read the start post? I think it explains pretty well how to find any specific element. (using a colour picker)

You are right - it does explain it pretty well! I breezed right past it in my rush to plunge in.  :-[  I've now found the elements I'm looking for.

Thanks again for preparing this demo!