New skin elements

[Steven]

when tabs are docked in the main panel and set to display below the header bar (set in the command button configuration dialog), by default they will use the same values as the TabsBar.Tab... elements. To override:

<element id="TabsBarBelow.Tab.Default" bg="225,225,225" fg="80,80,80" />
<element id="TabsBarBelow.Tab.Highlight" bg="245,245,245" fg="10,10,10" bdr="210,210,210" />

[Steven]

override the track information panel (in the now playing panel in the right sidebar):
<element id="TrackInfoPanel.ScrollBar" bg="150,150,150" bg2="130,130,130" bdr="0,0,0" />
<element id="TrackInfoPanel.ScrollBarThumb" bg="255,255,255" bg2="255,255,255" fg="123,123,123" bdr="255,255,255" />
<element id="TrackInfoPanel.ScrollBarBackground" bg="250,250,250" />

[Steven]

override search box when docked in the caption bar (included in the next v2.4 update):
<element id="CaptionBar.SearchBox.Default" bg="250,250,250" fg="0,0,0" bdr="255,0,0" />
<element id="CaptionBar.SearchBox.Lowlight" fg="150,150,150" />

[Steven]

override the command buttons when docked in the caption bar
<element id="CaptionBar.CommandButtonOverride" bg="150,150,150" fg="0,0,0" />
<element id="CaptionBar.CommandIconOverride" fg="0,0,0" />

[Steven]

override the metro buttons when the modern player is docked at the top
  <element id="PlayerTopFlat.MetroButton.Default" bg="" bdr="" />
  <element id="PlayerTopFlat.MetroButton.Highlight" bg="" bdr="" />

override the scrollbar in the compact player
  <element id="Compact.RightPanel.ScrollBar" fg="255,0,0" />

musicbee menu button and tabs are rectangular instead of rounded:
  <element id="UseSquareTabCorners">true</element>

to override the inactive tab icon mask when tabs are docked in the caption bar:
  <element id="TabsBar.InactiveTabInCaptionIconMask" bg="100,255,0,0" />

to override the now playing list header when docked in the left sidebar - it also supports bg2
  <element id="SidebarLeft.Header.Default" bg="100,0,0" bg2="200,10,10" fg="255,255,255" />

to override the tab close button for a tab in the tabs bar:
  <element id="TabsBar.TabCloseButton.Default" fg="255,0,100" />
  <element id="TabsBar.TabInCaptionBarCloseButton.Default" fg="10,67,200" />

to override the add tab button:
    <element id="TabsBar.TabAddButton.Default" bg="230,220,210" fg="90,30,30" bdr="0,0,190" />
    <element id="TabsBar.TabInCaptionBarAddButton.Default" bg="20,20,210" fg="90,230,30" bdr="230,10,190" />
    for when the tool buttons are configured to display as a separate row and the tabs are below the toolbar
    <element id="TabsBarBelow.TabAddButton.Default" bg="20,220,20" fg="190,30,9" bdr="220,0,0" />

[Steven]

for MusicBee version 3 (thanks redwing and bee-liever for building this list)


left menu button
<element id="MenuIcon" fg="xxx,xxx,xxx" />
<element id="MenuButtonSharp">true</element>
the colour override will also be a true colour with this setting

menu button
<element id="UseModernMenuButton">true</element>
makes bg of menu button transparent; requires MenuButton.Default with a dummy bg and working fg

menu
<element id="Menu.DropDownCheckBoxImage" fg="xxx,xxx,xxx" />
<element id="Menu.DropDown.Highlight" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
if you provide a bdr override then MB wiill handle the borders consistently (but the border colour needs to be different. There is some backwards compatibility where if its the same as the background colour then the border colour is set elsewhere)

tabs bar
in caption bar
<element id="TabsBar.TabInCaptionBar.BorderLine" bdr="xxx,xxx,xxx" />
<element id="CaptionBar.SearchBox.NotActivated" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />

below caption bar
<element id="TabsBar.BorderLine" bdr="xxx,xxx,xxx" />
<element id="Panel.SearchBox.NotActivated" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />

"TabsBarBelow.TabAddButton.Default"
no longer applies as the tab handling/ background panel has been changed in v3
these should suffice
<element id="TabsBar.TabAddButton.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarAddButton.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />

player on top overrides
<element id="TabsBarPTop.Tab.Highlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="TabsBarPTop.Tab.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="TabsBarPTop.Background" bg="xxx,xxx,xxx" />
<element id="TabsBarPTop.Tab.Separator" bg="xxx,xxx,xxx" />
<element id="TabsBarPTop.InactiveTabIconMask" bg="xxx,xxx,xxx" />
<element id="Controls.SearchBoxPTop.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="Controls.SearchBoxPTop.NotActivated" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="TabsBarPTop.BorderLine" bg="xxx,xxx,xxx" /> this one is optional

centered text tab
added the following to enable and override the centered text tab layout (which should blend into the caption bar)
<element id="TabsBar.TabInCaptionBarBlended.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarBlended.Separator" bg="xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarBlended.Highlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" /> (bg is optional)
<element id="TabsBar.TabInCaptionBarBlended.InactiveTabIconMask" bg="xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarBlended.AddButton" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />

<element id="TabsBar.TabBlended.Highlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" /> (this one is optional)

if your existing tab in caption bar colours are already suitable then just enable this flag instead.
<element id="AllowCenteredTabInCaptionBar">true</element>

With neither of the above included in the skin, the centered text tab layout won't be supported
edit [Steven]: i removed this restriction and all skins now support this, some not as well as others of course

header bar
<element id="HeaderBar" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />

AZ jump bar
<element id="AzBar.Default" fg="xxx,xxx,xxx" />
overrides the fg used for the az bar
<element id="AzBar.Lowlight" fg="xxx,xxx,xxx" />
overrides the year values that display between decades on the az bar

main panel
<element id="Content[TrackDetail].HeaderLine" bg="xxx,xxx,xxx" /> when grouped

adding an optional bg2 to these so you can get a fade effect
<element id="Content[TrackDetail].HeaderLine" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" />
<element id="Content[AlbumAndTracks].ArtistSplitterLine" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" /> (left header only)
<element id="Content[AlbumAndTracks].ArtistSplitterLineLR" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" /> (left & right header)

adding this for the new artwork grouping
<element id="Content[Artwork].SplitterLine" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" />
<element id="Content[Artwork].GroupingHeader" fg="xxx,xxx,xxx" />

expanded panel in artwork view
<element id="Content[Artwork].Expanded" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
where fg2 is for the Album Text

thumbnail browser
<element id="Controls.AlbumThumb" fg="xxx,xxx,xxx" />
<element id="Controls.GenreThumb" fg="xxx,xxx,xxx" />

have activated the alternating row colours if the FilterPanel override colours are set.

fg2 for album/track count color
<element id="FilterPanel.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
<element id="FilterPanel.ListAlternating.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
<element id="FilterPanel.Highlight" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
<element id="FilterPanel.Lowlight" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />

column browser
<element id="ColumnBrowser.ListHeader" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="ColumnBrowser.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="ColumnBrowser.ListAlternating.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="ColumnBrowser.Highlight" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="ColumnBrowser.Lowlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="ColumnBrowser.ScrollBar" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="ColumnBrowser.ScrollBarBackground" bg="xxx,xxx,xxx" />

now playing
<element id="NowPlayingTrackInfo" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="NowPlayingLargeAlbumTrackInfo" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />

right panel should use any "NowPlayingList[TrackDetail]..." override and i have made that change (keep in mind that although most people will show the playing tracks in the right sidebar, you can configure the right panel to show lyrics or the artist bio and they would also use this override)
For the Large Album layout only, MB uses "Content[Artwork].Body.Default" as the colour base for the main panel area (not the right sidebar). I will add in an override
<element id="Content[NowPlaying].Body.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />

podcasts
<element id="Controls.SubscriptionCounter" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="Controls.EpisodeNotPlayed" bg="xxx,xxx,xxx" />
<element id="Controls.EpisodeDownloading" fg="xxx,xxx,xxx" />

devices
<element id="DeviceSettings.VerticalMenu.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="DeviceSettings.VerticalMenu.Highlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
<element id="DeviceSettings.VerticalMenu.Lowlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
 
scrollbars
have added support for lowlighting inactive scrollbar sliders ie. the lowlight colours will show unless you click on the slider and drag it
<element id="Panel.ScrollBar.Lowlight"
<element id="LeftNavigator.ScrollBar.Lowlight"
<element id="Panel.ChildBody.ScrollBar.Lowlight"
<element id="FilterPanel.ScrollBar.Lowlight"
<element id="ColumnBrowser.ScrollBar.Lowlight"
<element id="Content[Artwork].ScrollBar.Lowlight"
<element id="NowPlayingList.ScrollBar.Lowlight"
<element id="Controls.ScrollBar.Lowlight"

if you only want the lowlight colours to apply to narrow scrollbars eg. you only want the narrow scrollbars to be more blended into the background
<element id="ScrollBarLowlightNarrowOnly">true</element>

- new setting "ScrollPanelMargin" which reduces the entire width of the skinned scrollbar (this differs from "ScrollBarMargin" which narrows the slider but the scrollbar itself stays the same width of 17px). The value is capped at 10

- mouse over now has the same colouring behavior as gripping the slider. For the colours to change you need to define the relevant ScrollBar.Lowlight colours and:
  1. the user has chosen narrow scrollbars
  2. or when that option is not chosen (the default), you need to have set "ScrollPanelMargin" > 0 in your skin so the default scrollbars are a bit narrower
  - if neither of those conditions is true then the default colours always show (current behavior)
  - i appreciate it wont be obvious why the scrollbars need to be a bit narrower for the lowlight behavior to take effect but its so some skins are not affected by the change

<element id="ScrollBarHighlightMouseOverPanel">true</element>
the slider highlights with the mouse over scrollbar rather than over the slider

panel layout editor
<element id="Controls.DropAreaIndicator" fg="xxx,xxx,xxx" />
<element id="Controls.DropRowIndicator" fg="xxx,xxx,xxx" />
<element id="Controls.LargeTickBoxFill" bg="xxx,xxx,xxx" />

album auto-tagger
<element id="Controls.Arrow.Default" fg="xxx,xxx,xxx" />
this is now supported for enabled arrows. However when disabled, its coloured gray by windows

library explorer & playing tracks list
<element id="Controls.FindButton.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />

auto-dj overrides not supported
    <element id="AutoDjPanel.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
    to override the id="PreferencesPanel.Default" colours is not working for MB3
the auto dj panel overrides are not supported in v3

players
<element id="PlayerFlat.ProgressBarMiddle" bg="xxx,xxx,xxx" />
<element id="PlayerFlat.NotLovedIcon" fg="xxx,xxx,xxx" />

<PlayerSplitProgressYOffset>Above</PlayerSplitProgressYOffset>

windows 7 style border
to disable the single px border on windows 10, and instead show the skinned 4px border that would have shown in earlier windows versions i have added this override
<element id="DisableSinglePxBorder">true</element>

icon overrides
<element id="AddTabIcon">  (16x16px)
<element id="AddTabIconInCaptionBar">  (16x16px)
<element id="AlertIcon">
<element id="ConsolidateButtonsIcon"
<element id="Controls.WebLinkIcon"> (16x16px)
<element id="DeleteIcon">
<element id="DownloadIndicatorIcon">
<element id="LastFmPluginIcon"> for the two last.fm plugin icon
<element id="MusicExplorerIcon">
<element id="NotificationIcon">
<element id="NowPlayingIcon">
<element id="PausedIcon.Default"> (16x16px)
<element id="PausedIcon.Highlight">  (16x16px)
<element id="PlayingIcon.Default">  (16x16px)
<element id="PlayingIcon.Highlight">  (16x16px)
<element id="PlaylistDirectoryIcon">
<element id="RecommendationsIcon">
<element id="SearchMenuButton">  (26x20px)
<element id="UpcomingConcertsIcon">
<element id="WebBrowserIcon">