Creating and Applying Custom Skins

Unfortunately creating a custom skin for Ultimate Jukebox is not an easy task. The skin is made up of around 100 different bitmap images. The best way to learn about skins is to export the default skin and edit the bitmaps (Windows BMP files) that it creates. This way you can find out where all the bitmaps are displayed on the screen.

To enable color changing, bitmaps should be created around a base color of grey 128 (html/rgb color #808080). Lighter shades of grey will lighten the applied color, darker shades of grey will darken the applied color. If you don't want color to be applied to any or all of a particular bitmap, then you can use regular color values. If you do want to use a grey color that won't have it's color changed, then simply modify one of the Red, Green or Blue values by 1. For example, if you wanted to use RGB #808080 then use RGB #808081 instead.

There are 4 components used to make up the main window of Ultimate Jukebox -- they're called : Ultimate Button (ubtn), Ultimate Multi Button (umbtn), Ultimate Panel (upnl) and Ultimate Scrollbar (usb).

Ultimate Button : The buttons are made up from either 3 or 5 images all side by side in one BMP file. Three for a normal button - in, out and mask (mask is used to determine the clickable part of the button as well as what part is the button and what part is the outer panel - for color changing, it's just pure white where the button is). Five for a check button - in, out, in checked, out checked and mask.

Ultimate Multi Button : The multibutton is only used for the Control Buttons (Play, Stop etc) so that you can create a set of non rectangular buttons. The button image consists of 4 images side by side in one bitmap file - all out, all in, all_out_checked and a mask. For the mask, you must use 4 colors - 1 for each of the buttons - these are used to determine which button is being clicked and also to make it possible to display only one button clicked at a time.

• Purple (RGB #FF00FF) : Play Button
• Green (RGB #00FF00) : Pause Button
• Blue (RGB #0000FF) : Next/Skip Button
• Stop (RGB #FF0000) : Stop Button

You must not use Full Black (RGB #000000), Full White (RGB #FFFFFF) or any of the button colors in this bitmap.

Ultimate Panel : The panel component is quite complex. It contains up to 9 separate bitmaps. These are required to make them scalable so that you can have a bitmap for each corner, then one for each of the sides. The left and right sides can then stretch up and down (tiling), and the top and bottom can stretch left and right. The middle bitmap is tiled left to right, top to bottom to fill the rest of the panel. If not all of the bitmaps are used, then other results can be achieved. The title bar at the top of the main window is made up of a top-left bitmap which is the "Ultimate Jukebox " title, the top middle bitmap and top right bitmaps are just blocks of #808080, but you can play with this to come up with interesting effects. The height of the panel is the same as the height of all 3 bitmaps, so no more are required.
Ultimate Scrollbar : The scrollbars are 3 buttons and a panel all blended into one component. You will need to create 3 image button bitmaps for the Up/Left, Down/Right and Thumb Scroll buttons. You will also need to create a single background (up/down or left/right tiling) bitmap for the background of the scrollbars.

Images that you create do not have to be the same size as those in the default skin. To change the size of components on the screen just make the bitmap images larger or smaller.

Choose Settings::Skins, then click the Skins tab to display the Skins window.

To export the default (or current) skin, type a name in "Export To" and click "Export Skin". Ultimate Jukebox skins are based on a folder on your disk drive - all images used to create the skin and the skin file (skin.usk) are stored in this folder. The folders are stored under ...Program Files\Ultimate Jukebox \Skins\[Skin Name]. You can edit the skin.usk file with any text editor. The skin definition file contains settings for all Fonts, Colors and Images.

The easiest way to create a skin is to export the default skin to a new skin name and then edit the image and skin definition files. Images for buttons are prefixed with "ubtn", multi buttons are "umbtn", panels "upnl", and scrollbars "usb".