From Winamp Developer Wiki
Revision as of 03:34, 19 November 2009 by Culix (Talk | contribs)

Jump to: navigation, search

Creating a Classic Skin: The Base Skin --> Paint the Main Window --> Paint the Equalizer Window --> Paint the Playlist Window --> Paint the Minibrowser Window --> Paint the AVS Window --> Paint the Winamp 2.9/5.x Windows --> Create Custom Cursors --> Edit the Configuration Files --> Compress to .WSZ format --> Submit to

Skinning the Playlist Window

Check it out, it's the playlist window:


Despite being made from only one image file, the Playlist skin is actually fairly complex due to the fact that it is a fully resizable window.



The explanation for this window is fairly complicated due to the randomness of the various components layed out through out the image, so please bear with me.

The top section is fairly straightforward. The upper left image is the top left corner of the Playlist window. This is then followed by the graphic that creates the title for the Playlist window, please remember that this title is always centered within the Playlist Editor window. To it's right is a little part of the titlebar which is tiled all across for every time the window is stretched more and more horizontally. Next would be the default state for the WindowShade mode and close buttons, which is then followed by a graphic which spans two rows, this is a graphic for the bottom edge of the Playlist window which is also tiled as the window is stretched horizontally. Finally to the right of that is a fairly large graphic which once again spans two rows. This graphic is the background for the secondary Visualization area. This area only comes to life when the Winamp Main Window has been disabled.

The next row contains the same set of graphics except that they are the variation that is displayed when the Playlist editor does not have focus, or is the inactive window.

The first two graphics in this next row are for the vertical stretching of the Playlist editor window. The leftmost graphic is for the left side of the Playlist window, and the one to its right allows the right side of the editor to stretch. To the right of those two graphics are the images for the clicked version of the close button with the clicked version of the WindowShade button to its right. Directly beneath those buttons are the un-clicked and clicked versions of the Playlist editor's vertical scrollbar button. To the right of those button images are the graphics necessary for the WindowShade mode of the Playlist Editor.

There are two rows of images that compose the WindowShade mode. The top set of images make up the leftmost side of the WindowShaded version of the Playlist Editor, followed by the rightmost part of the editor. Directly beneath the image that makes the left side is the graphic necessary for the stretching of the WindowShaded Playlist window. To the right of that is the inactive version of the right side of the editor.

Beneath the WindowShade mode graphics are two fairly large graphics that create the bottom side of the Playlist Editor window while in non-WindowShade mode. The left one consists of button controls for the Playlist Editor when not in use. The right graphic is the image for the right side of the Playlist with the time displays, player controls, as well as the window resizing control.

The next set of graphics are all the buttons in both states, pressed and not pressed, that allow you to modify the Playlist. They are all self explanatory in what they do. These images are individually layed over the Playlist window. Note: transparencies are not supported.