JUNE 17, 2005 - Version 8.0

The PC Jukebox - How To Create A Skin

The PC Jukebox supports skins! This file will provide a fairly detailed explanation of how to create and/or edit skins for The PC Jukebox.

1 sample skin is included with version 6.0 and beyond. Additional skins can be downloaded from www.thepcjukebox.com. It is NOT necessary to create new skins or edit the sample skin. This file is intended for those who wish to be a little more creative.

Skin Elements

Creating A New Skin

Editing An Existing Skin

Deleting An Existing Skin

Summary

Skin Elements (return to top)

There are four main graphical elements that comprise a skin for The PC Jukebox. These include:

1. The Logo Image - the logo image that appears at the top of every screen.

2. The Background Image - the image that is displayed on the background of every screen.

3. The Default Background Color/Texture For Buttons - a texture graphic that is used as the background for all of the rectangular and circular buttons.

4. The Scrollbar Letter Graphics - the individual letter bitmaps that appear on the scrollbars, both as it is being scrolled and while it is at rest.

Each of these elements MUST be included to complete a skin.

1. The Logo Image

This file must be in .gif format. The file should be 500 x 75 to fit properly at the top of the screen. This is an update from version 5.1 where the logos were 600 x 75.

2. The Background Image

This file must be in .jpg format. This file should be of the same dimensions as the intended screen resolution (1024x768 or 800x600) to fully cover the screen.

3. The Default Background Color/Texture For Buttons

This file must be in .bmp format. There are no limitations to the size of this file as it will be stretched either way to fit on the buttons.

4. The Scrollbar Letter Graphics

These files must be of .bmp type. They should measure 80 x 80 to fit on the scrollbar perfectly.

Creating A New Skin (return to top)

To create a new skin, you will first need to put all of the required graphical image files into one folder. The details of the required files will follow. Once you have all of the files in a single folder, you can start up The PC Jukebox to put your skin into action.

Required Files

The following is a list and description of all of the necessary files to create a skin. If any of these files is missing you will receive an error when attempting to save the skin from inside the program.

Logo File

You can select any .gif file for your logo. This image should not be any larger than 500 x 75 to fit well at the top of each screen. The name of the file must 'Logo.gif' for The PC Jukebox to be able to find it and display it.

New for Version 8.0 – Animated (.gif) Logo Files Are Supported!

The Animated Logo file should also measure 500x75. The name of the file must 'LogoAni.gif' for The PC Jukebox to be able to find it and display it.

Now here is the tricky part…the animated .gif logo should NOT have a transparent background. Instead, you need to copy a section of your background.jpg file and make this the background for your animated logo. To do this, you will want to open up your background.jpg file in any basic graphic editing program such as Microsoft Paint. Then, highlight the portion of the image that starts at pixel 256, 4 and drag until you have a rectangle that measures 500x75. Cut or copy this rectangle and paste it into a new file. This will be the background for your animated logo. You can then create your animated logo and when it is displayed in The PC Jukebox, it will appear as if it actually does have a transparent background.

Background File

You can select any .jpg file for your background. This image should measure 1024x768, or 800x600 to make sure the screens are completely skinned. The file must be named 'Background.jpg' for The PC Jukebox to be able to find it and display it.

New in Version 8.0 – Background2.jpg and Background3.jpg

Due to the added graphical complexities in Version 8.0, 2 more background graphic files are necessary to complete a skin. Fortunately they are quite easy to create. To create these files, you will want to open up your Background.jpg file in any basic graphic editing program such as Microsoft Paint. Find the pixel located at point 136, 88. Then drag and highlight the rest of the background graphic all the way to lower right hand corner. Finally, cut or copy the highlighted region, create a new .jpg file, paste the contents of the clipboard and save the file as Background2.jpg. The final size of the new graphic should measure 888x680.

To create Background3.jpg, again open Background.jpg file in any basic graphic editing program such as Microsoft Paint. Starting at the very lower left hand corner of the graphic, drag a rectangle up and to the right until it measures 1024x102. Cut or copy this highlighted rectangle, create a new .jpg file, paste the contents of the clipboard and save the file as Background3.jpg. Again, the final size of this graphic should be 1024x102.

Button Texture/Color

You can select any .bmp file for this texture. This image can also measure any size as it will be stretched either way to fit on the buttons. This file must be named 'ButtonTextureRectangle.bmp' for The PC Jukebox to be able to find it and display it.

Scrollbar Letter Graphics

These are the letters and numbers that appear on the right side scrollbars as they move up and down. You will notice that these files are actually squares even though the images appear as circles on the scrollbar. The four corners of the square should have an identical color. For best results, the Scrollbar/Volume color should be set to the same color as the corners of the graphics. Otherwise, the graphics will appear as squares, not circles. By choosing the same color for the Scrollbars/Volume controls, the backgrounds of the graphics will blend in with the scrollbars and the letter graphics will appear as circles. Ideally, these images should measure 80x80.

You will need to include 2 graphic files for each letter A-Z and each number 0-9. These files must all be in .bmp format. The names of the files must correspond to the letter they represent, i.e. the ‘A’ graphic must be named A.bmp, the B graphic named B.bmp, and so on. These are the graphics that are shown when the scrollbar is at rest. The second file for each letter will be displayed as the scrollbar is moving. Each of these graphics must be named after the letter they represent, with an ‘_pr’ attached, i.e. the A graphic must be named ‘A_pr.bmp, the B graphic named ‘B_pr.bmp, and so on.

So, you will need to have the following 72 files for the scrollbar:

A.bmp A_pr.bmp 0.bmp 0_pr.bmp

B.bmp B_pr.bmp 1.bmp 1_pr.bmp

C.bmp C_pr.bmp 2.bmp 2_pr.bmp

D.bmp D_pr.bmp 3.bmp 3_pr.bmp

E.bmp E_pr.bmp 4.bmp 4_pr.bmp

F.bmp F_pr.bmp 5.bmp 5_pr.bmp

G.bmp G_pr.bmp 6.bmp 6_pr.bmp

H.bmp H_pr.bmp 7.bmp 7_pr.bmp

I.bmp I_pr.bmp 8.bmp 8_pr.bmp

J.bmp J_pr.bmp 9.bmp 9_pr.bmp

K.bmp K_pr.bmp

L.bmp L_pr.bmp

M.bmp M_pr.bmp

N.bmp N_pr.bmp

O.bmp O_pr.bmp

P.bmp P_pr.bmp

Q.bmp Q_pr.bmp

R.bmp R_pr.bmp

S.bmp S_pr.bmp

T.bmp T_pr.bmp

U.bmp U_pr.bmp

V.bmp V_pr.bmp

W.bmp W_pr.bmp

X.bmp X_pr.bmp

Y.bmp Y_pr.bmp

Z.bmp Z_pr.bmp

Furthermore, you will need to provide 2 images for the scrollbar that will display when none of the above graphics is appropriate (i.e. the CD name starts with a piece of punctuation). These files need to named ‘Button.bmp’ and ‘Button_pr.bmp’ respectively.

New in Version 8.0 – Decade Buttons

Because Version 8.0 now supports scrolling by Decades, some new button graphics have been added. You can start with any decade you would like, but as a default, the Classic Skin (and any other skin you download from www.thepcjukebox.com) includes the following files (as well as their _pr.bmp partners):

1900’s.bmp

1910’s.bmp

1920’s.bmp

1930’s.bmp

1940’s.bmp

1950’s.bmp

1960’s.bmp

1970’s.bmp

1980’s.bmp

1990’s.bmp

2000’s.bmp

2010’s.bmp

Equalizer Slider Graphics

To make the Equalizer blend into the background, the sliders need to be masked with graphics. These graphics need to named ‘EQ1.jpg’, ‘EQ2.jpg’, … through ‘EQ9.jpg’ Each of these graphics should measure 30x350. To properly create these graphics, it is easiest to load your current background into Microsoft paint. Then, cut each of these slider graphics out of the background and save them as their own images. For a 1024x768 background, you can use the following table to identify the upper left corner of each slider graphic, keeping in mind that each graphic should be 30 pixels wide by 350 pixels tall:

Name Upper Left Hand Pixel Location

EQ1.bmp 289,132

EQ2.bmp 348,132

EQ3.bmp 407,132

EQ4.bmp 466,132

EQ5.bmp 525,132

EQ6.bmp 584,132

EQ7.bmp 643,132

EQ8.bmp 702,132

EQ9.bmp 761,132

Slider Background

The Volume and Song Progress sliders also need background images. Fortunately, they can share one file. The file must be named ‘SliderBackground.jpg’ and it should measure 462 pixels wide by 21 pixels tall, for best results. You can cut this graphic from anywhere in your background image.

CD Cover Frames

There are four different graphics that are used as the frames around each of CD covers. Their names and descriptions are as follows:

Name Size Description

AlbumFrameTextureNew.bmp 181x206 Frames at rest on CD Cover screens

AlbumFrameTextureNew2.bmp 181x206 Frames when mouse over on CD Cover screens

AlbumFrameTextureNew3.bmp 181x206 Frames when mouse clicked on CD Cover screens

AlbumFrameTextureNewSq.bmp 181x181 Frame used on all other screens (Now Playing, Lyrics, …)

So, in all, there need to be 118 graphic files in the folder before the skin can be created successfully.

The PC Jukebox includes a small utility to facilitate in the creation of skins. This utility can be accessed by clicking the 'Skins' entry in the left-hand list of the Options screen in The PC Jukebox. Then click on the 'Create New Skin' button to start the utility.

1. Name Your Skin

You will first be asked to provide a name for your new skin. Enter the name and click 'OK'. A series of controls will be displayed allowing you identify where each of the elements of your new skin are located. Providing you do not click 'Cancel', a new folder will be created for you. This folder will have the name you selected for your skin and will be located in the 'Skins' folder under the folder where you installed The PC Jukebox.

2. Set the Scrollbar/Queue/History Color

The Scrollbar/Queue/History color should be set to the same color as the four corners of the Scrollbar letter graphics. This color will be used as the background for the scrollbars, the Queue listing, the History listing and various other items for consistency

3. Specify Default Font

The first item on the Skin Configurator form is the Default Font. This is the font that will be used on all dynamic text throughout the program when this skin is applied. Be advised that dynamic text is any text that can change, i.e. the currently playing song title, the album name, the elapsed time of the song, etc... Most of the text in the program is dynamic, but there is some that is not. Also, keep in mind that this is simply the DEFAULT font. The font of any individual piece of text in the program can be changed by right clicking on it. Once a new font is selected for any individual item, it is saved with the skin and will be applied any time that skin is selected.

4. Specifiy The Folder Where Your Graphic Files Are Located

Browse to the path of the folder where your 118 graphic files are located (see above). The PC Jukebox will need to have this information to successfully create the skin.

5. Final Steps

The final elements of the skin do not need to be specified on the form because they will be supplied automatically. All of these files will be copied from the 'Classic' skin folder. Because each of these files are fairly time consuming to create, it was decided that these defaults would be copied in. However, once they are copied, they can easily be modified, or even replaced, if the user chooses to.

The Button Graphics files that are copied are:

Back.bmp

ClearQueue.bmp

Minimize.bmp

Mute.bmp

NextSong.bmp

NextSongSmall.bmp

OFF.bmp

ON.bmp

PageDown.bmp

PageDownSmall.bmp

PageLeft.bmp

PageRight.bmp

PageUp.bmp

PageUpSmall.bmp

Pause.bmp

PauseSmall.bmp

Play.bmp

PlaySmall.bmp

QueueDown.bmp

QueueUp.bmp

RemoveSong.bmp

RestartSong.bmp

RestartSmall.bmp

Top20.gif (animated)

NowPlaying.gif (animated)

Most, but not all, of these files also has a companion file that is copied, with a '2' appended to its name, i.e. ClearQueue2.bmp. These files are used to change the text color when the user hovers over a button with the cursor, or clicks a button. Be advised that the background color of these files is irrelevant, as the background texture will be provided by the ButtonTextureRectangle.bmp graphic file, discussed above. You can edit each of these files to change the font and text color if you wish, using a simple program like Microsoft Paint. Just be sure to save each file with its original name and a .bmp extension.

6. Save Your Skin!

Once all of your elements have been selected, you can click the 'Save New Skin' button to start copying all of the files. If all goes well, you will see a message box stating that your new skin was successfully created. The new skin name will now appear in the dropdown list on the setup screen, and will be selected by default. You can now click the ‘Apply Changes' button to save these settings and see your skin in action.

Editing An Existing Skin (return to top)

If you would like to change any of the elements of your new skin (or any existing one), you will simply need to replace the desired graphic in the particular skin’s folder. These folders are located under the main application’s folder, usually at C:\Program Files\The PC Jukebox\Skins\... Once you have replaced the graphic file you wish to change, just start The PC Jukebox again and you will see your new edits in action.

Deleting An Existing Skin (return to top)

You can completely delete any skin (with the exception of the 'Classic' skin) by selecting the 'Skins' item from the left-hand list on the initial start up screen, selecting the skin from the dropdown list, and clicking 'Delete Selected Skin'. Please be advised that this action cannot be undone so please use this functionality carefully.

Summary (return to top)

This file makes it seem that creating skins is fairly labor intensive, but that really is not the case. Once you experiment with editing an existing skin, you will probably feel much more comfortable creating new ones. A few extra backgrounds, logos, and textures have been included with the program. You can find them in their corresponding folders underneath the folder that The PC Jukebox was installed to (C:\Program Files\The PC Jukebox, by default).

If you have questions at any time concerning skins, or any other aspect of The PC Jukebox, please visit http://www.thepcjukebox.com, click on the 'Contact Us' button and feel free to submit your question via email.

Cheers!!