getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: mvana on November 25, 2021, 06:24:06 PM

Title: Dark bitmap skin (old version)
Post by: mvana on November 25, 2021, 06:24:06 PM
This is OLD VERSION. NEW Skin: https://getmusicbee.com/forum/index.php?topic=35853 (https://getmusicbee.com/forum/index.php?topic=35853)




A simple dark bitmap based theme for MusicBee 3.0+ with 2 versions, with and without auto color for main player.

Any help, suggestions to improve the theme is much appreciated.

In the downloaded (https://getmusicbee.com/addons/skins/353/dark-lime-with-resources-template/) file you'll find the images, xml template, etc. to modify the theme.

Thanks to hiccup (https://getmusicbee.com/forum/index.php?action=profile;u=11176), Steven (https://getmusicbee.com/forum/index.php?action=profile;u=1) and others for the support

(https://s10.gifyu.com/images/2021-12-03_104411.jpg) (https://s8.gifyu.com/images/Dark-Lime-Auto-Color.gif)
(https://i.imgur.com/fuoNawf.jpg)
Download Page (https://getmusicbee.com/addons/skins/353/dark-lime-with-resources-template/) for the theme

Version 1.01:
Fixed typo
Improved colors for sidebar controls
Changed Hover icons for auto color theme

Version 1.02:
Color improvement
Better icons
Improved Progress bar
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: Bee-liever on November 26, 2021, 05:29:35 AM
Nice work. Looks very good.

There is a typo in the BitmapTheme.xml at line 232.
<element id="PlayerFlat.ProgressButton" fg="Highligh2t" />

And I find the sidebar player controls hard to see.

Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 26, 2021, 07:31:06 AM
Nice work. Looks very good.

There is a typo in the BitmapTheme.xml at line 232.
<element id="PlayerFlat.ProgressButton" fg="Highligh2t" />

And I find the sidebar player controls hard to see.

Thank you very much! I just updated the theme (https://www.mediafire.com/file/7x8yxxyekjw0b78/Dark_Lime_with_Resources.zip/file). Sidebar control colors are improved
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: Bee-liever on November 26, 2021, 12:31:48 PM
Sidebar control colors are improved
Thank you for the change
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: hiccup on November 27, 2021, 04:33:33 PM
1.
It's not necessary to have (and maintain) two different versions of your skin for auto-coloured and not auto-coloured versions.
If you have set PlayerAutoColor to 'true', then a user can decide for himself to use auto-colouring or not.

2.
If the player panel is set to display 'rating' but not 'loved', the rating stars get bumped into undesired territory.
(check the 'replacementElement id' elements at the bottom of your skin.xml file to make the necessary adjustments)
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 27, 2021, 05:00:43 PM
1.
It's not necessary to have (and maintain) two different versions of your skin for auto-coloured and not auto-coloured versions.
If you have set PlayerAutoColor to 'true', then a user can decide for himself to use auto-colouring or not.

2.
If the player panel is set to display 'rating' but not 'loved', the rating stars get bumped into undesired territory.
(check the 'replacementElement id' elements at the bottom of your skin.xml file to make the necessary adjustments)

Thanks for the help, it's fixed now.

I separated the theme with auto-color because of different icons. Mouse hovering works much better in the auto color version.
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: hiccup on November 27, 2021, 05:36:12 PM
Some other things you may want to take a look at:
(difficult to see icons, 'search' for playing tracks unreadable, gradient background for the Spectrum Visualiser, a bit hard and inconsistent green/blue colour for Spectrum Visualisations.

(https://i.imgur.com/zDAalQx.png)
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 27, 2021, 08:31:36 PM
Spectrum colors has been fixed.

Some other things you may want to take a look at:
(difficult to see icons, 'search' for playing tracks unreadable, gradient background for the Spectrum Visualiser, a bit hard and inconsistent green/blue colour for Spectrum Visualisations.

I was trying to change the png elements for the hard to see icons, which are somehow turning into black, couldn't figure out what's causing that. Do I have to create image for all of them?

Which codes controls the Playing Tracks search colors?

And while trying to repositioning the player panel Spectrum Visualizer, I was using
Code
<element id="Spectrum" 
but resulting in errors.
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: hiccup on November 28, 2021, 07:43:57 AM
Which codes controls the Playing Tracks search colors?
And while trying to repositioning the player panel Spectrum Visualizer, I was using
Code
<element id="Spectrum" 
but resulting in errors.
The Sample Skin should be helpful to find the concerning elements.
https://getmusicbee.com/forum/index.php?topic=22300.msg130967#msg130967
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 28, 2021, 09:58:34 AM
The Sample Skin should be helpful to find the concerning elements.
https://getmusicbee.com/forum/index.php?topic=22300.msg130967#msg130967

What doe these do? I can't find any changes no matter the values?
Code
<element id="Controls.SearchBoxPTop.Default" bg="254,250,238" fg="191,52,7" />
<element id="Controls.SearchBoxPTop.NotActivated" bg="252,244,215" bg2="252,244,215" bdr="154,182,218" />
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: hiccup on November 28, 2021, 10:32:17 AM
What doe these do? I can't find any changes no matter the values?
Code
<element id="Controls.SearchBoxPTop.Default" bg="254,250,238" fg="191,52,7" />
<element id="Controls.SearchBoxPTop.NotActivated" bg="252,244,215" bg2="252,244,215" bdr="154,182,218" />
https://getmusicbee.com/forum/index.php?topic=2499.msg108200#msg108200
(Ptop = when the player panel is positioned at the top)
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 28, 2021, 12:33:16 PM
https://getmusicbee.com/forum/index.php?topic=2499.msg108200#msg108200
(Ptop = when the player panel is positioned at the top)
Thanks, that's very helpful.

How to change the color of the "Arrange Panel Layout" icon? I've tried changing the image, icon color override, but still it's black no matter what...


(updated theme (https://www.mediafire.com/file/7x8yxxyekjw0b78/Dark_Lime_with_Resources.zip/file) with better colors and icons)

Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: The Incredible Boom Boom on November 28, 2021, 01:35:18 PM
How to change the color of the "Arrange Panel Layout" icon? I've tried changing the image, icon color override, but still it's black no matter what...

From my skin files...
Code
		
<!-- Fully Compressed Caption Bar, L/R arrow buttons + Layout Icon -->
<element id="CaptionBar.HeaderControl.Default" fg="highlighted" />
<element id="CaptionBar.HeaderControl.Disabled" fg="highlighted" />

<!-- Tabs Bar, below Caption Bar: L/R arrow + Layout Buttons -->
<element id="Panel.HeaderButtonOverride.Default" fg="highlighted" /> <!-- 40,106,144 50,112,144 --> <!-- Highlights L/R buttons in Music Explorer and Layout Button everywhere... keep 'highlighted' -->
<element id="Panel.HeaderButtonOverride.Disabled" fg="white" />
<element id="Panel.HeaderButtonOverride.Highlight" bg="highlighted" fg="255,0,0" />
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 28, 2021, 02:47:02 PM
From my skin files...
Code
		
<!-- Fully Compressed Caption Bar, L/R arrow buttons + Layout Icon -->
<element id="CaptionBar.HeaderControl.Default" fg="highlighted" />
<element id="CaptionBar.HeaderControl.Disabled" fg="highlighted" />

<!-- Tabs Bar, below Caption Bar: L/R arrow + Layout Buttons -->
<element id="Panel.HeaderButtonOverride.Default" fg="highlighted" /> <!-- 40,106,144 50,112,144 --> <!-- Highlights L/R buttons in Music Explorer and Layout Button everywhere... keep 'highlighted' -->
<element id="Panel.HeaderButtonOverride.Disabled" fg="white" />
<element id="Panel.HeaderButtonOverride.Highlight" bg="highlighted" fg="255,0,0" />

Thank you, I've just tried it, still not working. I've changed the png for PanelLayout icon. It's still black, when mouse hovering it changes color.
Which code is controlling the colors of PanelLayout icon?
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: The Incredible Boom Boom on November 28, 2021, 02:57:04 PM
Thank you, I've just tried it, still not working. I've changed the png for PanelLayout icon. It's still black, when mouse hovering it changes color.
Which code is controlling the colors of PanelLayout icon?

The elements above do, so another element somewhere in your skin must be overriding the default color.
Search your skin file for "Override." If you don't have any of those elements, you'll probably need to search "CaptionBar" line-by-line and change any element that looks like a match to a stand-out color.
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: hiccup on November 28, 2021, 03:23:21 PM
Thank you, I've just tried it, still not working.
I think it is because of a typo (and a discrepancy) you have at: "Panel.HeaderButtonOverride.Default"
For fg it has:  Hightlight-Text
But the variable is:  HighlightText
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 28, 2021, 04:07:59 PM
The elements above do, so another element somewhere in your skin must be overriding the default color.
Search your skin file for "Override." If you don't have any of those elements, you'll probably need to search "CaptionBar" line-by-line and change any element that looks like a match to a stand-out color.

Still couldn't find anything, but when I right click > configure toolbar > Show buttons in a separate bar > then it shows the color but in goes on top bar with the search bar
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 28, 2021, 04:10:21 PM
I think it is because of a typo (and a discrepancy) you have at: "Panel.HeaderButtonOverride.Default"
For fg it has:  Hightlight-Text
But the variable is:  HighlightText
Thanks, I fixed it but still not working
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: hiccup on November 28, 2021, 04:19:15 PM
I think it is because of a typo (and a discrepancy) you have at: "Panel.HeaderButtonOverride.Default"
For fg it has:  Hightlight-Text
But the variable is:  HighlightText
Thanks, I fixed it but still not working
Are you sure you fixed both the typo (Hightlight) and removed the dash?
Title: Re: Dark bitmap theme for MusicBee with resources, xml, images, etc
Post by: mvana on November 28, 2021, 04:28:04 PM
Are you sure you fixed both the typo (Hightlight) and removed the dash?
omg... that's it. Thank you a lot!

Updated theme (https://www.mediafire.com/file/7x8yxxyekjw0b78/Dark_Lime_with_Resources.zip/file)