3xG -New MB Skin

[IndigoFairyX]

Code

 <!-- Skin Name: 3xG -Deep -->
 <!-- Version: 2.0 -->
 <!-- Optimized for MusicBee version: 3.4 -->
 <!-- Created: v.2024.03.11 By: IndigoFairyX -->
 <!-- Forum Info Link: https://getmusicbee.com/forum/index.php?topic=40867.0  -->
 <!-- Inspiration: Kryptonite Dark by Ingo_Igel -->

<!-- Update: v2.0 v.2024.03.31, Comments -->
<!-- **BUGFIX** !! Found & added a missing element in the skin that was causing a soft-crash, error in the now playing side panels!  If you’re using v1.7 or below I recommend deleting those skins; replace them with this update!

GUI color Tweaks….
Tweaked scroll bar backgrounds to be a bit darker.
Tweaked Prefs panel colors & buttons to be darker and match better
Tweaked Menu Colors, made menus darker and the mouse hover colors now match the panel body colors.
Tweaked Header Menus bars with gradients and matched menus text colors. -->

<!-- **BUGFIX** in v2.0 !! -- Found & added a missing element in the skin that was causing a soft-crash, error in the now playing side panels!  If you’re using v1.7 or below I recommend deleting those skins; replace them with this update!

Code

 <!-- Updated: v1.5 v2024.03.14 -->
 <!-- v1.5 Updates... COMMENTS...

 **FIXED a mistake in alternating row colors in the now playing panel.
 **FIXED an error with skinning the TAB bar in the top caption bar!!! 

GUI update... Further darkened the elements of 3xG -Deep, added a handful more colored separators between panels. Added more color shading highlights so some elements such as the scroll bars, and very slight dark grey [nearly black] gradients to the side panel elements. Tweaked and slight darkened the star ratings from bright green to gold. tweaked the colors in the prefs panels. … copied color accents over to -Bright & -white. Left the brighter track details UI alone on the brighter two. -->

<!-- Update: v1.7 v.2024.03.16 -->
<!-- minor shading update to side panels, add more gradient. and fixed tab coloring\shading for when they are docked in the main body panel rather then the caption bar so now they match without a flat grey box around the active tab. --> 
 

here a Dropbox link to the updated skin including a optional layout

and\or a Plugin Page Link

I've spent a couple weeks teaching myself to skin xml. 1st, probably the last time, I've ever skinned with code! haha. but i think this looks pretty nice, I'm pleased, so ima share. I've been using the same old v2 skin for maybe nearly 10 years. time for custom facelift!

Its a Dark Theme skin with warm tones with cool menus & accents; with enough texture effects to drive me insane. :-) I now know why all new GUI interfaces are flat. LOL

 I'm calling it "3xG" for Triple G: Grey, Green & Gold.

There are 3 quick version in here... the difference being the brightness of the Main Text; deep\rich yellowish [easy on the eyes], brighter, and nearly white. For my HDR-Oled monitor I edited this with Deep Txt. Then added Bright & White, at the end, after looking at in on an LCD monitor. Pick which one suites your eyes and\or computer monitor.

3xG -Brighter Txt
3xG -Deep
3xG -White Txt


Check it out and let me know what you think!

And, last but not least, Screenshots

Enjoy y'all,
Xavier

PS... I've also include my Panel Layout if you want to import it, as I only use Musicbee in the Track Details Mode. I tried to make sure to pay attention to the mini-player & flat layout but as I never use them I may have missed color match those elements. thou i think i got most of them.

3xG -DEEP


3xG -BRIGHT TXT -with menu colors showing


3xG -White TXT


3xG -Menu Sample


3xG -Prefs Menu Samples

[Mayibongwe]

Haven't gotten around to trying it out just yet, but screenshots look cool. Nice work!

Also how I do share these on the main GetMusicbee website.

See here: SKIN SUBMISSION GUIDE FOR DEVELOPERS

[IndigoFairyX]

thanks. i got them posted to the skins area... and maybe it was too soon. i might have a problems in the code...

i went to move the tabs & command buttons around out of the caption bar and it broke the skin... still work but now im stuck with the windows title bar..

bout to look into the code to try to figure why this happend.... anyone have experience with this? 1st time ive seen MB do this

[IndigoFairyX]

and im getting this error when i select the "show tabs in captions bar" toggle under prefs\layout 1

[Mayibongwe]

and im getting this error when i select the "show tabs in captions bar" toggle under prefs\layout 1

This is by design and applicable to all skins.
When the window borders are not skinned, MusicBee doesn't have much control over the caption bar.
Edit: so you just have to make sure that MusicBee > view > skin > skin window borders is enabled

...i might have a few problems in the code...

Yep, and they will continue to pose problems until you take heed of hiccup's advice below:
The Moonshine skin you worked off of is more than 10 years old, and is missing a number of elements required to make the skin play nicely with MusicBee.

In my opinion the best way to go is to start with either the Chameleon DNA or the Cheetah DNA skin.
It shouldn't take much time to setup the elements that are in the first section <variables> so that the general look and feel resembles 'Moonshine'.

Next, you can edit the elements that are under <colours> to finetune things.
I am convinced that this way of doing it will save you a lot of time and frustration in the long run.

[IndigoFairyX]

This is by design and applicable to all skins.
When the window borders are not skinned, MusicBee doesn't have much control over the caption bar.
Edit: so you just have to make sure that MusicBee > view > skin > skin window borders is enabled

when i try to toggle this back on MB restarts, with the option still unseleted.

i spent 4 days working on this skin and it only started doing that last night after i thought i was done. LOL

im not using Moonshine anymore. for this re-skin im using a newer .xml  from...  TOPIC: KRYPTONITE DARK

<!-- Skin Name: Kryptonite Dark -->
 <!-- Version: 1.0 -->
 <!-- Optimized for MusicBee version: 3.4 -->
 <!-- Last Update: 16/07/2021 -->
 <!-- By: Ingo_Igel -->

[IndigoFairyX]

toward the bottom of skins.xml, between <colours> and <images> there is a <settings>

i broke the buttons messing with those not know what i was doing, this is my 1st time skining.

its there list of these setting somewhere on the fourms so i can ready what each one does??


this example is from the sample skin thou nothing in that thread talk about setting options

Code

<settings>

 <element id="DefaultIconName">HiccupsSampleSkin</element>
 <element id="AllowCenteredTabInCaptionBar">true</element>
 <!-- <element id="AlwaysUseColumnBrowserColors">false</element> -->
 <!-- <element id="ArtworkDimFactor">0.3</element> -->
 <element id="Content[NowPlaying].Body.Default.DisableAdjustment">true</element>

[IndigoFairyX]

i got the skined caption bar back via loading reloading a setting snap shot from a few days ago. Edit > Saved Settings > Load Settings Snapshot...

the tabs\menu\command buttons placements are clashing precariously.

even thou menu was already on its own line, "below caption bar" it wouldnt let me move tabs to the empty caption bar without first moving the menu there as a button to then just move back to own line were it already was. ......   this might not be skinning issue unless i unknowingly toggled a settings line. ie.. i changed this from the original, setting it back but we'll see.. <element id="UseNativeWindow">false</element>

[Mayibongwe]

is there list of these setting somewhere on the forums so i can read what each one does??

That information is scattered all over the forum.
You would simply have to search each specific setting to find out more on it.

[IndigoFairyX]

Haven't gotten around to trying it out just yet, but screenshots look cool. Nice work

thanks Mayibongwe, i spent a week on that. first time coding in xml ever so im impressed with it myself for figuring it out. got into a good flow toward the end. i didn't go easy on myself. i shaded as many elements as i could, its nearly interactive, as you click around the UI selected items are outlined and inverted. the selection color of track matches the tag editing panel header, etc etc. :-)

[Mayibongwe]

Finally got around to trying this out, and it's really quite nice. Well done!
The white line on the Column Browser sort of stood out when I first loaded this. Not sure if intentional or an oversight.

[IndigoFairyX]

thanks, i spent about a week on it. once i figured out what i was doing i got into it.

that white line was intentional, im alway in details views so i put that white line there to quickly guide my eyes to columns headers, which are also the only other white elements in deep\dark version.
i almost made the column headers colored to stand out, but thought the white stood out nice enough. maybe on another version some day.