How to skin MediaMonkey versions 3 and 4

This page is to help you through skinning MediaMonkey and it's objects.

First of all, you need to download ThemeEditor 7. It's required to edit the .mskn-files which MediaMonkey uses to draw windows, objects, text etc. There'll be three categories; one for the .player-skins, one for the big ol' "Theme.mskn" and one for the other objects which also is customizable. We'll start with the player-skins.

---

Player-skins

Player-skins is defined by two files; the .mskn- and the ini-file. They have same names, but different extensions. There are three types of players; Player, FloatPlayer, MicroPlayer.

Player is for the player skin when the monkey is maximized with all functions activated. It can not be transperent.

FloatPlayer is for the mini-player skin which can be transperent.

MicroPlayer is for the tray-area in Windows. This is mainly a control-skin, but there are indications that it'll be extended to show album-information when you activate a button in the tray-player.

Guided skinning of Player- and FloatPlayer-skin

When you've downloaded ThemeEditor, you're ready to go. However, you must have a resource file (.PNG, .BMP, .ICO, .EMF or a .WMF-file) to retrieve images for elements in your skin from. You have the possibility to;

a) Work from an existing skin-file. b) Start from scratch.

This guide will let you do both things. It will also guide you through skinning both the Player-skin and the FloatPlayer-skin. However, the one big difference is that the Player-skin can't be transperent. Elements in it can be transparent just as with the MiniPlayer-skin, but it's main purpose is to be docked inside the MediaMonkey-window, so it needs to be a box with four sides.

Let's begin. Always begin with the .mskn-file. It defines the resources you want to use in your skin. The ini-file is mainly for positioning and sizing of the elements.

---

Defining the background for your player

Make yourself a folder with your skin's name. Put it inside your 'X:\Program Files\MediaMonkey\Skins\'-folder. Open up ThemeEditor 7, or open up an existing .mskn-file. In either case, go up to the menu and press 'Save as'. Go the new folder you've created and name the file either Player.mskn or FloatPlayer.mskn. The new file you've just saved will have an element called 'Form'. This you can use in your skin but rename it first to 'PlayerBackground'. This element is shown with the number 1 in the help-image. Next up, define the element's Width and Height. The 'Width'-entry is placed furthest down on any element in the .mksn-file, and the 'Height'-entry is easily found above the entry named 'Kind'. Now, check that the 'Kind'-entry has this property: "skNone". If you've made a new file, it will be "skForm". The last thing we want to do with this element is making it a client for your skin. It is important to define this as client, because it's a container (wrapper) of all your skin's background. Change the first entry 'Align' to "saClient".

Next up is learning to use image-elements. Press on the newly made element 'PlayerBackground' and thereafter press on Bitmap Object (1 state). This is shown with the number 2 in the help-image. When you've pressed that, the container will get a "+"-sign to signalise it has elements inside itself. The image-element you've just made will have a height of 20px and a width of 30px. Define it as big as you like. If you don't know how big the element is, and that's not unlikely at all, define the image source first. This entry called 'Bitmap' (shown with the number 3 in the help-image) is the only source for this entry. It's not a 5-state button, so it's easy to define.

Before we proceed, there is important to know that this background image should be resizable, at least if you're making a Player.mksn-file. To have a nice stretching of your background-image, you must have something that you want to be dragable and something you don't. If you want all elements in your background to stretch, skip the next paragraph;

---

Edit advanced backgrounds for your player

First, we need to define what should be stretchable and place the un-stretchable element on top of that. This is very easy. Do you remember the 'Align'-entry? This entry is one of the most important entries in your .mskn-file. If you don't want the element to be resizable, you need to position the element relative to either the center "saCenter", the left side "saLeft" or the right side "saRight". It's important that you do this, so that the element knows where it should be when the player is resizing.

In our example, we want our skin to have a Left- and a Right-side which isn't stretchable, and a mid-part which is. We've just added a one-state Bitmap Object. We need two more. For each time you want to make a sub-element, you've got to select which element that should have this. In our case it's always the PlayerBackground which has to have sub-elements. When we want other player-elements such as Play/Pause-buttons, Continous etc. we have to press the objects-node and thereafter make a new image-element. The left element can be our first element. It should have the same height as the container, but it should be less wider. Define what part of the Bitmap which should be used as the source for this part and writ down how wide this element is. You'll need it for your Stretch-part. Next up is the Right-part of the skin. Instead of defining the entry 'Align' as "saLeft", define it as "saRight". most likely it will have the same height as the container, and the same width as your left part.

Now what's left is the stretch part. The most important thing to notice is that this part's entry 'Align' should have the property "saClient", just as the container has. Do you remember the number you wrote down for some minutes ago? Use this number in the element's 'Left'-entry. When you've defined this elements width, you'll have to summen up the width of this element and the Left-side of the player to use on positioning the Right-element. Use the same entry 'Left' to position the element. If you press on the PlayerBackground node, you'll now see a nice player-background to work with.

---

Edit your first entry in the ini-file

You'll have to make an ini-file. It must have the same name as your mskn-file, but it must have the .ini-extension instead of the .mskn-extension. To edit this ini-file, simply select Notepad to open this in Windows.

[PlayerSkin]
EngineVersion=100
Resizable=1,1,1,0
Pos=0,0
Size=675,60
Transperent=0
TimeFormat=mmm:ss

This code should be similar to your first entry in the ini-file. It says how small the player can be and how it resizes. Ignore the EngineVersion. You don't modify that. The "[]" says for what skin-element the following code is for. We'll go through that later. Just know that the first entry should be [PlayerSkin] and the information you should be editing is this.

1) Resizable - This tells the engine in what directions you can resize to, but also where the elements in your skin should be oriented by. This is a usual code for a player skin which can, in fact, only be resized horisontally. The number 1 enables (in order) resizing "Left,Top,Right,Bottom", and the number 0 deactivates that type of resizing.

2) Pos - Positioning of elements is usual, so leave this thing alone. We will go through what it's for very soon.

3) Size - This defines the smallest size of your player skin. It's important that you make this area as small as possible. The values are for the size "Width, Height" in pixels (px).

4) Transperent - Is a very important point. For player-skins used in the main body, this isn't supported. But for FloatPlayer this is very useful to make weird formed player skins. As with the other elements, the number 1 activates this function.

Main Theme (Theme.mskn)

More information to be added.

Other objects

On the to-do list of the MediaMonkey-team is wrapping of icons within the .msz-file.

FAQ

If you get any more questions, please ask and it will be put in here.