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