Skinning Guide

This guide is for basic XML skins. A guide for XMLC (bitmap) skins will be added at a later date.

All parts are from Rotem K.'s Skinning Guide on the forum, which starts here. If you have questions, you may be able to find the answer there.

Part One: The Basics[]

The first thing you're going to need is a skin.xml file. Preferably you'll choose a skin that is as much similar in colors as the one you have in mind and want to do. If you are making a dark skin then you want to get a dark skin XML file. If you're making a bright skin, well, get a skin that’s bright. The reason for this is that you might have fewer things that need changed. Also, you'll have the original colors' numbers (this will be explained later) as reference.

You can find a skin.xml file either from Path\MusicBee\Skins or download a new one from the Skins page.

Any text editor will do for opening the file. (I myself use Notepad.)

You'll notice right away that the file is constructed from many lines of element tags. Each one fixes the settings for a different interface part of the application.

Please note: In my skins I've added numbers as notes. They are not necessary but they will be helpful as reference throughout this guide. So every time you see remember that this is just a note, and affects nothing.

Here's a random element line:

<element id="Panel.ScrollBarThumb.Default" bg="100,100,100" bg2="60,60,60" fg="110,110,110" bdr="50,50,50" />

The element ID refers to the interface part that is changed with this line. After that you can see BG, BG2, FG and BDR color settings.

Color is set in the skins as RGB numbers. You get these from any photo editing software like Photoshop, Paint shop or Windows Paint.

BG – Background color, usually sets the main color on the element.
BG2 – Not very common. Used for creating a gradient color filling.
FG – Foreground color, usually sets the text color on the element.
BDR – Border color.

Note that not all elements will have all 4 of these color settings about them, Some have just BG, or just FG.

In summary Skins consist from element tags. Each element has 4 or less color settings that effects him. Each color setting is worked with RGB numbers that you get from a photo editing software.

In the next part I'll break down each element line and it's effect on the interface.

Part Two: Image Elements[]

I've decided to start with the image elements because they are the ones most easily missed when doing a skin and I get asked about those the most.

Image elements differ from the Color Elements, which are fixed with RGB numbers, that you'll need to place an image code within the element. To generate the code you'll need to encode the image with Base 64. Here's a website where you can do that. Copy the result to your clipboard, then just paste it inside the image element in your skin.

Splash Screen[]

<element id="SplashScreen"> CODE </element>

any image will do here
has 3 pixels on each corner that offer transparency. So if you want round corners on your splash screen, pixels [0,0 | 0,1 | 1,0] - for top left corner and respectively in the rest of the corners needs to be transparent and saved in PNG format.

Border Elements[]

Sizes (in pixels) for these are:

FormBorderTop: 28x1
FormBorderTopRight, FormBorderTopLeft: 28x5
FormBorderRight, FormBorderLeft: 1x4
FormBorderBottomRight, FormBorderBottomLeft: 4x4
FormBorderBottom: 4x1

I usually take a screenshot of musicBee with the skin in development that has the interface colors right but borders that needs addressing, paste it in an image editing software. Work it to my liking and then slice it according to the sizes.

If you want rounded Bottom borders, make sure settings element UseRoundWindowBorders is enabled:

<element id="UseRoundedWindowBorders">true</element>

Window Buttons[]

Elements [ FormMaximiseButton, FormMinimiseButton, FormRestoreButton, FormHelpButton, FormCloseButton ]

I usually paste those files on to a screenshot of the skin in development with the border colors right, then work that button layer and slice.

   ADDED AFTER v1.2.4054:
   Highlight Window Buttons[ FormMaximiseHighlightButton, FormMinimiseHighlightButton, FormRestoreHighlightButton, FormHelpHighlightButton, FormCloseHighlightButton ]
  Note that you must use all of those Highlight elements or none.

Last.fm Love icons in main player[]

   <element id="PlayerLastFmNotLove">CODE</element>
   This element fixes the image that will be displayed in the main player when the song is not loved.

   <element id="PlayerLastFmLoveBright">CODE</element>
   This element fixes the image that will be displayed in the main player when the love icon is highlighted [mouse over].

   <element id="PlayerLastFmLove">CODE</element>
   This element fixes the image that will be displayed in the main player when the song is already loved.

Last.fm Love icons in mini player[]

   image can be downloaded from : http://www.mediafire.com/?awvab6bwu3i6a9e

   <element id="MiniPlayerLastFmNotLove">
   This element fixes the image that will be displayed in the mini player when the song is not loved.

   <element id="MiniPlayerLastFmLoveBright">
   This element fixes the image that will be displayed in the mini player when the love icon is highlighted [mouse over].

   <element id="MiniPlayerLastFmLove">
   This element fixes the image that will be displayed in the mini player when the song is already loved.

Check Boxes[]

   images can be downloaded from : http://www.mediafire.com/?53qsj90sf9l95b3

   <element id="CheckTick">CODE</element>
   Checked tick in a checkbox.

   <element id="CheckTickDisabled">CODE</element>
   Checked disable tick in a disabled checkbox.

   <element id="CheckUnknown">CODE</element>
   Never seen this one myself in musicBee but I guess it will appear when some options are ticked and some aren't.

Wait Indicator[]

   ELEMENT IS IGNORED AS FOR NOW.

   <element id="WaitIndicator">CODE</element>
   This one you can get from http://www.ajaxload.info/#preview. Select INDICATOR from the drop-list, color and background color,
   then import to Base64 and paste into your skin.
   appears in the status bar whenever a background prosses is running (ripping, looking up tagges and album arts).
   
   note that this icon also appears on the right side panel whenever right clicking an album art and then chossing "Search Internet" unless you'll use the next element:

  <element id="WaitIndicatorArtwork">
   appears on the right side panel whenever right clicking an album art and then chossing "Search Internet".

Inprogress Indicator[]

   <element id="InProgressIndicator">CODE</element>
   This one you can get from http://www.ajaxload.info/#preview. Select ARROWS from the drop-list, color and background color, then import to Base64 and paste into
   your skin.
   appears in the left side panel when ever downloading files from the browser, near downloads.

Delete[]

   image can be downloaded from : http://www.mediafire.com/?lgnu4xes0ggw459
   this one appears when wait indicator does in the status bar, an? isn't so much delete as cancel.

Music Library icon in the library tab[]

   image can be downloaded from : http://www.mediafire.com/?iwuceh4pp27t9jx  
   <element id="MusicLibraryInTab">CODE</element>

Missing Album Art Image[]

   <element id="NoArtwork">CODE</element>
   Will appear when ever a song is missing it's album art

MiniPlayerNowPlaying and MiniPlayerNowPlayingBright[]

   <element id="MiniPlayerNowPlaying">
   <element id="MiniPlayerNowPlayingBright">
   these two effect the "Show now playing list toggle", Bright effects the highlight color(mouse over).

AZ icon[]

   effects the little AZ icon in the main panel field columns.