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!!