Author Topic: Skinning Guide - Part 3 - The Elements: Color Elements  (Read 28246 times)

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
Hey guys,

If you just started skinning you might want to check the two previous parts of the guide:
Skinning Guide - Part 1 - The Basics
Skinning Guide - Part 2 - The Elements: Image Elements

Before I begin this part I remind you that if you have any questions about skinning, please address those to me or any member who had already posted skins and may have the experience those answer those questions. if a member can't solve whatever trouble you are having then ask Steven.  

PART THREE – THE ELEMENTS - COLOR ELEMENTS
Now the way I'm going to do this, I'm going to post a list of all the current color elements that Steven sent me, and whenever I get some time to work on it I'll update it with a few more pictures and explanations. Because of the sheer volume of the elements If I'll wait till I have time to do them all I'll never get to it. the goal here is to have an image for every element that's a bit tricky to find and explanations for all of them.  

Special Thanks to Sarge and Analien who helpd in the making of this guide!

---------------------------------------------------------------------------------------------

so here we go:

The part of the interface been fix with that element part [BG, FG, BDR] will always be RED.
I'll take the images with Asylum White skin so it will be clear.

1. <element id="TitlebarActiveForeColour" BG />
    BG:
    

2. <element id="TitlebarInactiveForeColour" BG />
    BG: Same as TitlebarActiveForeColour but will only show when the MusicBee loss focus, meaning it's inactive.

3. <element id="TitlebarColour" BG />

4. <element id="ApplicationBackColour" BG />
    BG: Appers between all panels.
    

5. <element id="WindowBackColour" BG />
    BG: The background color of all windows [ preferences, about, ect. ]
    

\\MENU BAR
6. <element id="MenuBar.Default" BG FG />
    THIS ELEMENT ONLY APPEARS IN SKINS THAT DOESN'T HAVE INTEGRATED MENUS, OR IN SKINS WITH INTEGRATED BUT SKIN BORDERS TURN OFF.
    BG: The background color of non-integrated menu.
    
    FG:  The text color of non-integrated menu.

7. <element id="Menu.ParentItem.Highlight" BG FG BDR />

8. <element id="Menu.ParentItem.Pressed" BG FG BDR />

9. <element id="InlineMenuBar.Default" BG FG />

10. <element id="InlineMenu.ParentItem.Highlight" BG FG BDR />
    BG:
    
    FG: Text color at the same part.
    BDR:
    

11. <element id="InlineMenu.ParentItem.Pressed" BG FG BDR />
    BG:
    

12. <element id="MenuBarSeparator" BG />

13. <element id="Menu.DropDown.Default" BG FG BDR/>
    BG:
    
    FG:
    
    BDR:
    

14. <element id="Menu.DropDown.Highlight" BG />
    BG:
    

15. <element id="Menu.DropDown.Disabled" FG />
    FG:
    

16. <element id="Menu.DropDownMargin" BG />
    BG:
    

17. <element id="Menu.DropDownCheckBox.Default" BG />
    BG:
    

18. <element id="Menu.DropDownCheckBoxBorder.Default" BG />
    BG:
    

19. <element id="Menu.DropDownCheckBox.Highlight" BG />
    BG:
    

20. <element id="Menu.DropDownCheckBoxBorder.Highlight" BG />
    BG:
    

21. <element id="Menu.DropDownSeparator" BG />
    BG:  
    

\\CENTERAL PANEL  
\\ --- A-Z JUMP PANEL
22. <element id="Panel.SubHeader.Default" BG FG />
    BG:  
    
    FG:
    

\\ --- ADDRESS BAR
23. <element id="Panel.Header.Default" BG FG />
    BG:  
    
    FG:  
        
  
24 <element id="Panel.HeaderControl.Default" BG FG BDR/>
    BG:
    
    FG:
    
    BDR:  
    

25. <element id="Panel.HeaderControl.Highlight" />
    Serves as the default for Panel.ChildHeaderControl.Highlight - so if you have Panel.ChildHeaderControl.Highlight defined then it serves no purpose. it's only use by now is backwards compatibility for old skins.
    
26. <element id="Panel.LocationBarEdit.Default" BG />
    BG:  

\\ --- TABS BAR
27. <element id="TabsBar.Background" BG />
    BG:
    
 
28. <element id="TabsBar.Tab.Default" BG FG BDR />
    BG:
    
    FG:
    
    BDR:
    

29. <element id="TabsBar.Tab.Highlight" BG FG BDR />
    BG:
    
    FG:
    
    BDR:
    

30. <element id="TabsBar.Tab.Lowlight" BG />

31. <element id="TabsBar.TabCloseButton.Highlight" BG />

32. <element id="TabsBar.TabCloseButton.Lowlight" BG />

\\LEFT SIDE PANEL
\\ --- HEADERS    
33. <element id="Panel.SectionHeader.Default" BG BG2 FG />
    BG:  
    
    FG:
    

\\ --- BODY    
37. <element id="Panel.Body.Default" BG />
    
Panel.Body.Highlight
Panel.Body.Lowlight

34. <element id="Panel.TabSelector.Default" BG />

35. <element id="Panel.TabSelector.Highlight" BG />
    
36. <element id="Panel.TabSelector.Lowlight" BG />

Panel.ChildHeader.Default
Panel.ChildHeaderWithTabs.Default
Panel.ChildHeaderControl.Default
Panel.ChildHeaderControl.Highlight
Panel.ChildBody.Default
Panel.ChildBody.Highlight
Panel.ChildBody.Lowlight
Panel.StatusBar.Default
Panel.StatusBarControl.Default
Panel.StatusBarControl.Highlight
Panel.StarRating.Default
Panel.StarRating.Highlight
Panel.StarRating.Lowlight
Panel.NotLovedIcon.Highlight
Panel.NotLovedIcon.Lowlight
Panel.ScrollBarThumb.Default
Panel.ScrollBarBackground.Default
Panel.ScrollBar.Default
NowPlayingTabsBar.Background
NowPlayingTabsBar.Tab.Default
NowPlayingTabsBar.Tab.Highlight
NowPlayingTabsBar.Tab.Lowlight
NavigatorPanel.Body.Default
Content[TrackDetail].Body.ListHeader
Content[TrackDetail].Body.Default
Content[TrackDetail].Body.Disabled
Content[TrackDetail].Body.Highlight
Content[TrackDetail].Body.Lowlight
Content[TrackDetail].ListAlternating.Default
Content[TrackDetail].ListAlternating.Disabled
Content[AlbumAndTracks]
Content[AlbumAndTracks].ArtistSplitterLine
Content[Artwork]
Content[Artwork].HeaderControl.Default
Content[Artwork].Body.Default
Content[ArtistProfile]
Sidebar.Header.Default
TrackInfoPanel
LyricsPanel
LyricsPanel.Highlight
ArtworkPanel
InputPanel.Default
InputPanel.Highlight
EditPanel.Default
EditPanel.Highlight
Toolbar.Background
Toolbar.Body
Toolbar.Counter
Player.Background
Player.DisplayPanel
Player.Control.Default
Player.Control.Disabled
Player.Control.Highlight
Player.SettingsControl.Highlight
Player.StarRating.Default
Player.StarRating.Lowlight
Player.Volume
Player.VolumeButton
Player.ProgressBar
Player.ProgressButton
Player.SpectrumDefault

<element id="Player.SpectrumDead" bg />
BG:


<element id="Player.SpectrumLow" bg />
BG:


<element id="Player.SpectrumMedium" bg />
BG:


<element id="Player.SpectrumHigh" bg />
BG:


PlayerSidebar.Background
PlayerSidebar.Control.Default
PlayerSidebar.Control.Disabled
PlayerSidebar.Control.Highlight
PlayerSidebar.Volume
PlayerSidebar.VolumeButton
PlayerSidebar.ProgressBar
MiniPlayer.Background
MiniPlayer.StarRating.Default
MiniPlayer.StarRating.Lowlight
NowPlayingPopup.Border
NowPlayingPopup.Body
StatusBar.Default
LibraryExplorer.Header.Default
AutoDjPanel.Default
AutoDjPanel.SectionHeader.Default
Controls.Counter
Controls.TabHeader.Default
Controls.TabHeader.Highlight
Controls.TabHeader.Lowlight
Controls.InputControl.Default
Controls.InputControl.Disabled
Controls.InputControl.Modified
Controls.InputControl.Highlight
Controls.InputControl.Lowlight
Controls.LockedInputControl.Default
Controls.LockedInputControl.Disabled
Controls.SearchBox.Default
Controls.SearchBox.Lowlight
Controls.ProgressBarContainer
Controls.ProgressBar
Controls.ProgressBarButton
Controls.SearchBoxSplitter
Controls.Button.Default
Controls.Button.Disabled
Controls.TicketsButton.Default
Controls.RadioButton.Default
Controls.RadioButton.Disabled
Controls.DropdownButton.Default
Controls.DropdownButton.Disabled
Controls.StarRating.Default
Controls.SliderButton.Default
Controls.SliderButton.Disabled
Controls.SliderLine.Default
Controls.SliderLine.Disabled
Controls.ArtworkFrame
Controls.FaintLine
Controls.VerticalMenu.Default
Controls.VerticalMenu.Highlight
Controls.VerticalMenu.Lowlight
Controls.ScrollBarThumb.Default
Controls.ScrollBarBackground.Default
Controls.ScrollBar.Default
Controls.TabSelectedButton

Menu.CommandButton.Default
Menu.CommandButton.Selected


That's it so far, if more color elements will be added I'll update this thread.

Next up: Setting Elements

In the mean time feel free to ask any question.

Rotem
Last Edit: March 03, 2012, 07:47:04 PM by Rotem K.

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
If anybody would like to help this guide, it would be a great help if you would take a few elements and make them images [with Asylum White, the element part changed to RED, and with the same size image as I used].

Thanks. 

Last Edit: March 08, 2011, 03:23:53 PM by Rotem K.

Analien

  • Full Member
  • ***
  • Posts: 219
<element id="Player.SpectrumDead" bg />


<element id="Player.SpectrumLow" bg />


<element id="Player.SpectrumMedium" bg />


<element id="Player.SpectrumHigh" bg />

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
Thanks for your help Analien. it's much appreciated and surely will serve anyone who comes through this guide.

I've updated the guide and credit.

silasje1

  • Member
  • Hero Member
  • *****
  • Posts: 652
Thanks man!!! just need some more screenshots with the body part :)
HDMI GTX570->YAMAHA RX-V471->DALI ZENSOR 1

Dutch Translation

WMP 12 Skin

lnminente

  • Hero Member
  • *****
  • Posts: 1049

Adson

  • Full Member
  • ***
  • Posts: 240
Thanks a lot for sharing your knowledge  :)
It's very helpful.

A.

jistme

  • Guest
Hi Lmnimente,

Any idea to what element this blue gradient background in your dummy skin refers?




Daiman2020

  • Newbie
  • *
  • Posts: 17
Thanks. This is one of the most helpful threads in here.

Just i have one qestion. Hoe can i make the background transpatent to desktop background or blur. Not sure which name is correct yet i know the differance.

Sorry if it is mentioned somewhere. Im looking for an answer since morning.