Author Topic: New skin elements  (Read 90347 times)

Steven

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


Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34416
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
Last Edit: January 27, 2011, 09:19:40 PM by Steven

Steven

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

Steven

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

Steven

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

Steven

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


Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34416
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=

Steven

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

Steven

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

Steven

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

Steven

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

Steven

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

Steven

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

Steven

  • Administrator
  • Hero Member
  • *****
  • Posts: 34416
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
Last Edit: December 18, 2011, 08:35:01 AM by Steven

Steven

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

Last Edit: March 16, 2012, 02:00:28 PM by Steven