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 skinning editor to use is this one.Theme Editor 7.

Open up an existing skin

1. Make a new folder name it the name you want for your new skin. 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 same name as the new folder.
2. Place that copy of the skin and the theme engine exe file in the new folder. 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 / Extract the files from the .zip file, into your new folder then delete the ".zip" file.
   (it is no longer needed and will just confuse you.) .
4. Open up your new skin folder if not there already, 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 MediaMonkey's list view otherwise known as the explorer shell extension, the other mskn files skin what they are called.
• Player.mskn and Player.ini for the internal player
• FloatPlayer.mskn and FloatPlayer.ini for the floating player
• MicroPlayer.mskn and MicroPlayer.ini for the taskbar player
  ( you will have to copy the microplayer mskn and ini files, then rename them both the copied and the original files, rename them by use of "H" on end of name for a horizontal player, use "V" on end of name for a vertical player, same imagess are used on each you just need two of the microplayer skin.)

Export the skin's images

Note: In order to modify the images used by the skin, you have to export them first. Create a new folder inside your new skin's 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 the menu File > Open...
6. Use The 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 you might have to turn on View as images for your folders, to see them instead of the file icons. 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 seen in the theme engine before you export the image can turn pink on your exported image. either one will still represent 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.png")that will allow your image to overwrite the orginal image in the mskn file when you put yours in the file..

8. To edit the exported images, you can use any image editor that supports bitmap files. However, a more advanced image editor is recommended I suggest these. (e.g. Ulead, Adobe Photoshop, Photofiltre you can use others but I don't suggest gimp for newbies). Edit all the skin images that you want to change, and save them back on the same file name (overwriting the existing files) I would just for the first time skinning cover the exact same images you see on the main image maps. .

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 area's of the magenta / pink color on an imported image as transparent.

Do the same for all images you modified outside the theme editor, and then save the skin and close the theme editor.
11. Now you do the same for the other mskn files. The one called theme has the most images to change so it will be the toughest one. When all images and mskn files have been edited. if you did make the folders in your new skin's folder for each mskn file as suggested. You then copy all the mskn files from inside each of their folders.
    And paste them back in the new skin folder that the mskn files were first, unzipped in to which should be the folder you named for your new skin..
    this is done to make it eaiser to create the skin file later.

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. As the folder name implys you can add icons in the folder after the release of media monkey version 3. 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
(the list and the playing backgrounds can not use images in mm3 with out some trickery to get them seen so just color them this first time.)

Close and test the skin

14. Okay now this is where copying all the files back in step 11 comes in handy. So all you what changed, is changed and you got all the edited mskn files copied back in the folder of your skins name. You now just select all the images, the ini files the mskn files and the icon folder. That is in Your new skin's folder, then by using your zipping program you zip them in to one zip file.
    (Do NOT zip your new skin's folder just the files needed for the skin.)
    Change the name of the zip file to whatever name you want to call your new skin, and make it an .msz file by changing the extension from .zip to .msz
    
    example : "My great skin.zip" is changed too " My Great Skin.msz "
    
    The .msz file should be placed 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
--- re edited by Steegy redid formating and added Extra Notes And Tips
--- re edited by Rovingcowboy / Keith hall, fixed typos re added left out steps,
corrected wrong information, added some examples.

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 the 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. Do not zip the new skins folder up. There is no need for all the folders and images you used in making the new skin be in the skin file, just the images and files you seen when you first unzipped the mm 3 royal blue skin, which is what is said in step 14. The reason is simple as in this example
  
  folder zipped as skin file = 1.4 mbs
  same skin only files zipped = 789kb's
  
  now that is not exact numbers but that shows what happens with unneeded files in the skin's zip file.
• 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.