Fast Newbie's Skinning Walkthrough for MM 3

Tutorial written by Roving Cowboy.

This tutorial will guide you through some basic steps to get you started with skinning for MediaMonkey v3. The used skin editor is Theme Editor 7.

Open up an existing skin

1. Make a copy of an existing skin, e.g. the default skin "Royal Blue.msz" (usually located under "C:\Program Files\MediaMonkey\Skins"), and give it a suitable name.
2. Change the extension from .msz to .zip so that you can open the file (actually a normal zip file) with an installed zip program.
3. Unzip the .zip file, preferably as subfolder of the folder where the .zip file is located. Then delete the .zip file.
4. Open up the unzipped folder and look for the .mskn files. These are the skin files that can be opened and edited by the theme editor. Theme.mskn is the file that defines the skin of the whole MediaMonkey application, except for the player. The player skin is defined by other files:
• Player.mskn and Player.ini for the internal player
• FloatPlayer.mskn and FloatPlayer.ini for the floating player
• MicroPlayerH.mskn and MicroPlayerH.ini for the taskbar player (use H for a horizontal player, use V for a vertical player)

Export the skin's images

Note: In order to modify the images used by the skin, you have to export them first. Create a folder for each .mskn file you want to edit the images from. That way, you can keep these images separated from the other skin files.

5. Start the theme editor and load the chosen .mskn file through menu File > Open...
6. Use menu File > Export Bitmaps... to export the skin's image resources to the folder you created for the .mskn file (see note above).
7. Open up this folder and take a look at the images. Usually you'll see either one big skin image (e.g. annotated example) or a lot of small ones (usually one per control), together with some background images. The magenta color on the images represents the transparent parts of the image.

   Note: The theme editor adds the .bmp extension to the exported files without removing the previous extension first. You have to fix the file names manually (e.g. change "myimage.png.bmp" to "myimage.bmp").

8. To edit the exported images, you can use any image editor that supports bitmap files. However, a more advanced image editor is recommended (e.g. Paint.Net, Adobe Photoshop, WinGIMP, etc.). Edit all the skin images that you want to change, and save them back on the same file name (overwriting the existing files).

Replace the skin's images with the modified ones

9. Once the images have been edited, make the theme editor visible again (or reopen the .mskn file in case you closed it). In the tree on the left side of the screen, click the + sign in front of "images". This will show you a list of all the images in the .mskn file.
10. Select the name of an image that you want to replace with a modified version. Click the "Replace Image..." button, then click "Load bitmap..." and browse to the modified image. Click Open and finally OK.

Note: You don't have to worry about "From Gallery..." or "Mask" yet. You will find out what those mean later. Just remember that the theme editor by default will interpret all magenta color on an imported image as transparent.

11. Do the same for all images you modified outside the theme editor, and then save the skin and close the theme editor.

Other skin files to include

12. In the skin's folder, you can create an "Icons" subfolder (if it isn't there already). There you can put an image "NoAArt.png" that is used when there's no album art. Later on, you will be able to put your custom skin icons in the same folder, to replace the standard icons in MediaMonkey.
13. You can also change the background images for the various panes in MediaMonkey:
• sdb_background_aaview.bmp for the Album Art background
• sdb_background_list.bmp for the Tracks List background
• sdb_background_playing.bmp for the Now Playing background
• sdb_background_tree.bmp for the Tree background

Close and test the skin

14. Once all chosen skin files are edited, select the skin's folder and zip it back. Then rename the .zip extension to .msz. The .msz file should be in MediaMonkey's Skins folder (usually "C:\Program Files\MediaMonkey\Skins").
15. If MediaMonkey isn't running yet, then start it now. Test your skin by selecting it from the settings: menu Tools > Options... > Appearance > Skin > Select Skin. Choose your skin and click OK. Now you can check out all of the skin elements as they are used in MediaMonkey, and see if anything needs to be fixed or improved.

Enjoy, and good luck at making new skins. Feel free to ask any questions you might have, preferably using the skinning forum or by sending a private message to one of the skin makers out here.

--- RovingCowboy / Keith Hall

Extra notes

• File extension not shown: If you can't see the extension at the end of a file name, you first have to change the folder settings in Windows: uncheck "Hide extensions of known file types", through menu Tools > Folder options... > tab Display.
• Main program skin: MM2 vs. MM3: The main program skin format for MM3 is almost exactly the same as the skin format for MM2. The most recognisable difference between the two versions is that a MM2 skin file is named default.mskn, whereas a MM3 skin file is named Theme.mskn. Because the MediaMonkey's theme engine is backward compatible, you can rename the MM2 default.mskn file to Theme.mskn to get it working as MM3 skin.
• Readme.txt: Don't forget to add a Readme.txt file to your skin, with some information like its name, release date, author, origin/idea, ...
• Theme Editor: The theme editor is the (only) program usable to create and edit skin files.

Power tips

• Skin file vs. skin folder: MediaMonkey will read subfolders in the Skins folder in the same way as it reads the .msz files in it. This is very handy when you're creating and testing your skin, so you don't have to zip/rename constantly. Once you finished your skin, you can zip the folder and rename it to a .msz file so you can redistribute it more easily.
• Reload an edited skin: To reload a skin (e.g. if you modified it while MediaMonkey was running) you don't have to restart MediaMonkey. Just go to the options and reselect your skin (select another skin and then select your own skin again).
• .msz file association: Instead of always changing the .msz to .zip and then opening the .zip file, you can let your zip program recognize the .msz file by associating the .msz extension with it. While in Windows Explorer, right-click the .msz file and choose "Open as..." (if "Open as..." isn't available then press the Shift key while you right-click the file, or just double-click the file). In the opened dialog, select or browse to your zip program, check "Always open ..." and click OK. You should now see that the file icon of the .msz files has changed. When you now double-click such a file, it will automatically be opened in your zip program. (steps 2, 3 and 14 can be skipped now)
• .mskn file association: To be able to open/edit the skin file in the theme editor by double-clicking the file, you have to associate the .mskn file with the theme editor application, in the same way as explained in the previous power tip.