Author Topic: New skin elements for 3.1  (Read 21004 times)


  • Guest

tabs bar
<element id="TabsBar.AltBackground" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
when used, colors tabs bar when header bar is shown
<element id="TabsBarPTop.AltBackground" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
in case you are changing the tabs bar when the player is docked at the top
<element id="TabsBar.AltInactiveTabIconMask" bg="xxx,xxx,xxx,xxx" bg2="xxx,xxx,xxx,xxx" />
when used, controls bg of icon mask when header bar is shown

<element id="TabsBar.TabInCaptionBarTop.Separator" bg="xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarTop.BorderLine" bg="xxx,xxx,xxx" >
<element id="TabsBar.InactiveTabInCaptionTopIconMask" bg="xxx,xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarTopAddButton.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
player on top overrides

<element id="TabsBar.TabBlended.Separator" bg="xxx,xxx,xxx" />
<element id="TabsBar.TabBlended.BorderLine" bdr="xxx,xxx,xxx" />
<element id="TabsBar.TabInCaptionBarBlended.BorderLine" bdr="xxx,xxx,xxx" />
added the above

header bar
<element id="Panel.ChildHeader.Default.Border2" fg="xxx,xxx,xxx" />
adds a bottom border line on panel sub-headers to match HeaderBar border
<element id="Panel.SectionHeader.Default.Border2" fg="xxx,xxx,xxx" />
to add a matching borderline to the bottom of the navigation panel sub-headers: Playlists, Services, etc.

<element id="PlayerTopFlat.BaseLine" bg="xxx,xxx,xxx" />
adds a line under player bar to match with MainPanelMargin


left navigator
<element id="LibraryFilterTick" fg="xxx,xxx,xxx" />
colors the tick of the selected library filter

main panel
<element id="Content[Artwork].ArtworkText" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
fg2 overrides the auto-generated "show album count" coloring (when used)

<element id="Content[Artwork].Expanded.Highlight" fg="xxx,xxx,xxx" bg="xxx,xxx,xxx" />
<element id="Content[Artwork].Expanded.Lowlight" fg="xxx,xxx,xxx" bg="xxx,xxx,xxx" />
colors expanded panel selector when auto-pick color option is disabled

<element id="Content[TrackDetail].ItemSeparatorLine" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
<element id="Content[AlbumAndTracks].ItemSeparatorLine" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
<element id="NowPlaying[AlbumAndTracks].AlbumSeparatorLine" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" />
fade effect on separator line

<element id="Content[NowPlaying].Body.Default.DisableAdjustment">true</element>
override brightness adjustment on <element id="Content[NowPlaying].Body.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx"/>

<element id="Panel.LovedIcon.Lowlight" fg="xxx,xxx,xxx"/>
overrides the LastFmLoveSelected image when the panel has lost focus:

column browser
<element id="AlwaysUseColumnBrowserColors">true</element>
forces the column browser to always keep its own colors even when it's placed vertically left of thumbnail browser in the main panel

<element id="ColumnBrowser.BottomBorderLine" bdr="xxx,xxx,xxx" />
colors the border between the bottom of column browser and the main panel

sub panels
<element id="Panel.TabButton.Default" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
overrides playing/selected button

now playing list
<element id="NowPlayingList[TrackDetail].ItemSeparatorLine" fg="xxx,xxx,xxx" />
overrides id="Content[TrackDetail].ItemSeparatorLine" in the now playing list

music explorer
<element id="MusicExplorerHeader" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
fg2 is used for the playing artist is shown in the header ie. when its different to the active artist in the panel
<element id="MusicExplorerHeaderBar.Default" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
for the active tab
<element id="MusicExplorerHeaderBar.Lowlight" fg="xxx,xxx,xxx" />
<element id="MusicExplorerHeaderBar.Highlight" fg="xxx,xxx,xxx" />
<element id="MusicExplorerTopTracks" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" fg="xxx,xxx,xxx" />

radio / auto-dj
<element id="RadioAndAutoDjPanel" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" />
colors both auto-dj panel and the left bar of radio panel where genres are listed

panel arrangement dialog
<element id="Controls.LargeTickBoxFill" bg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
bdr is new
<element id="Controls.PanelLayoutArea" bg="xxx,xxx,xxx" />
for the lightly highlighted panel background where the available elements and the active elements are displayed

for the panel layout icon that shows which panel the elements belong to:
<element id="Controls.PanelLayoutIcon.Outline" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
where fg2 is for when the panel is explicitly hidden
<element id="Controls.PanelLayoutIcon.Fill" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" />
where bg2 is for when the panel is explicitly hidden

volume visualiser
<element id="VolumeVisualiser" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" fg2="xxx,xxx,xxx" />
overrides auto selected colours
<element id="VolumeVisualiserBar" fg="xxx,xxx,xxx" />
background bars of the volume visualiser

preferences / tag editor
<element id="Controls.SliderBar.Default" fg="xxx,xxx,xxx" />
<element id="Controls.SliderBar.Disabled" fg="xxx,xxx,xxx" />
override auto-generated slider line on input panels

<element id="Controls.TabHeader.Inactive" bg="xxx,xxx,xxx" />
for border on inactive tabs
<element id="TagEditorWindowBackground" bg="xxx,xxx,xxx" />
colors bg area of tabs only for floating window tag editor (when docked at the bottom, TagEditorPanel.Header controls the area)
<element id="TagEditorPanel.MenuLine" bg="xxx,xxx,xxx" />
<element id="TagEditorPanel.FaintLine' bg="xxx,xxx,xxx" />
shown in the Summary tab and the Artwork tab
<element id="TagEditorPanel.Header' bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx"/>
bdr is new which colors separator line between the main panel and the tag editor docked at the bottom

<element id="Controls.DropdownButton.Highlight" bg="xxx,xxx,xxx" fg="xxx,xxx,xxx" bdr="xxx,xxx,xxx" />
<element id="Controls.Arrow.Highlight" fg="xxx,xxx,xxx" />
is now supported. If not provided, the current automated highlight colouring remains
for the ... button, that now makes use of Controls.Button.Highlight.fg

<element id="PlayerFlat.VolumeSlideBar" fg="xxx,xxx,xxx" />
<element id="PlayerFlat.VolumeIcon" fg="xxx,xxx,xxx" />
<element id="PlayerFlat.VolumeSliderButton" fg="xxx,xxx,xxx" />
<element id="PlayerTopFlat.VolumeSlideBar" fg="xxx,xxx,xxx" />
<element id="PlayerTopFlat.VolumeIcon" fg="xxx,xxx,xxx" />
<element id="PlayerTopFlat.VolumeSliderButton" fg="xxx,xxx,xxx" />
override the auto-generated color

<element id="PlayerFlat.DisplayPanel" fg="xxx,xxx,xxx" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" />
<element id="PlayerTopFlat.DisplayPanel" fg="xxx,xxx,xxx" bg="xxx,xxx,xxx" bg2="xxx,xxx,xxx" />
optional bg2 adds a gradient for display panel

<element id="Player.TrackPosition" fg="xxx,xxx,xxx" />
<element id="PlayerFlat.TrackPosition" fg="xxx,xxx,xxx" />
<element id="PlayerTopFlat.TrackPosition"  fg="xxx,xxx,xxx" />
<element id="PlayerSidebar.TrackPosition"  fg="xxx,xxx,xxx" />
overrides track position colors

<element id="PlayerSplitProgressYOffset">Below</element>
places track position below the progress bar in bitmap skins
<element id="PlayerSplitProgressYOffset">Center</element>
places track position aligned with the vertical center of the progress bar in bitmap skins
<element id="PlayerSplitProgressXAdj">xxx</element>
adjusts gaps between track position and progress bar (wave bar) in bitmap skins

icon overrides
<element id="CaptionBarIcon">xxx</element> (16x16px)
overrides menu bar icon
<element id="DeviceReadyIcon">xxx</element>
overrides device icon in tab bar
<element id="FolderIcon">xxx</element> (16x16px)
overrides folder icon under computer node
<element id="LargeTick">xxx</element> (16x16px)
for panel arrangement dialog
<element id="PlaylistFolder">xxx</element> (16x16px)
for a folder in the playlist manager
<element id="ZeroRating">xxx</element>
overrides no rating icon (bomb)

adjustable border width
- by default MB for windows 10, MB only uses the outer single px of the supplied border images. There is additionally the windows single px border which is blue on my system and configurable in windows.
- the ability to get rid of the single px border completely from the supplied border images ie. ignore all border images except the caption bar
- keep in mind you will still have the 1px border from windows itself

<element id="WindowBorderWidth">0</element>
with values 0, 1, 4
- the setting only applies to win10+
- 4 can be used instead of <element id="DisableSinglePxBorder">true</element> but the DisableSinglePxBorder will continue to work in the absence of the new setting
- also note that on older windows versions, the wide border will still be used so you still need to supply the standard border images

caption buttons
you can now supply 30x28px images for the close, minimimise, maximise, restore buttons
you still need to supply 28x15px images for backwards compatibility. Also make sure these new ones are after the existing 28x15px images
use FormMinimiseButton2, FormMaximiseButton2, FormRestoreButton2, FormCloseButton2, FormMinimiseHighlightButton2, FormMaximiseHighlightButton2, FormRestoreHighlightButton2, FormCloseHighlightButton2

SVG files support for bitmap skins
- Skin Creator, while compiling, creates three sizes (100, 150, 200%) of PNG files with each SVG file and includes them in the compiled skin file and MB chooses and shows a PNG of the best size depending on the user's DPI.
- if a user is using an older MB version, only the 16px version(100%) of an image would be loaded (as now) and then upscaled for the screen DPI
- if a user is using the new MB version, the best sized image will be chosen (and upscaled further if needed for unusual screen DPI settings)
- SVG files are supported for bitmap skins only and everything stated on the following points only applies to bitmap skins.
- however, if you have a standard skin with a bunch of your own icons that you want to add high dpi support for, then you can easily convert a standard skin to a bitmap skin by using an empty skin.xml file with the skin creator tool. The other advantage is MB loads .xmlc skins a bit faster
<?xml version="1.0" encoding="utf-8"?>
<root sourceSkin="MusicBee3">
- in the source skin, for all the icon elements you should now directly reference the filename. You don't have to but the skin creator tool won't apply 150% or 200% scaling if you just supply a base 64 string
- if you use SVG files, the source skin file needs the following for each included image
<element id="MusicLibrary">Images\MusicLibrary.svg</element>
- if you use .png files instead, you still only need one reference
<element id="MusicLibrary">Images\MusicLibrary.png</element>
and the skin creator tool will automatically look for and include these files if they exist:
 (you can create 150% and 200% variations by appending _150 or _200 to the filename. Make sure the image size is 150% or 200% bigger. So a 16px icon would be 24px or 32px)
- the same applies to any player panel images referenced in the skin.xml file
- the following images ignore the 150% and 200% variations in order to stop the skin bloating: "SplashScreen", "WaitIndicatorArtwork", "NoArtwork", "UnknownArtist", "RssFeed" and also high dpi variations of the panel background image are ignored because of other complications

wavebar layout for bitmap skins
I have added support for wavebars. Because the layout would likely change quite substantially, the wavebar layout has its own layout definition file:

its exactly the same format as the skin.xml file, except when the final compiled skin is generated, only the layout fields are used and any image files ignored ie. only the images from the skin.xml file are actually used.
The wavebar element itself is defined as:
<element id="WaveBar" parent="TrackInfoPanel">
  <left relativeTo="Spectrum.Right" offset="25" />
  <right relativeTo="TrackInfoPanel.Right" offset="-8" />
- You can't control its height - just the X location and width
- For backwards compatability reasons you cant use or reference the wavebar element in the skin.xml file
- now supports track position splitting for wavebars but forces the split type to the new Center split setting

fixed height for bitmap skins
if you add fixedHeight="true" then MB will fix the height of the player panel, apart from high-dpi scaling where everything is scaled
<element id="Panel">
  <images stretchY1="1" stretchY2="0" fixedHeight="true"

track text over progress bar for bitmap skins
for the TrackText element, make sure you set the parent to be progress bar. If you want to put other text elements on top of the progress bar, such as play position then that wont work well
<element id="TrackText" parent="ProgressBar">
fg2 of Player(Top)Flat.DisplayPanel colors track text on progress bar's filler part
i will change it so the font size is not reduced when track text is over the progress bar.

multi-line track text for bitmap skins
add multiLine="true" to the TrackText element (and of course make enough height - it requires at least 40px)
<element id="TrackText" parent="Panel" multiLine="true">
  <left relativeTo="Panel.Left" offset="6" />
  <top relativeTo="Panel.Top" offset="1" />
  <right relativeTo="TrackPosition.Left" offset="-10" />
  <bottom relativeTo="Panel.Bottom" offset="-1" />
fg2 of Player.DisplayPanel controls the color of the 2nd line of text (if you use PlayerFlat element elsewhere then try fg2 of PlayerFlat.DisplayPanel)
For now MB hard codes the fields (artist and title) and font size

volume slidebar filler image for bitmap skins
Add a 3rd image that is 1px wide and has the same height/ fill that corresponds to slidebar image
<element id="VolumeSlidebar" parent="Panel">
  <left relativeTo="Panel.Left" offset="234" />
  <top relativeTo="Panel.VerticalCenter" offset="0" />
  <images category="Slidebar"
  <images category="Button"
  <images category="Filler"

fixed font size of track position for bitmap skins
i have added a fontSize attribute that is now recognised by the Skin Creator and forces the track position font size in the player controls panel. Note that if your language decimal separator is "," then use ","
<element id="TrackPosition" parent="TrackInfoPanel" fontSize="8.00">

dependent skin support for bitmap skins
The updated skin creator can now load a skin with a "dependsOn" attribute in the root node. The skin depended on also needs to be in the skin creator folder. Doing it this way, the depended on skin is embeded into the .xmlc file. This method is required for it to work with MB3.0+

Also musicbee itself has been updated so you can create a .xml skin that depends on a .xmlc skin. You need to put .xmlc in the text so MB knows to load a bitmap skin. This method would only work with the latest v3.1
<root dependsOn="DarkCYAN.xmlc">

stop button with shift key pressed for bitmap skins
MB will now look for a third image and if there will show the stop/highlight stop icons when the track is playing and the shift key pressed
<element id="PlayPauseButton" parent="Panel">
  <left relativeTo="Panel.Left" offset="55" />
  <top relativeTo="Panel.VerticalCenter" offset="-2" />
  <images category="Play" drawPlayButton="false"
    highlight="Images\ButtonPlayHighlight2.png"  />
  <images category="Pause" drawPlayButton="false"
    highlight="Images\ButtonPauseHighlight2.png"  />
  <images category="Stop" drawPlayButton="false"
    highlight="Images\ButtonStopHighlight2.png"  />
Last Edit: December 02, 2018, 09:22:47 PM by Steven


  • Hero Member
  • *****
  • Posts: 1007
Thanks redwing for compiling this up-to-date list. Can a moderator please sticky the topic?


  • Guest
No problem. It was based on Bee-liever's running list.