How to skin MediaMonkey v3.0 and higher

From MediaMonkey Wiki
Revision as of 09:48, 3 April 2007 by Morten (talk | contribs) (Guided skinning of Player- and FloatPlayer-skin)
Jump to: navigation, search

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 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,JPG-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.

Make yourself a folder with your skins' 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, 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 playing with image element. Press on the newly made element 'PlayerBackground' and thereby press on Bitmpa Object (1 state). This is shown with the number 2 in the help-image. When you pressed that, the container will get a "+"-sign to signalise it has elements inside itself. The image-element you 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;

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. 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 middle which is.

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.