Customizing the Look of MediaMonkey =================================== Version 1, 7/14/2004 Introduction ------------ For those who are graphically inclined, MediaMonkey offers a fair amount of flexibility to customize the look of the applicaion. This document describes what can be customized, and how to go about customizing MediaMonkey. The UI elements that can be modified are: 1) Icons within the application 2) The skin of the player component and the font of the text within 3) Background images for various panels 4) The entire Theme of the application (i.e. the look of buttons, borders, status bars, title bars, fonts, etc.) 1) Customizing Icons -------------------- The standard icons used in MediaMonkey can be switched for whatever icons you prefer. To do this: i) Download all icons via http://www.mediamonkey.com/contrib/artwork/icons.zip ii) Extract the icons from the .zip file to \Program Files\MediaMonkey\Icons\ iii) To customize the icons, just edit any of the icons in the \Icons\ directory, and restart MediaMonkey. The new icons will appear. 2) Customizing the Player ------------------------- The 'player' component of the UI consists of a standard Winamp2 style skin of the form xxx.wsz. To add a player skin: i) Download a Winamp2 compatible skin (a good source of Winamp 2 skins is at http://classic.winamp.com/skins/ ) ii) If the skin is called xxx.zip, rename it xxx.wsz iii) Optional: If you wish to edit the skin (i.e. making changes to the files contained in the xxx.wsz archive, you can simply extract xxx.wsz to \Program Files\MediaMonkey\Skins\XXX\ and make changes to the individual skin elements directly within the directory--this is far easier than having to repeatedly archive files after each edit. iv) If you aren't making any edits, simply copy it to \Program Files\MediaMonkey\Skins v) Run MediaMonkey and go to the Skins option menu. The new skins from iii) or iv) will appear in the list. Select it to make it active. To customize the fonts that appear in the player, a fonts.ini file needs to be included within the xxx.wsz file (or within the \Program Files\MediaMonkey\Skins\XXX\ directory if the skin is being saved to a directory instead of an archive). You can observe the format of the fonts.ini file in the bluemonkey.wsz zip archive (see below). It includes 2 sections: [PlayerTitleFont] Name=MS Shell Dlg 2 Size=8 Color=00000000 [PlayerCaptionFont] Name=MS Shell Dlg 2 Style=1 Size=8 Color=00000000 OffsetX=5 OffsetY=3 PlayerTitleFont controls the font of the text that appears in the Player title bar. PlayerCaptionFont controls the font of the text used within the player to display song title/time. You can modify the fonts, their size, color (standard www colors), and in the case of the PlayerCaptionFont, an offset to adjust the positioning of the text. 3) Customizing Background Images The background images that appear in the Now Playing, Tracklist, or Tree are stored within the xxx.wsz archive as sdb_background_playing.bmp, sdb_background_list.bmp, and sdb_background_tree.bmp respectively. To customize: i) Find a bitmap file (yyy.bmp) that you like, and rename it to one of the above 3 filenames ii) Save it to the xxx.wsz archive (or to the \Program Files\MediaMonkey\Skins\XXX\ directory if you're working within a directory instead of an archive). iii) Restart MediaMonkey for the changes to take effect 4) Customizing the MediaMonkey Theme The MediaMonkey Theme is what controls the overall look and feel of most aspects of the application (e.g. the titlebar, the buttons, the status bar, tabs, checkboxes, etc.). The theme is controlled by Theme.mskn which contains graphical elements and mappings of these elements to various UI objects. To edit the theme: i) Download the KSdev theme editor from http://www.mediamonkey.com/contrib/artwork/themeeditor.exe and save it to a directory ii) Extract BlueMonkey.wsz to \Program Files\MediaMonkey\Skins\Test iii) Run the Theme Editor and load Theme.mskn from this directory into the theme editor and edit it in one of 2 ways: a) If you have graphic expertise, but don't want to get into the details of configuring the size of buttons, their behaviour, setting margins, etc. the simplest approach is to create a new theme based on the graphics of an existing theme: -Click File|Export Bitmaps and then edit the images, while making certain to maintain their exact dimensions -Click the Images node in the ThemeEditor tree, select individual images and click 'Replace' to replace them with the newly edited images -After replacing all the images, resave the .mskn file -Switch to the skin entitled 'Test' to see how the changes look b) If you want much greater control and flexibility to control all aspects of a theme, you can create a new theme based on an existing one, but in addition to changing graphics images, you can also change various additional characteristics of the theme (e.g. fonts) by editing the properties of various objects that appear in the MediaMonkey UI. Instructions on the use of Theme Editor is beyond the scope of this document--the best approach to take is by editing the properties of various objects in the tree and then saving the theme file and testing out the Skin containing the new theme file by switching to it in MediaMonkey. If you decide to take this approach be aware that the following objects are used in the MediaMonkey UI: Form - This defines the MediaMonkey frame, and buttons within the title bar - Form\Caption\Title\fonts MenuBar - Only the ToolbarItem is used Popup Menu - This defines the look of menus CheckBox - Defines the look/behaviour of checkboxes RadioButton - Defines the look/behaviour of radio buttons ScrollBar - Defines the look/behaviour of scrollbars Button - Defines the look/behaviour of OK/Cancel/Other buttons that appear within dialogs SpeedButton - Defines the look/behaviour of buttons on the toolbar GroupBox - Defines the group boxes that are used in some dialogs such as encoder selection dialog ProgressBar - Defines the look of progress bar that's used to indicate status. Currently only the horizontal one is used. TrackBar - Defines the look of the sliders/tracks used for the equalizer Listbox - Defines the look of listboxes (e.g. the Scan Folders dialog, tracklist) - ListBox\Item\ActiveBitmap - for selected item background - Fonts\ListItemTextNormal - for normal text - Fonts\ListItemTextHot - for 'hot' text - Fonts\ListItemTextSelected - for selected text - ListBox\ItemAdv\ActiveBitmap - for unfocused selected text background - ListBox\ItemAdv\ActiveFont - for unfocused control selected text font - Colors\ListBox\Body - used to set default background colour Combobox - Defines the look of combo boxes SpinButton - Used for Up/Down arrows Panel - Used for docked dialogs Tabs - Used for TabSheets ControlBar - Used to control the look of toolbars Toolbar - Used to control the look of toolbar backgrounds Header - Used to control the headers in lists - Header\Section\Font StatusBar - Controls the look of the status bar Scrollbox - ?? ToolWindow - Controls the look of mini dialog frames (e.g. Equalizer, Album Browser) - \ToolWindows\Caption\Title\font Container - Used for some backgrounds Splitter - Divides up the toolbar Also keep in mind the following hints: -MediaMonkey has a default theme of Default.mskn that's used if a xxx.wsz archive doesn't contain a skin file. You can edit this if you like. -Minimize single-pixel transparency in bitmaps to avoid performance hits -ThemeEditor has a bug which sometimes causes the bottom right pixel in an image to become transparent. To avoid this, add an extra pixel of padding to the right of the image, but don't use the rightmost column of pixels in your objects. -All fonts in the fonts node should be set to 'Arial' to ensure correct functionality in unicode environments -For Font properties other that in 'Fonts' node (like ListBox\ItemAdv\ActiveFont). They allow to use 'MS Shell Dlg 2' font and thus it should be used when needed (such occasions are appear in the above list) -- the trick with 'Arial' font isn't used there). -Before finalizing your theme, make sure to test it at different DPI settings -Try to minimized the use of margins in your objects as they decrease performance