Follow this to style the WindowShade window to look in a custom manner.
If you wish to look at a how a working feather is put together, verso's Ne+ may be instructive.
You need to know how to make a feather (preferable, already have one that supports the main player and the Purple Rain miniplayer). See the Feather Intro for basic details.
First, modify your install.rdf to support the new layout: in the
<songbird:skin> section, add support for
chrome://windowshade/content/windowshade.xul:
<songbird:compatibleLayout>
<Description>
<songbird:layoutURL>chrome://windowshade/content/windowshade.xul</songbird:layoutURL>
<songbird:showChrome>false</songbird:showChrome>
<songbird:onTop>true</songbird:onTop>
</Description>
</songbird:compatibleLayout>
You should have already been claiming support for the main player (chrome://purplerain/content/xul/mainplayer.xul), so just copying that section appropriately and changing the layoutURL and onTop should be sufficient.
Edit your chrome manifest to register a skin location for the windowshade package. For example, if your chrome.manifest already has the following:
skin songbird example-feather chrome/skin/
Then you need to add the following line:
skin windowshade example-feather chrome/windowshade/
Simply add a CSS file at chrome/windowshade/windowshade.css relative to your chrome.manifest, and that will be applied to the WindowShade window when it is active. You are free to do anything you can in the CSS, including @import other files.
A sample layout might be:
+---install.rdf +---chrome.manifest \---chrome +---skin | +---songbird.css | +---feathers.css | \---... \---windowshade \---windowshade.css
It may be useful to base your windowshade.css off the included Purple Rain version of chrome://windowshade/skin/windowshade.css — it uses only images from the default feather, and does not use any colours that are not greyscale.