Fast Newbie's Skinning Walkthrough for MM 3: Difference between revisions

From MediaMonkey Wiki
Jump to navigation Jump to search
m (added some bolding)
(Update of the previous major edit)
Line 1: Line 1:
'''Roving Cowboy's Fast Newbies Checklist Style Walkthrough to start skinning in mm3'''
__NOTOC__
''Tutorial written by Roving Cowboy.''


The theme editor is an program made to edit skin files and make new ones.


the version to use now is the found at a link in this post by steegy.  
This tutorial will guide you through some basic steps to get you started with skinning for MediaMonkey v3. The used skin editor is [http://www.mediamonkey.com/contrib/artwork/themeeditor7.exe Theme Editor 7].


http://www.mediamonkey.com/forum/viewtopic.php?p=70332#70332
====Open up an existing skin====
<ol start="1">
<li>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.</li>
<li>Change the extension from ''.msz'' to ''.zip'' so that you can open the file (actually a normal zip file) with an installed zip program.</li>
<li>Unzip the ''.zip'' file, preferably as subfolder of the folder where the ''.zip'' file is located. Then delete the
''.zip'' file.</li>
<li>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:</li>
*''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)
</ol>


click that link it goes to the post then just click on the link steegy gave.  
====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.
<ol start="5">
<li>Start the theme editor and load the chosen ''.mskn'' file through <code>menu File > Open...</code></li>
<li>Use <code>menu File > Export Bitmaps...</code> to export the skin's image resources to the folder you created for the ''.mskn'' file (see note above).</li>
<li>Open up this folder and take a look at the images. Usually you'll see either one big skin image (e.g. [[:Image:Skin_layout_guide.jpg|annotated example]]) or a lot of small ones (usually one per control), together with some background images. The <span style="color: magenta;">magenta</span> 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.<span style="color: navy;">bmp</span>''" to "''myimage.<span style="color: navy;">bmp</span>''").</li>
<li>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. [http://www.getpaint.net/index2.html Paint.Net], [http://www.adobe.com/nl/products/photoshop/photoshop/ Adobe Photoshop], [http://www.wingimp.org 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).</li>
</ol>


'''This is of course bare minimun in details if you need more read Mortens how to skin article.'''
====Replace the skin's images with the modified ones====
<ol start="9">
<li>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.</li>
<li>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.</li>
:'''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 <span style="color: magenta;">magenta</span> color on an imported image as transparent.
<li>Do the same for all images you modified outside the theme editor, and then save the skin and close the theme editor.</li>
</ol>


'''Now to learning how to make a skin with this step by step.'''  
====Other skin files to include====
<ol start="12">
<li>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.</li>
<li>You can also change the background images for the various panes in MediaMonkey:</li>
*''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
</ol>


'''1.''' make a copy of the default skin royal blue.msz
====Close and test the skin====
<ol start="14">
<li>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").</li>
<li>If MediaMonkey isn't running yet, then start it now. Test your skin by selecting it from the settings: <code>menu Tools > Options... > Appearance > Skin > Select Skin</code>. 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.</li>
</ol>


'''2.''' place that copy of the skin in a new folder with the them engine.


'''3.''' change the name of the copy of the skin file from .msz to .zip


'''4.''' unzip the file in to that same folder it is in.


'''5.''' then just look for the mskn files if you see one that says default in the folder after you unzipped the royal blue skin you can delete that default one but only from that new folder you just made.  
''Enjoy, and good luck at making new skins. Feel free to ask any questions you might have, preferably using the [http://www.mediamonkey.com/forum/viewforum.php?f=9 skinning forum] or by sending a private message to one of the skin makers out here.''
you need to look for the .mskn files those are the ones that are opened
and worked on by the theme engine.  


'''6.''' find all the mskn files you then should make a folder for each mskn file in the skin just to keep the images separated. then copy or move the mskn file for the name of the folder you made for it. in to that folder.
--- [[User:Rovingcowboy|RovingCowboy / Keith Hall]]


'''7.''' you will have to copy the micro player mskn and ini files then rename them both the copy's and the original one. they should be named micorplayerH.mskn and microplayerH.ini and micorplayerV.ini and micorplayerV.mskn.
they are both the same player just one is vertical and the other is horizontal.


'''8.''' you need to once you get all the mskn files copied and or moved in to their own folder, it is time to get the theme engine in to use. start the theme engine up and use its open button to browse to the folder for the
first one you want to change images on. then open that folder's mskn file.


'''9.''' now look at the engines menu bar. click on the word file or edit. you need to find the words export bmp's click on that export bmps.
on that panel make sure it will export them in to the folder that mskn file is in. then click on export. then close out and exit the theme engine for now.


'''10.''' now go in to that folder and look around at the images.
===Extra notes===
you will see a couple big images with lots of pink on. that is the skin or part of it. you need to open that image with your image editing program like picture it. but first check the format of the images. for some reason when i export the images from the skin's mskn file the engine adds an extra set of format letters? remove the last set so it looks like '''[http://www.mediamonkey.com/wiki/index.php/Image:Skin_layout_guide.jpg themeskinimage.png]''' and not like .png.bmp
<ul>
once you open the image in your photo editor go to work scanning the images on the makin / working image there are some places you can cover the pink but not all places. just for the first time cover the exact same images
<li>'''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 <code>menu Tools > Folder options... > tab Display</code>.</li>
you see on the main image map.
<li>'''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.</li>
<li>'''''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, ... </li>
<li>'''Theme Editor:''' The [http://www.mediamonkey.com/contrib/artwork/themeeditor7.exe theme editor] is the (only) program usable to create and edit skin files.</li>
</ul>


'''11.''' do that with all the images and reopen the mskn file with the theme engine editor this time click on the plus sign by the word images.
it will show you a list of images in the mskn file. and 3 buttons. click on the name of an image and then on the replace image button then browse to the same image name that you changed and put that in the mskn file it will be used now. so do that to all the images that were in that mskn file that you changed.


'''12.''' now 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.
===Power tips===
 
<ul>
'''13.''' when all images are changed and replaced in their respective mskn files. you then if the mskn files are in separate folders. copy all the mskn files and paste them back in the main folder that they were originally unzipped in .
<li>'''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.
 
</li>
'''14.''' now you see the icon folder. that is only usable for the no album art image. you can open that image up and change it if you want too.  
<li>'''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).</li>
 
<li>'''''.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)</li>
'''15.''' now every image that was unzipped in to the folder like the sel.png and the sdb list background images? change them to what you want.
<li>'''''.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.</li>
only the long thin ones cant be changed in size and no image will work on them with out some trickery so just change their colors for the first attempt at skinning.  
</ul>
 
'''16.''' okay now all is changed and all the mskn files are back in the folder with each other. now just select all the images and ini and mskn files and the icon folder. use your zipping program and zip them in to one zip file.
change the name of the zip file to what ever name you want to call your new skin and make it an .msz file.  
 
'''17.''' now copy that msz skin file you just made. take it to the program folder you made for the mm3 alpha test version. then in that folder you will see a skins folder go in to that skins folder and paste that new skin you made in there.
 
Now when you go and open mm3 you can go to the menu bar click on tools go to the options link click the link when the panel shows up you just scroll the tree down to see the directory for skins. click on skins and you will see the choices of skins you have on the right select the name of the skin you just made and monkey will change to use it then click okay.  
 
Now check out all the stuff and see if anything needs fixed in your new skin.  
 
The media monkey 2.5.5 skins are made the same way only there is no image map and they are a combination of winamp classic skins and a theme .mskn skin. you unzip that wsz file by changing it to zip just like the mm3 skins only when you unzip it you will see all the winamp images that you need to change in your image editor.  
and an mskn file you use the theme engine on that file tool only there is tons of images in it since there is no image map.
 
'''mm 2.5.5''' skins take me about 15 to 20 hours to make i can get the mm3 skins done in about 4 to 6 hours depending on how much i change.  
 
Enjoy and good luck on making new skins.
any questions ask away lots here can answer.  
Hope to see new skins shortly glad your willing to make some
 
[[User:Rovingcowboy]] keith hall

Revision as of 17:30, 17 April 2007

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.
  1. Start the theme editor and load the chosen .mskn file through menu File > Open...
  2. Use menu File > Export Bitmaps... to export the skin's image resources to the folder you created for the .mskn file (see note above).
  3. 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").
  4. 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

  1. 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.
  2. 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.
    3. 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, and then save the skin and close the theme editor.

Other skin files to include

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

Close and test the skin

  1. 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").
  2. 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.
Retrieved from "https://www.mediamonkey.com/wiki/index.php?title=Fast_Newbie%27s_Skinning_Walkthrough_for_MM_3&oldid=2529"