Step by Step Custom Skin Example - PDAClassic + Pause Button

The Custom Skin Requirements

"I want a skin just like PDAClassic but I want to be able to pause and un-pause the currently playing track."

The PDAClassic skin does not have a pause button.  If a track is half way through and you press the Stop button it goes back to the start of the track.  However, several people have emailed in saying they want to be able to pause it.  In this example, we are going to add a Pause link to the page.  It wont be part of the controls image used currently (as this would complicate our simple example).

Step by Step Instructions to create the Custom Skin

A.  Create a copy of the PDAClassic Skin to work from

  1. Open Windows Explorer and browse to the PlayerPal Skins folder.  This is located as follows:

    C:\Program Files\PlayerPal\PlayerPal 4.2\WebSite\Skins Note: you may need to change this to match your installation directory
  2. Copy the folder named PDAClassic and Paste it back in the Skins Folder
  3. Rename the new folder from "Copy of PDAClassic" to "MyPDAClassic"
  4. Open PlayerPal in your web browser
  5. Does MyPDAClassic appear in the skin list?
  6. Yes?  Congratulations!  You have created your very first PlayerPal skin!

Important Note:  You can make new skins using the PlayerPal ones as a start.  But, you should always copy it to a new folder before modifying it.  Why?  So next time you install/upgrade, you wont loose your work.

B.  Modify MyPDAClassic to include a Play/Pause Button

We are going to modify the footer panel of MyPDAClassic.  We are going to add a Play/Pause toggle button in the footer

Before you start:  The Play/Pause widget needs two images.  For simplicity I am going to point to images already in the skins images folder.  However, when you are comfortable with the process you could change them to something better.

  1. Browse to the following folder:
    C:\Program Files\PlayerPal\PlayerPal4.2\WebSite\Skins\MyPdaClassic\Panels\
  2. Open Footer.ascx in Notepad (or equivalent)
    C:\Program Files\PlayerPal\PlayerPal4.2\WebSite\Skins\MyPdaClassic\Panels\Footer.ascx
  3. Paste the code below into Footer.ascx.  Put it just after the footer div is opened, or right at the end of the file, or where you like :)

    <widget:PlayButton runat="server" PauseImageUrl="images/minus.jpg" PlayImageUrl="images/plus.jpg" id="play"></widget:PlayButton>

  4. Save the file
  5. Open PlayerPal in your browser
  6. Change to the MyPDAClassic skin
  7. Witness your majestic button (the plus minus thing at the bottom :)

With your new button, you should be able to play and pause music.  Obviously you will need to add some music first so give it a try!

Email skins [at] playerpal dotcom with feedback or post on the Google Group.

PS If you get stuck with an error type in reset.aspx to reset to PDAClassic!