Author Topic: Dark bitmap skin (old version)  (Read 9493 times)

mvana

  • Jr. Member
  • **
  • Posts: 63




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 file you'll find the images, xml template, etc. to modify the theme.

Thanks to hiccup, Steven and others for the support



Download Page 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
Last Edit: December 09, 2021, 03:53:46 AM by mvana

Bee-liever

  • Member
  • Hero Member
  • *****
  • Posts: 3763
  • MB Version: 3.5.8211 P
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.

MusicBee and my library - Making bee-utiful music together

mvana

  • Jr. Member
  • **
  • Posts: 63
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. Sidebar control colors are improved
Last Edit: November 26, 2021, 08:37:18 AM by mvana

Bee-liever

  • Member
  • Hero Member
  • *****
  • Posts: 3763
  • MB Version: 3.5.8211 P
Sidebar control colors are improved
Thank you for the change
MusicBee and my library - Making bee-utiful music together

hiccup

  • Hero Member
  • *****
  • Posts: 5955
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)

mvana

  • Jr. Member
  • **
  • Posts: 63
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.

hiccup

  • Hero Member
  • *****
  • Posts: 5955
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.


mvana

  • Jr. Member
  • **
  • Posts: 63
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.
Last Edit: November 27, 2021, 09:26:16 PM by mvana

hiccup

  • Hero Member
  • *****
  • Posts: 5955
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

mvana

  • Jr. Member
  • **
  • Posts: 63
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" />

hiccup

  • Hero Member
  • *****
  • Posts: 5955
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)

mvana

  • Jr. Member
  • **
  • Posts: 63
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 with better colors and icons)

Last Edit: November 28, 2021, 12:52:30 PM by mvana

The Incredible Boom Boom

  • Hero Member
  • *****
  • Posts: 790
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" />

mvana

  • Jr. Member
  • **
  • Posts: 63
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?

The Incredible Boom Boom

  • Hero Member
  • *****
  • Posts: 790
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.