Pure Player - Skinning Tutorials

Preliminary notes:

• Unfortunately, skins of Pure Player 0.6.* are not compatible. You have to start from the scratch (you can keep the images, of course).
• Enabled Pure Player for your skin (see A) above).

• The whole layout of PurePlayer is defined in one css-file. Currently it has to be named pureplayer-07.css and must be located in the folder yourfeather/chrome/skin/ (where your feathers.css is located, too.)
  Notice: The name of the css-file works as a version control. If I have to do changes in PurePlayer, that effect the layout massively, I will change that name to ensure that only working css-files are applied.

• And you need image files for buttons & backgrounds etc. I suggest you locate them in a subfolder like yourfeather/chrome/skin/pureplayer/.

Walk-through:

The following text documents how I added a Pure Player Skin to YABS. I used the "default" Pure Player Skin as the template, but you can do this similar with any other Pure Player Skin as basis.

1. Download and extract the Pure Player Add-on-XPI (or the xpi of your preferred Pure Player Skin).
2. Copy the file chrome/skin/default.css from the Add-ons extracted source code to the feathers folder yourfeather/chrome/skin/ and rename it to pureplayer-07.css.
3. Copy the whole image folder /chrome/skin/default/ from the Add-ons source code to your feathers folder and rename it, so you end up with all the images in the new folder yourfeather/chrome/skin/pureplayer/
4. Open the file pureplayer-07.css and update all paths to images (via search & replace). The Path: chrome://pureview/skin/default/ must be replaced with the path to the images in the feathers folder: chrome://songbird/skin/pureplayer/
5. Now everything is set up. You can change the css-code to your needs, but for a first test, only change the color of the info-text to red:
   #pureview .faceplate-text { ...
   color: rgb(255,0,0) !important;
... }

6. Now would be a good time for a first test: save everything, fire up Songbird, select your updated feather, switch to Pure Player and select [Current Feather] as its Skin. Pure Player should look exactly like the default skin, only the text should be red. If that's the case, everything is working.
7. If everything works, you can change all the images and css-code to your needs. Make sure you check the layout with any possible Pure Player - Settings (round corners, disabled autoscroll, hidden volumebar etc...).

Problems?

• Check out the source-code of YABS (not yet released). Compare the location and content of the involved files (pureplayer-XX.css and images) to your source code.

• If still something is not working, don't hesitate to ask for help in the comments on this page, or on the Pure Player Page.

Preparing your new Add-on:

1. Download the .xpi file of an existing Pure Player Skin (the one that is closed to what you want) and extract the source to somewhere.

2. You now have to do some changes in some files, to get your new Add-on to work:

   1. install.rdf
      Change the id to something unique like yourskinsname@yourname
      Also change at least Name, Description and Author
      As Name please use "Pure Player - YourSkinsName Skin". That will make it easier for the users to find Pure Player skins between the other add-ons.
   2. chrome.manifest
      Change the aliases. You have to end up with the following. UniqueSkinName has to be replaced (f.e. I used pp-cover in my CoverArt Skin):
      content UniqueSkinName  chrome/content/
skin    UniqueSkinName    classic/1.0 chrome/skin/
overlay chrome://pureview/content/xul/skinMenuOverlay.xul chrome://UniqueSkinName/content/menuOverlay.xul
   3. chrome/content/menuOverlay.xul
      Change only this line:
      <menuitem label="YourSkinsName (in the Skin-menu)" value="chrome://UniqueSkinName/skin/pureplayer.css" type="radio" />
   4. content/skin/pureplayer.css
      Change all the paths (by search & replace)
      from chrome://AnyOldName/skin/images/ to chrome://UniqueSkinName/skin/images/

3. That's it. Your Add-on now should be installable (even if it looks exactly like the old skin). Try it, by packing your updated source-files to a zip-file, rename it to something.xpi and install it via the Songbird-Options. Note: It's much better to install it via an entry into your profile folder directly. How to do this is coming later...

4. If everything worked, you should have a new clickable entry in the Pure Player Skin Menu with YourSkinsName.

Skinning:

1. If the installation of your new Add-on worked, you can change all the images and css-code to your needs. Make sure you test your skin with any possible Pure Player - Settings (round corners, disabled autoscroll, hidden volumebar etc...).

2. For explanations on specific functions, see the section D) at the bottom.

Releasing:

1. If everything is tested and working, pack up your source-code into an .xpi and upload it via the add-on site (bottom link).

2. Don't forget to tag your extension with "Pure Player Skin", so it shows up in the gallery.

Problems:

1. If you have problems getting your Add-on to work or to upload, see if you can find help in the Developer Wiki under Extensions .

2. If something is not working, or if you need more information, don't hesitate to ask for help in the comments on this page, or on the Pure Player Page.

Animated Images:

Users have an option to use "animations" in the Pure Player settings. This means, you can provide a set of animated PNGs, which should replace the default PNGs. You have to use the "animate"-Property of the Pure Player Window in your css file to configure which files should be used:

// This is the default line for the no-cover image:
#pureview #faceplate-album-art-box {
    background-image: url('chrome://pureview/skin/birdie/nocover.png') !important;
}
// If you want to add an "animated"-image to replace the default one,
// in case the user enabled Animations, just add these additional lines:
#pureview[animate="true"] #faceplate-album-art-box {
    background-image: url('chrome://pureview/skin/birdie/nocover_animated.png') !important;
}

Please use only slow animations, that don't distract the user too much.

More Infos on animated PNGs:
https://addons.mozilla.org/en-US/firefox/addon/5519
http://labs.mozilla.com/2007/08/better-animations-in-firefox-3/
 

New context menu and tool tip style:

Only for Pure Player (new)!

Skin developers can add new context menu and toop tip style to their skin. Use this code below:

// Font type and color for context menu item text and toop tip text.
// But be careful! It will be changes the other labels too (f.e. title, artist, album etc.)!
// So you must define those too!
#pureview[contextmenu="true"] label {
  color: #e2bd27 !important;
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
// Background color, border color, rounded corners and trancparency for tool tip.
// If you want to set transparency, rounded corners must to be minimum 1!
#pureview[contextmenu="true"] tooltip {
  background-color: #222222 !important;
  border:1px solid #676767 !important;
  -moz-border-radius:4px !important;
  opacity:0.92 !important;
}
// Background color, border color, rounded corners and trancparency for context menu.
// If you want to set transparency, rounded corners must to be minimum 1!
#pureview[contextmenu="true"] menu,
#pureview[contextmenu="true"] menuitem {
  background-color: #222222 !important;
}
#pureview[contextmenu="true"] menupopup,
#pureview[contextmenu="true"] popup {
  background-image: none !important;
  background-color: #222222 !important;
  border:1px solid #676767 !important;
  -moz-border-radius:4px !important;
  opacity:0.92 !important;
}
// Background (highlight) color for selected menu item.
#pureview[contextmenu="true"] menu[_moz-menuactive="true"],
#pureview[contextmenu="true"] menuitem[_moz-menuactive="true"] {
  background-image: none !important;
  background-color: #141414 !important;
}
// New menu separator image.
#pureview[contextmenu="true"] menuseparator {
  background-image: url('chrome://pp-birdie/skin/images/bg-separator.png') !important;
  background-repeat: repeat-x !important;
}
// New icon arrow image for sub-menu.
#pureview[contextmenu="true"] .menu-right {
  list-style-image: url('chrome://pp-birdie/skin/images/icon-arrow.png') !important;
}
// New checked image for selected menu items.
#pureview[contextmenu="true"] menuitem[checked="true"],
#pureview[contextmenu="true"] menulist > menupopup > menuitem[checked="true"],
#pureview[contextmenu="true"] .menulist-menupopup > menuitem[checked="true"] {
  background-image: url('chrome://pp-birdie/skin/images/bg-check.png') !important;
}