getmusicbee.com

Support => Developers' Area => Skins => Topic started by: Steven on January 24, 2011, 07:41:12 PM

Title: New skin elements
Post by: Steven on January 24, 2011, 07:41:12 PM
I've set up this topic so anyone creating skins can be aware of new elements.

I've created:
when editing text in the location bar
<element id="Panel.LocationBarEdit.Default" bg="129,87,129" fg="255,5,255" />
bdr is ignored

to change the checkbox border in the context and dropdown menus:
<element id="Menu.DropDownCheckBoxBorder.Default" bdr="129,87,129" />
<element id="Menu.DropDownCheckBoxBorder.Highlight" bdr="129,87,129" />
i didnt add this to Menu.DropDownCheckBox.Default for backwards compatibility reason with older skins

Title: Re: New skin elements
Post by: Steven on January 27, 2011, 08:46:29 PM
added:
<element id="Content[AlbumAndTracks].ArtistSplitterLine" bg="30,50,180"/>

this affects the colour of the line underneath the artist text in the album and tracks view

also, i mentioned to a couple of you i was dropping "Controls.LockedInputControl.Disabled"
i changed my mind about that, - it enables readonly textbox controls in a disabled panel to have a consistent colour as disabled text boxes (if thats what you want).
For the Properties tab of the tag editor only, it uses the disabled state for Controls.LockedInputControl even when the panel is not disabled. This is for backwards compatibility.

lastly, the version below fixes "Controls.InputControl.Disabled" for text boxes

this version has the changes, but if the link is removed just get the most recent link posted
http://www.mediafire.com/?wg7fu7jj7t76uqe
Title: Re: New skin elements
Post by: Steven on January 27, 2011, 10:22:01 PM
one more new element:
<element id="Sidebar.Header.Default" bg="32,32,32" fg="34,134,234" bdr="143,129,69" />

to set the header bar in the right sidebar - i suggest bg and bdr are the same as "Panel.Header.Default" but you might want to change fg for some skins

http://www.mediafire.com/?dp0su0dj5s3nrm6
Title: Re: New skin elements
Post by: Steven on January 31, 2011, 10:16:17 PM
latest weekly update 1.2.4048 includes:
- support for the bdr component on "Menu.DropDown.Highlight"
- "Controls.TicketsButton.Default" which overrides the colour of the tickets button in the new Concerts service
- fix "Controls.InputControl.Disabled"
- fix "Menu.DropDownCheckBoxBorder.Default" which was interfering with the colour of the checkbox itself
Title: Re: New skin elements
Post by: Steven on February 06, 2011, 08:30:08 PM
in the latest weekly update 1.2.4054:
- new support for bitmaps to be displayed when highlighting a button on the caption bar
  FormHelpHighlightButton
  FormMinimiseHighlightButton
  FormMaximiseHighlightButton
  FormRestoreHighlightButton
  FormCloseHighlightButton

if you want to use these elements, you need to set them all
Title: Re: New skin elements
Post by: Steven on March 07, 2011, 09:08:13 PM
in the latest update: 1.2.4083 these are included:
TabsBar.TabCloseButton.Highlight
TabsBar.TabCloseButton.Lowlight

use them to overrides the mouse-over for the close button on a tab in the main panel

Title: Re: New skin elements
Post by: Steven on March 27, 2011, 07:53:50 PM
in the latest 1.2.4103+

override the border and background around the preferences
PreferencesPanel.Default bg= bdr=

override the border line on the bottom of the top tabs bar when displayed
TabsBar.JoinLine  bg=

override the border line on the bottom of the bottom tabs bar when displayed (eg. when you dock the now playing list to the bottom of the main panel)
BottomTabsBar.JoinLine bg=

override the text colour when displayed in the tag editor toolbar (currently it defaults to the same colour as the context menus text)
Toolbar.MenuTextOverride fg=
Title: Re: New skin elements
Post by: Steven on April 10, 2011, 10:17:37 PM
in the latest 1.2.4117+
elements to override the defaults in the new radio stations directory

  <element id="Radio.TopBorder" fg="0,0,220" />   (only set this one if really necessary)
  <element id="Radio.HeaderText" fg="120,0,220" />
  <element id="Radio.TabSelector.Default" bg="20,120,220" bg2="220,220,220" fg="190,90,0" />
  <element id="Radio.TabSelector.Highlight" bg="0,0,250" bg2="140,190,40" fg="20,220,20" bdr="255,200,240" />
  <element id="Radio.TabSelector.Lowlight" bg="220,220,220" bg2="100,200,0" />

and to override the player controls in the track info popup that is opened when you click the windows notify icon
  <element id="Panel.ChildHeaderPlayerControl.Default" fg="" />
  <element id="Panel.ChildHeaderPlayerControl.Disabled" fg="" />
  <element id="Panel.ChildHeaderPlayerControl.Highlight" fg="" />
Title: Re: New skin elements
Post by: Steven on October 31, 2011, 10:52:37 PM
new elements for vertically displayed tabs - if these values are missing it takes defaults from the equivalent horizontal tabs. You may want to at least make TabsVBar.Background a bit more distinct from the tabs than is the case for horizontal tabs

  <element id="TabsVBar.Background" bg="240,240,240" />
  <element id="TabsVBar.Tab.Default" bg="210,210,210" fg="30,30,30" />
  <element id="TabsVBar.Tab.Highlight" bg="220,220,220" fg="20,20,20" />
Title: Re: New skin elements
Post by: Steven on November 06, 2011, 02:20:23 PM
new elements to support overriding the player control panel colours when its docked at the top

  <element id="PlayerTop.Background" bg="40,40,40" fg="160,160,160" bdr="40,40,40" />
  <element id="PlayerTop.DisplayPanel" bg="255,255,255" bg2="225,228,229" fg="86,90,83" />
  <element id="PlayerTop.Control.Default" bg="255,255,255" bg2="225,228,229" fg="71,75,68" bdr="115,115,115" />
  <element id="PlayerTop.Control.Disabled" fg="130,130,130" />
  <element id="PlayerTop.ProgressBar" bg="185,186,168" bdr="98,100,79" />
  <element id="PlayerTop.ProgressButton" bg="255,255,255" bg2="225,228,229" fg="71,75,68" bdr="115,115,115" />
  <element id="PlayerTop.Volume" fg="240,240,240" />
  <element id="PlayerTop.VolumeButton" bg="255,255,255" bg2="225,228,229" fg="71,75,68" bdr="115,115,115" />
  <element id="PlayerTop.StarRating.Default" fg="95,95,95"  />
  <element id="PlayerTop.StarRating.Lowlight" fg="220,220,220" />
  <element id="PlayerTop.SpectrumDefault" bg="230,230,230" />
  <element id="PlayerTop.SpectrumDead" bg="210,210,210" />
  <element id="PlayerTop.SpectrumLow" bg="175,176,158" />
  <element id="PlayerTop.SpectrumMedium" bg="143,144,116" />
  <element id="PlayerTop.SpectrumHigh" bg="88,88,67" />
Title: Re: New skin elements
Post by: Steven on November 12, 2011, 07:09:15 PM
the following elements are for the main player panel in order to get a slight 3d effect

<element id="Player.DisplayPanelBorder" bg="105,107,94" bg2="203,207,186"/>
  <element id="Player.VolumeSlider" fg="70,70,70" bg="136,136,136" bg2="200,200,200" />
  for the volume slider, bg=top line, fg=middle line, bg2=3rd line

as with all player elements, you can optionally set different colours for when the player is docked to the top
  <element id="PlayerTop.DisplayPanelBorder" bg="105,107,94" bg2="203,207,186"/>
  <element id="PlayerTop.VolumeSlider" fg="70,70,70" bg="136,136,136" bg2="200,200,200" />

updated musicbee.exe to support this - also includes an update MusicBee Default.xml skin making use of these elements
http://www.mediafire.com/?qfnc66c68uhqby2
Title: Re: New skin elements
Post by: Steven on November 13, 2011, 07:54:58 AM
and one more element to give a slight shadow under the buttons in the player panel
  <element id="Player.ControlShadow" bg="180,180,180" />
  <element id="PlayerTop.ControlShadow" bg="80,80,80" />

updated .exe to support that
http://www.mediafire.com/?4f9dvgvu130l01w
Title: Re: New skin elements
Post by: Steven on November 27, 2011, 09:40:34 PM
i've added a setting in the skin file
  <element id="AutoHideMenu">true</element>

when set and the player is docked at the top, the main menu will auto-hide. Requires version 1.4 of musicbee
Title: Re: New skin elements
Post by: Steven on December 16, 2011, 07:51:13 PM
control the margin arounds the main panel (default value is 2 for each)
  <element id="MainPanelMargin.Left">1</element>
  <element id="MainPanelMargin.Right">1</element>
  <element id="MainPanelMargin.Top">1</element>
  <element id="MainPanelMargin.Bottom">1</element>

control the margin to narrow the appearance of the scrollbar (total scrollbar width stays the same, just the moveable bar is narrowed) - this example narrows it by 4 pixels in total

  <element id="ScrollBarMargin">2</element>

to change the spacing between the left, main panel and right sidebar (default is 2, 0 would just show the border only)
  <element id="MainPanelSeparatorMargin">0</element>


requires 1.4.4368 or above
Title: Re: New skin elements
Post by: Steven on March 15, 2012, 07:55:21 PM
elements added to override the new "flat layout" for the main player panel

  <element id="PlayerFlat.Background" bg="80,80,80" bg2="70,70,70" fg="200,200,200" bdr="220,220,220" />
  <element id="PlayerFlat.DisplayPanel" fg="220,220,220" />
  <!-- PlayerFlat.ProgressBar differs from other progress bars in that fg is used for the fill colour and Player.ProgressButton is not used -->
  <element id="PlayerFlat.ProgressBar" bg="170,170,170" fg="253,196,35" bdr="130,130,130"/>
  <element id="PlayerFlat.Control.Default" fg="220,220,200" />
  <element id="PlayerFlat.Control.Disabled" fg="140,140,140" />
  <element id="PlayerFlat.Control.Highlight" fg="190,190,190" />
  <element id="PlayerFlat.StarRating.Default" fg="220,220,220" />
  <element id="PlayerFlat.StarRating.Lowlight" fg="140,140,140" />
  <element id="PlayerFlat.Volume" fg="200,200,200" bdr="140,140,140" />
  <element id="PlayerFlat.VolumeButton" bg="220,220,220" bg2="200,200,200" bdr="115,115,115" />
  <element id="PlayerFlat.VolumeSlider" fg="140,140,140" bg="90,90,90" bg2="190,190,190" />

also this is the same as "ScrollBarMargin" but for scrollbars displayed in input panels
  <element id="InputScrollBarMargin">1</element>

Title: Re: New skin elements
Post by: Steven on April 29, 2012, 09:09:18 AM
added this setting to enable text in the player info panel to be centered:
<element id="PlayerInfoCentered">true</element>
Title: Re: New skin elements
Post by: Steven on May 14, 2012, 09:16:02 PM
added this setting:
  <element id="FullNodeSelect">true</element>

which causes the left navigator panel to display the selection bar across the panel rather than just over the text
Title: Re: New skin elements
Post by: Steven on June 04, 2012, 04:22:00 PM
added these settings for when the menu is displayed in the caption bar as a button:

  <element id="MenuButton.Default" bg="180,180,180" bg2="180,180,180" fg="30,30,30" bdr="180,180,180" />
  <element id="MenuButton.Border" bg="160,160,160" />

MenuButton.Border is the outer border and MenuButton.Default.bdr is the inner border. Note that an alpha value is automatically applied by MB to both borders in order to get rounding on the corners and as such you might need to tweak the value to something 10-30% different to what you think you need depending on the caption bar colour.
Also when the windows caption bar is not skinned then both border colours are ignored and the windows caption border colours are used
Title: Re: New skin elements
Post by: cartman005 on June 05, 2012, 08:46:55 AM
Can the button not draw a border if I leave the bdr value blank? I am getting a faint outline around the button even with it removed.

(http://www.mediafire.com/conv/a6f60d4321da8c90350e699209e109a5e29d2f31f433f030dff610363b00ba2e6g.jpg)
Title: Re: New skin elements
Post by: Steven on June 05, 2012, 09:02:07 AM
the borders create the curved corners and need to have a color. If you dont supply that attribute it uses the first bg colour
so i guess you are using 2 colours for your button.
When i get time it should be possble to make the border color follow the colour gradient
Title: Re: New skin elements
Post by: Steven on June 05, 2012, 10:36:43 PM
added a couple of elements to override tabs when they are docked in the windows caption bar

  <element id="TabsBar.TabInCaptionBar.Default" bg="225,225,225" fg="30,30,30" bdr="170,170,170" />
  <element id="TabsBar.TabInCaptionBar.Highlight" bg="245,245,245" fg="20,20,20" bdr="190,190,190" />

when the windows border is not skinned, the border colours are ignored and default windows border colours are used
Title: Re: New skin elements
Post by: Steven on June 06, 2012, 07:59:58 PM
Can the button not draw a border if I leave the bdr value blank? I am getting a faint outline around the button even with it removed.
i've done a "quick and dirty" - if you put a 0 alpha value in both (must be both) borders then they wont display eg.
<element id="MenuButton.Default" bg="180,180,180" bg2="180,180,180" fg="30,30,30" bdr="0,0,0,0" />
<element id="MenuButton.Border" bg="0,0,0,0" />

thats in the next update
Title: Re: New skin elements
Post by: Steven on July 08, 2012, 07:20:26 PM
override the colour of the header in the Album and Tracks layout
  <element id="Content[AlbumAndTracks].Header" fg="255,0,0"  />
Title: Re: New skin elements
Post by: jistme on July 10, 2012, 10:18:27 PM
Hi Steven,

It looks like the colors for the sideplayer progressbarbutton and the buttons in preferences panel are coupled?
Could you create seperate entries?

id="Controls.Button.Default"
(http://i.imgur.com/3xoVAl.jpg) (http://i.imgur.com/3xoVA.png)

Title: Re: New skin elements
Post by: Steven on July 22, 2012, 06:58:24 PM
new elements:
    - override the colour of the text displayed with a picture in the Album & Tracks layout
    <element id="Content[AlbumAndTracks].ArtworkText" fg="255,0,0" />
    - override the left offset of the tabs displayed in the Now Playing panel
    <element id="NowPlayingTabsLeftOffset">1</element>
Title: Re: New skin elements
Post by: Steven on September 10, 2012, 07:46:43 PM
new elements (requires 2.0.4636+ for all the below)

to display horizontal lines for each row in the main and now playing panel:
  <element id="Content[TrackDetail].ItemSeparatorLine" fg="0,200,10" />
  <element id="Content[AlbumAndTracks].ItemSeparatorLine" fg="255,10,10" />

to adjust the position of the tabs bar when docked in the caption bar - although i made some changes to the default and suggest you check the new behavior before changing this
  <element id="TabsInCaptionOffset">1</element>

to override the Playing/Selected Track bar in the Now Playing panel:
  <element id="NowPlayingPanel.TabSelector.Default" bg="240,20,240" bg2="225,225,25" fg="0,0,0" bdr="20,220,220" />
  <element id="NowPlayingPanel.TabSelector.Highlight" bg="20,20,200" />
  <element id="NowPlayingPanel.TabSelector.Lowlight" bg="220,20,220" fg="160,10,160" />

to override the tabs bar when docked in the caption bar and the player is docked at the top:
  <element id="TabsBar.TabInCaptionBarTop.Default" bg="15,215,215" fg="30,30,130" bdr="170,10,170" />
  <element id="TabsBar.TabInCaptionBarTop.Highlight" bg="145,245,5" fg="220,220,20" bdr="10,10,190" />

for bitmap skins only, to override the location of the track progress text - it will split the progress to the left of the progress bar and the duration to the right of the progress bar (see the beeTunes skin). Normally you would set the Y offset to 0 but you might want to change it.
  <element id="PlayerSplitProgressYOffset">0</element>

override the command buttons in the main panel header bar:
  <element id="Panel.CommandButtonOverride" bg="235,1,135" fg="5,255,255" />

Title: Re: New skin elements
Post by: jistme on September 16, 2012, 12:14:17 PM
It would be nice if there was an element for independent background colors for the trackbrowser. It now follows the main panel.
Title: Re: New skin elements
Post by: Bee-liever on November 15, 2012, 11:05:19 PM
<element id="Player.Wavebar" fg="250,10,100" fg2="100,200,9" />
if you also put in a bg value it will fill the background rectangle with that colour

(copied from here http://getmusicbee.com/forum/index.php?topic=7881.msg45681#msg45681 (http://getmusicbee.com/forum/index.php?topic=7881.msg45681#msg45681))
Title: Re: New skin elements
Post by: Bee-liever on December 08, 2012, 09:39:32 PM
<element id="NowPlayingPanel.SpectrumVisualiser" fg="30,255,255,255" fg2="30,83,91,18" />

(copied from http://getmusicbee.com/forum/index.php?topic=7883.msg47369#msg47369 (http://getmusicbee.com/forum/index.php?topic=7883.msg47369#msg47369))
Title: Re: New skin elements
Post by: Steven on December 14, 2012, 11:26:28 AM
 <element id="Content[Artwork].ArtworkText" bg="128,128,128" fg="0,0,255" />

sets the background and text colour when the artwork layout is configured to show pictures compressed together - see:
http://getmusicbee.com/forum/index.php?topic=3991.0
Title: Re: New skin elements
Post by: Bee-liever on February 03, 2013, 09:12:10 PM
<element id="Player.SpectrumVisualiser" bg="252,252,252" fg="90,90,90" fg2="235,235,235" bdr="233,196,0" />

if you dont supply bg, it uses the panel background
fg is the bottom of the bars, fg2 the top and bdr for the peak bars

(copied from original post http://getmusicbee.com/forum/index.php?topic=3785.msg51036#msg51036 (http://getmusicbee.com/forum/index.php?topic=3785.msg51036#msg51036))

edit:
added bg2 to set the bar colours when the player is stopped
Title: Re: New skin elements
Post by: Steven on February 12, 2013, 09:01:56 PM
set the colour for the TrackDetail view grouping header:
<element id="Content[TrackDetail].Header" fg="255,0,0" />
Title: Re: New skin elements
Post by: Bee-liever on April 27, 2013, 02:26:57 AM
set the gap between library explorer header and tabs underneath
<element id="LibraryExplorerHeaderGap>1</element>
default value = 1

(see original post here (http://getmusicbee.com/forum/index.php?topic=7173.msg56531#msg56531))
Title: Re: New skin elements
Post by: Steven on May 05, 2013, 10:06:11 PM
the following bitmaps can be overridden in the main panel tool bar - all are 16x16 except where stated otherwise
PanelNewTab
PanelBack
PanelBackDisabled
PanelForward
PanelForwardDisabled
PanelRefresh
PanelStop
PanelBookmark
PanelLayout                   (28x20)
PanelLayoutDisabled     (28x20)

i think some of the skins could benefit by overridding the default icons. Its in the next 2.1 update
Title: Re: New skin elements
Post by: Steven on May 06, 2013, 10:44:04 AM
additionallythe following element for setting the highlight fill colour on the toolbar buttons and command buttons:
Panel.HeaderButtonOverride.Highlight

http://musicbee.niblseed.com/V2_1/MusicBee_Exe_Patched.zip
Title: Re: New skin elements
Post by: Steven on June 02, 2013, 10:04:47 PM
the following have been added mainly for the new compact player - you should set all of these or none:
<element id="Compact.LeftPanel" bg="200,0,90" />
<element id="Compact.RightPanel.Default" bg="255,0,0" fg="255,255,255" />
<element id="Compact.RightPanel.Disabled" bg="255,0,0" fg="200,200,200" />
<element id="Compact.RightPanel.Highlight" bg="255,255,0" fg="0,255,255" />
<element id="Compact.RightPanel.Lowlight" bg="128,200,128" fg="200,0,255" />
<element id="Compact.Player.Background" bg="100,200,250" fg="0,100,200" />
<element id="Compact.Player.ProgressBar" bg="190,190,190" fg="233,196,0" bdr="130,130,130"/>
<element id="Compact.Player.Control.Default" fg="40,40,240" />
<element id="Compact.Player.Control.Disabled" fg="100,10,100" />
<element id="Compact.Player.Control.Highlight" fg="180,80,80" />
<element id="Compact.Player.Volume" fg="100,100,100" bdr="110,110,110" />
<element id="Compact.Player.Wavebar" fg="223,184,60" fg2="45,145,190" />
<element id="Compact.Player.Wavebar.Inner" fg="193,156,30" fg2="130,30,230" />
<element id="Compact.Player.MetroButton.Default" bg="20,55,10,200" bdr="40,200,90" />  - dont set bg if you dont need a fill colour
<element id="Compact.Player.MetroButton.Highlight" bg="80,255,0,100" bdr="90,220,220" />  - dont set bg if you dont need a fill colour

also to set the metro buttons in the main player (when the main player is configured for modern layout and has the wavebar displayed):
<element id="PlayerFlat.MetroButton.Default" bg="20,55,10,200" bdr="40,200,90" />  - dont set bg if you dont need a fill colour
<element id="PlayerFlat.MetroButton.Highlight" bg="80,255,0,100" bdr="90,220,220" />  - dont set bg if you dont need a fill colour

http://musicbee.niblseed.com/V2_1/MusicBee_Exe_Patched.zip
Title: Re: New skin elements
Post by: Steven on June 12, 2013, 07:29:27 PM
to override the "Unknown Artist" image in the artwork layout
<element id="UnknownArtist">...bitmap data...</element>

to override the playing track tab icon:
<element id="PlayingTrack">...</element>
<element id="PlayingTrackInTab">...</element>

to override the visualiser icon:
<element id="Visualiser">...</element>

to override the "Lyrics" header when configured with a vertical stack (used in the Melon Remixed skin)
<element id="NowPlayingPanel.SectionHeader" bg="0,244,0" />

to hide the arrows in a scroll bar:
<element id="ScrollbarNoArrows">true</element>

"PlayerFlat.Control.Highlight" now accepts bg and bdr, where you might set an alpha component on the bg colour so you can get a highlight box around the player controls on mouse over

http://musicbee.niblseed.com/V2_1/MusicBee_Exe_Patched.zip
Title: Re: New skin elements
Post by: Steven on September 21, 2013, 06:22:28 PM
to override the new sub-header colour in the Album and Tracks layout

<element id="Content[AlbumAndTracks].SubHeader" fg="120,120,120" />
Title: Re: New skin elements
Post by: Steven on October 06, 2013, 10:35:36 AM
to override the icon used for the "Search Results" node:
<element id="SearchResultsIcon">...bitmap data...</element>
Title: Re: New skin elements
Post by: Steven on January 26, 2014, 08:12:04 PM
as of MusicBee v2.3.5139:

to override the icon colour used for command buttons when the user has set the icons to be recoloured to the skin
<element id="Panel.CommandIconOverride" fg="245,0,0" />

to specify the text colour for highlighted items in a drop-down menu
<element id="Menu.DropDown.HighlightText" fg="255,0,0" />

to override the progress button when the player is docked to the right sidebar
<element id="PlayerSidebar.ProgressButton" fg="244,0,0" />

to override the colour used for the tag editor header bar when docked in the main panel
<element id="TagEditorPanel.Header" bg="255,0,100" fg="255,255,255" />

to put a border around the search box in the main panel
<element id="Panel.SearchBox" bdr="255,0,0" />

to put a border around the scroll bars - its only supported for when no arrows are displayed
<element id="ScrollbarNoArrows">true</element>
<element id="Panel.ScrollBar.Default" bg="210,210,210" bg2="200,200,200" bdr="190,190,190" />

to override the separator line that groups albums when the Album And Tracks layout is used in the Now Playing list
<element id="NowPlaying[AlbumAndTracks].AlbumSeparatorLine" bg="255,0,0" />

to change the rounding on the caption bar:
<element id="UseSquareCaptionBorders">XXX</element>
XXX=Always; Win8+; Never
When Win8+ is used, the skinned caption bars need to work as rounded and as square depending on the user's OS version

to override the column headers in dialog panels
<element id="Controls.ListHeader" bg="255,0,0" bg2="0,100,200" fg="255,210,255" />

to override the background colour for the right sidebar - it doesnt really affect much other than when the player, visualiser or wavebar is docked in the sidebar
<element id="Sidebar.Body.Default" bg="100,100,100" />
Title: Re: New skin elements
Post by: Steven on February 02, 2014, 09:26:13 AM
to override the progress button in the various player modes:
  <element id="PlayerSidebar.ProgressButton" fg="24,0,100" /> ' defaults to button control
  <element id="PlayerFlat.ProgressButton" fg="25,196,0"/>  ' defaults to bar colour as now
  <element id="PlayerTopFlat.ProgressButton" fg="25,196,0"/>  ' defaults to PlayerFlat.ProgressButton as now
  <element id="PlayerMini.ProgressButton" fg="2,146,190"/>
  <element id="Compact.Player.ProgressButton" fg="253,96,0"/>
Title: Re: New skin elements
Post by: Steven on March 08, 2014, 05:53:39 PM
forgot to mention these:
i have added the following overrides - this only activates for the now playing list docked in the left or right sidebar (and not when its docked in the bottom of the main panel)
  <element id="NowPlayingList[TrackDetail].ListHeader" bg="40,240,240" bg2="225,5,5" fg="0,210,0" bdr="255,80,80" />
  <element id="NowPlayingList[TrackDetail].Default" bg="55,255,255" fg="0,200,0" bdr="200,2,100" />
  <element id="NowPlayingList[TrackDetail].Highlight" bg="45,236,172" bdr="227,216,152" fg="0,220,20" />
  <element id="NowPlayingList[TrackDetail].Lowlight" bg="35,235,235" bdr="25,105,25" fg="0,250,40" />
  <element id="NowPlayingList[TrackDetail].Disabled" fg="70,70,0" />
  <element id="NowPlayingList[TrackDetail].ListAlternating.Default" bg="48,248,248" fg="0,210,0" />
  <element id="NowPlayingList[TrackDetail].ListAlternating.Disabled" fg="70,250,170" />
  <element id="NowPlayingList.ScrollBar" bg="200,200,0" bg2="180,10,180" bdr="235,40,255" />
  <element id="NowPlayingList.ScrollBarThumb" bg="20,230,230" bg2="20,20,250" fg="200,00,180" bdr="200,90,0" />
  <element id="NowPlayingList.ScrollBarBackground" bg="30,230,30" bg2="250,20,250" />

this applies to the column browser, thumblist browser and the podcast subscriptions browser:
  <element id="FilterPanel.ListHeader" bg="40,40,40" bg2="25,25,25" fg="200,250,150" bdr="255,40,20" />
  <element id="FilterPanel.Default" bg="40,40,40" fg="200,200,200" bdr="20,20,20" />
  <element id="FilterPanel.Highlight" bg="45,26,72" bdr="27,16,82" fg="220,100,200" />
  <element id="FilterPanel.Lowlight" bg="35,35,75" bdr="25,25,65" fg="100,200,100" />
  <element id="FilterPanel.Disabled" fg="170,170,170" />
  <element id="FilterPanel.ListAlternating.Default" bg="48,48,98" fg="220,220,220" />
  <element id="FilterPanel.ListAlternating.Disabled" fg="170,170,170" />
  <element id="FilterPanel.ScrollBar" bg="200,200,0" bg2="180,10,180" bdr="235,40,255" />
  <element id="FilterPanel.ScrollBarThumb" bg="20,230,230" bg2="20,20,250" fg="200,00,180" bdr="200,90,0" />
  <element id="FilterPanel.ScrollBarBackground" bg="30,230,30" bg2="250,20,250" />
Title: Re: New skin elements
Post by: Steven on March 08, 2014, 05:54:32 PM
for the next v2.4 release, the following scrollbar overrides are available for the left navigator
  <element id="LeftNavigator.ScrollBar" bg="210,0,0" bg2="200,200,200" bdr="0,190,10" />
  <element id="LeftNavigator.ScrollBarThumb" bg="30,230,230" bg2="50,20,250" fg="100,100,00" bdr="0,0,0,0" />
  <element id="LeftNavigator.ScrollBarBackground" bg="30,30,230" bg2="250,20,250" />

i will also add for the next release:
  <element id="Panel.ChildBody.ScrollBar" bg="210,0,0" bg2="200,200,200" bdr="0,190,10" />
  <element id="Panel.ChildBody.ScrollBarThumb" bg="30,230,230" bg2="50,20,250" fg="100,100,00" bdr="0,0,0,0" />
  <element id="Panel.ChildBody.ScrollBarBackground" bg="30,30,230" bg2="250,20,250" />
this will enable the scroll bar in the library explorer and Now Playing panel to match the panel colours
Title: Re: New skin elements
Post by: Steven on May 10, 2014, 03:40:59 PM
for the next v2.4 update, to override the new soundcloud Track Search icon

<element id="TrackSearchIcon">...bitmap data...</element>
Title: Re: New skin elements
Post by: Steven on July 20, 2014, 10:17:25 AM
these are available in the latest v2.4 patch version

to override the tabs when displayed in the caption bar:
<element id="CaptionBar.HeaderControl.Default" fg="190,190,190" />
<element id="CaptionBar.HeaderControl.Disabled" fg="120,120,120"  />

to override the colours used for the status bar when the player is docked on the bottom:
<element id="Panel.StatusBarInPanel.Default" bg="245,245,245" fg="95,95,95" bdr="230,230,230" />
and this overrides the panel open/close buttons:
<element id="Panel.StatusBarControlInPanel.Default" fg="140,140,140" />

to force musicbee to display the status bar in the main panel when the player is docked down the bottom (I might remove support for this):
<element id="AllowStatusBarInPanel">true</element>

to show a vertical separator bar between each inactive tab:
<element id="TabsBar.Tab.Separator" bg="180,180,180" />
<element id="TabsBarBelow.Tab.Separator" bg="180,180,180" />
<element id="TabsBar.TabInCaptionBar.Separator" bg="180,180,180" />

override the artwork panel scrollbars:
<element id="Content[Artwork].ScrollBar" bg="150,150,150" bg2="130,130,130" bdr="0,0,0" />
<element id="Content[Artwork].ScrollBarThumb" bg="255,255,255" bg2="255,255,255" fg="123,123,123" bdr="255,255,255" />
<element id="Content[Artwork].ScrollBarBackground" bg="250,250,250" />

overrides the colouring used under the tabs bar when MainPanelTopBorder is true
<element id="MainPanelTopBorderColour" bdr="180,180,180" />
Title: Re: New skin elements
Post by: Steven on July 22, 2014, 10:35:43 PM
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" />
Title: Re: New skin elements
Post by: Steven on July 24, 2014, 07:23:21 PM
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" />

Title: Re: New skin elements
Post by: Steven on July 26, 2014, 11:34:54 AM
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" />
Title: Re: New skin elements
Post by: Steven on July 27, 2014, 08:16:02 PM
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" />
Title: Re: New skin elements
Post by: Steven on July 31, 2014, 09:59:50 PM
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" />
Title: Re: New skin elements
Post by: Steven on March 26, 2016, 05:58:15 PM
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">