A short tutorial for Winamp skinners to complete incomplete classic skins
Version 1.1
Many of the earliest Winamp 2 skins and most of the recently published SkinAmp or SkinnerToo-generated Classic skins do not have the Media Library skinned. And they do not skin the Video window either. This short pictorial tutorial explains how to reuse elements of the Playlist Editor window to skin the Media Library and how to turn the no longer used Mini Browser window into a Video window.
This is not a complete reference. If you want to know all the depths of Classic skinning, get Jellby’s Skinner Atlas.
Enter the skin with 7-Zip file manager and extract Pledit.bmp and Mb.bmp into a folder where you will create the new bitmap files for the Media Library and Video windows.
Gen.bmp skins the borders of generic windows such as the Media Library, the Queue Manager or the Jump to File window. Use a template like this below to create your Gen.bmp (extracting Gen.bmp from Skin_the_Library.wsz will do too). Paint the pink area with any color not used in your skin:
Copy the leftmost elements of the top two rows of Pledit.bmp to the leftmost positions of the top two rows of Gen.bmp. Then copy the 3rd elements of the top two rows of Pledit.bmp to the 2nd, 3rd, 4th and 5th positions in the top two rows of Gen.bmp (but you can make them different if you like):
Copy the 4th elements of the top two rows of Pledit.bmp to the 6th positions of the top two rows of Gen.bmp. Then copy the small Close button under the 2nd element of the 2nd row of Pledit.bmp to the small box under the last element in the 2nd row of Gen.bmp:
The elements of the first two rows in Pledit.bmp may have a thin line at their bottoms for the top border of the Playlist Editor’s content area. Remove the lines by filling them with the background:
This is where it starts getting harder. Copy the bottom left corner, sized 11x14 pixels, of the big rectangle with the Add, Rem (or +File, −File) buttons in Pledit.bmp and paste it at the left edge of the long rectangle in the 3rd row of Gen.bmp. Then copy the square-shaped area above it, sized 11x11 pixels, and paste it at the bottom of the 11x25 sized column to the right of the Close button in Gen.bmp:
Expand the rightmost 1 pixel wide column of the newly pasted 11x14 pixel area to the end of the long rectangle in Gen.bmp:
Copy the topmost 1 pixel high row of the newly pasted 11x11 pixel square to the top of the 11x29 pixel column to the right of the long rectangle. Expand the 1 pixel high rows to fill the rest of both columns:
Copy the expanded area of the long rectangle in the 3rd row of Gen.bmp to the left of the long rectangle in the 4th row:
Copy the bottom right corner, sized 18x14 pixels, of the big rectangle with the Load List button in Pledit.png to the rigth edge of the long rectangle in the 4th row of Gen.bmp. Then copy the 8x11 pixel area above the 18x14 pixel area in Pledit.bmp and paste it at the bottom of the rightmost, 8x25 sized column in Gen.bmp:
Copy the topmost 1 pixel high row of the newly pasted 8x11 pixel area to the top of the 8x29 pixel column. Expand the 1 pixel high rows to fill the rest of both columns:
Copy a 25x14 pixel area from the middle of the long rectangle in the 4th row of Gen.bmp and paste it into the same-sized box in the fifth row:
The small 7x7 pixel square is likely to be an obsolete element so I am just using it as a horizontally stretchable background image for the title bar alphabet, copying if from a 7x7 pixel area from the 3rd element in the 1st row of Gen.bmp, 4 pixels down from the top margin:
The last two rows have the letters of the titlebar alphabet. The last but one row is for focused windows and the last row is for unfocused windows. The height of each row is 7 pixels but the width of the letters is variable. There is a separator between each letter and one before letter A:
The first three letters enlarged:
GenEx.bmp skins the buttons, background colors and text colors of generic windows. Extract GenEx.bmp from Skin_the_Library.wsz and use it as a template for your skin. Paint the pink area with any color not used in your skin:
The labeled buttons are in the top left area: the unpressed button in the top left corner and the pressed button below it. The scrollbar arrows are in the bottom left area and the middle buttons of the scrollbars are in the bottom right area:
In the top row (y=0), starting at x=48, there is a row of pixels defining background and text colors:
This is how you color the pixels if you want to harmonize the Library with the Playlist Editor:
■ x=48 listview background: the same as the value of NormalBG in pledit.txt
■ x=50 listview foreground: the same as the value of Normal in pledit.txt
■ x=52 window background: the background color between the Add, Rem (+File, −File) buttons in pledit.bmp
■ x=54 button text color: a color that contrasts with the background color of the buttons in genex.bmp
■ x=56 window text color: a color that contrasts with the window background
■ x=58 color of dividers and sunken borders: contrasts less with the window background
■ x=60 the same as the value of SelectedBG in pledit.txt (only used if 84 through 90 are not defined)
■ x=62 listview header background color: may be the same as the window or button background color
■ x=64 listview header text color: may be the same as the window or buton text color
■ x=66 listview header top and left border color: it is up to you how much you want it to contrast with the window background color
■ x=68 listview header bottom and right border color: may be the same as the listview header top and left border color
■ x=70 listview header bottom and right shadow color
■ x=72 listview header dead area color: may be the same as the listview header border colors
■ x=74 scrollbar color #1
■ x=76 scrollbar color #2: may be the same as scrollbar color #1
■ x=78 pressed scrollbar color #1
■ x=80 pressed scrollbar color #2: may be the same as pressed scrollbar color #1
■ x=82 scrollbar dead area color
■ x=84 selected text color in focused panel: it should contrast with x=86
■ x=86 selected background color in focused panel: the same as the value of SelectedBG in pledit.txt
■ x=88 selected text color in unfocused panel: it should contrast with x=90
■ x=90 selected background color in unfocused panel: the average of NormalBG and SelectedBG
The bitmap file skinning the Video window is almost the same as the bitmap file skinning the Mini Browser. Spot the differences:
This tutorial and the accompanying Winamp skin were created by Ariszló in 2020. The tutorial is licensed under the Creative Commons Attribution 4.0 license and the skin is public domain.
Compiled into CHM with chmProcessor.
Thanks shadesmaclean for his feedback.