How to skin MediaMonkey v3.0 and higher

From MediaMonkey Wiki
Revision as of 10:04, 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

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 Bitmap 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 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.

Now everybody have to read the next part.

You'll have to make a ini-file. It must have the same name as your mskn-file, but it has the .ini-extension instead of the .mskn-extension.

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.

Retrieved from "http://www.mediamonkey.com/wiki/index.php?title=How_to_skin_MediaMonkey_v3.0_and_higher&oldid=2253"