Fast Newbie's Skinning Walkthrough for MM 3

Tutorial written by Roving Cowboy.

The theme editor is the (only) program used to create and edit skin files. The following tutorial will show you some basic steps to get you started with skinning for MediaMonkey v3.

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 place it in an easliy accessible location.
2. Change the extension of the copy from .msz to .zip.

   Note: If you can't see the extension at the end of the file name, you might first have to change the folder settings in Windows: uncheck "Hide extensions of known file types", through menu Tools > Folder options... > tab Display.

3. Unzip the .zip file, e.g. as subfolder of the folder where the .zip file is in.
4. Open up the unzipped folder and look for the .mskn files. These are the files that can be opened and edited by the theme editor. The one named Theme.mskn is the skin file that specifies the skinning of the main MediaMonkey program (not the player). If there is a default.mskn file present (from an older v2 skin), you can rename it to Theme.mskn or delete it (if you already have a Theme.mskn file).
5. A good advise is to make an empty subfolder for each .mskn file you have. In the next section you will export the source images for the .mskn file you want to edit, so it's best to keep these source images separated from the other skin's images.
6. Next to the Theme.mskn (main program) skin file, there are also the player skin 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)

   These different player skins are similar, so to start you can create them all out of a base file, like the Player.mskn file you start with.

Export the skin's images

1. When you're ready to start editing, start the theme editor and load the .mskn file you want (located in the directory where you unzipped the files) through menu File > Open...

   Note: It's best to work on and complete one .mskn file at a time. That way, you can work more efficiently and you'll be able to use a completed .mskn file as base for another one.

2. In order to modify the images used by the skin, you first have to export them. For that, use menu File > Export Bitmaps... This will export all image resources used in that skin as bitmaps. You can put these bitmaps in the folder you created specially for each .mskn file.
3. Go to the folder where you exported the bitmaps to and take a look at the images. Usually you'll see either one big image (annotated example), or a lot of small ones. The magenta color on the images represents the transparent parts of the image. You might want to change the file names of the images first, as the theme editor adds .bmp to the complete file name without removing the previous extension first (e.g. it creates "myimage.png.bmp" instead of "myimage.bmp").

   Note: For the moment, you won't need theme editor anymore. You can minimize or close it.

4. To modify the exported images, you can use any image editor that supports bitmap files. Even MsPaint supports this, but a more advanced image editor (e.g. Paint.Net, Adobe Photoshop, WinGIMP, Corel Painter, ...) is recommended.
5. Modify all the skin's images that you want to change, and save them on the same file name.

Replace the skin's images with the modified ones

1. Once the images have been edited, reopen the .mskn file (in case you closed the theme editor, otherwise just make it visible again). In the theme editor's theme tree, click the + sign in front of "images". It will show you a list of all the images in the .mskn file on the left, and 3 buttons (Add Image..., Delete Image, Replace Image...) in the middle. Click on the name of an image that you want to replace with the modified version.
2. To replace the image, click on the "Replace Image..." button. Then click "Load bitmap..." and browse to the modified image and click Open and then 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.

3. Do the same for all images you modified outside the theme editor.
4. When all needed images in the .mskn file(s) are changed and replaced, you then copy the .mskn file(s) to the main folder where you originally unzipped them.

Other skin files to include

1. In the main folder, you can also create an "Icons" folder (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 there that will replace the respective original MediaMonkey program icons.
2. 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

   Resizing the images (certainly the 'list' and 'playing' one) can be tricky, so for now it's best to stick with the size and only change the image itself.

3. Now everything is changed and all skin files (the .mskn and .ini files, the Icons folder and the background images) are present. Select all those files/folders and zip them back to a .zip file (e.g. "MyNewSkin.zip"). Then rename the .zip extension to .msz.

   Note: Don't forget to add a Readme.txt file too, with some information about the script like it's name, release date, author, origin/idea, ...

4. Copy/move .msz skin file to MediaMonkey's skins folder (usually "C:\Program Files\MediaMonkey\Skins") to complete adding the new/modified skin to MediaMonkey.

   Note: MediaMonkey will read subfolders in the Skins folder in the same way as it reads the .msz files. So while you're creating and testing your skin, you can put all the skin files in a subfolder of MediaMonkey's Skins folder (with the skin's name as folder name), without having to zip/rename constantly. Once you completely finished the skin, you can zip the folder and rename it to a .msz file.

Test the skin in MediaMonkey

• If MediaMonkey isn't running yet, then start it now. You can test your skin in real-life by selecting your skin from MediaMonkey's settings: menu Tools > Options... > Appearance > Skin > Select Skin. Choose your skin and click OK.

  Note: 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 where you can select the skins and reselect your skin (select another skin and then select your skin again).

• 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 on 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