10-15-2002, 09:24 AM -
Let me start off by saying that this is not an official guide. Everything I know about skinning the Winamp Control I've learned through trial and error. But since I haven't been able to find a guide, and others seem to have trouble, too, I thought I'd post this to help out. So here we go...
The first thing to note is the directory structure of the skin files. All skins are stored in the \Plugins\Winamp\skins directory under the TLB installation directory. Each skin is in a seperate subdirectory of this skins directory. Each skin needs a minimum of 3 files. One bitmap to use as the background, one bitmap for the controls, and one configuration file, (called winampctl.ini). If you plan on adding a volume slider, you will also need a bitmap for that as well. You can specify as many different sizes and configurations as you want under one skin, and use different sets of bitmaps for each, if you like, but they all need to be in the same directory for that skin. Before we dive into the configuration file, lets define each of the elements.
All bitmaps support a user definable transparent color.
The background is probably the most important element. The background bitmap determines the overall size of the WinAmp Control. It should contain every aspect of the skin that does not change. For instance, the frame for the song position counter or title display, the background for the volume slider, or any purely artistic (i.e. no functionality) element of the skin.
The next most important element are the controls, for obvious reasons. The controls bitmap is a single bitmap that contains a total of 18 smaller images representing the controls. All 18 controls must be the same size and square, as the individual sizes are determined from the overall size of the controls bitmap. The 18 smaller images are arranged in a grid that is 6 images wide by 3 images high. In order from left to right, the images represent the following controls: Play, Pause, Stop, Previous, Next, and Open. From top to bottom, the 3 rows represent these button states: Normal, MouseOver (Hover), and MouseDown (Click). If you are having trouble visualizing this, look at the controls bitmap for an existing skin.
The final bitmap is the volume slider. This bitmap is about as simple as it gets. It represents the portion of the WinAmp Control that the user will grab to change the volume. In other words, just the slider; the bar should be part of the background bitmap. The volume control, and thus the slider bitmap, is optional.
Once you've created (or modified) the appropriate bitmaps, it's time to tell the WinAmp Control what to do with them. Enter winampctl.ini
The WinAmp Control skin configuration file (winampctl.ini) has at least 3 sections, which can be edited using any standard text editor, such as Notepad. I'll go over each one now. For this portion, it might be easiest to copy an existing winampctl.ini to your skin's directory and modifiy it to avoid typing mistakes.
The first section (called, appropriately enough, general) contains information on the skin's name and author. It should look something like this:
These values should be pretty self explanatory, but I'll go over them anyway. The value names are in bold with the expected type of information in <brackets>.
SkinName = <Text>
This is the name that will show up in the skins drop-down list under the WinAmp Control's Properties dialog box. Try to make it relatively short, but descriptive and unique.
Author = <Text>
Your name. As far as I can tell, this setting and the next 2 are optional, and only appear inside the configuration file.
AuthorURL = <URL>
The URL to your personal web page, or where this skin is available for download.
AuthorEmail = <email address>
The email address you would like people to use to contact you with comments, suggestions, gripes, or praise related to your skin.
The next section is almost as easy. It's called layouts, and should look something like this:
This section has only one setting that determines how many more sections there will be in the file.
LayoutsCount = <number>
This value determines how many layouts, or configurations you will have under this skin. Each layout will need a seperate section to configure it. This number must be at least 1.
Which brings us to the final section(s). If you have more than one layout, the syntax for each section is the same, simply increment the number in each section's heading (layout0, layout1, layout2, etc). The first section should be called layout0, and uses this format:
This section is probably the most dificult to fill out, but it's not too bad. Lines that start with a semicolon ( ; ) are comments, used only inside the file to help the user keep track of sections. They are ignored by WinAmp Control. All other lines are values, as follows:
Name = <Text>
This is the name of the layout, which will appear in the Layouts drop-down menu in the plugin's properties dialog box. The standard format for this name consists of which size icons this layout was designed to fit next to and which elements are present. For example, in this case the name would be: "Small Icons: Time & Song & Volume".
ShowVolume = <BOOLEAN>
If you wish to include a volume slider in this layout, set this to TRUE, otherwise set it to FALSE.
ShowTime = <BOOLEAN>
If you wish to include a song position counter (time display) in this layout, set this to TRUE, otherwise set it to FALSE.
ShowSong = <BOOLEAN>
If you wish to include a song title scroller in this layout, set this to TRUE, otherwise set it to FALSE.
BackgroundBitmap = <bitmap>
This is the bitmap you created for your skin's background. You do not need to include the path.
BackgroundTransparentColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, that you want to set as transparent for your skin's background. If you do not wish to use transparency, set this to a color that is not present in the bitmap. Defaults to FF00FF (which is pink).
ControlsBitmap = <bitmap>
This is the bitmap you created for your skin's controls. You do not need to include the path.
ControlsTransparentColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, that you want to set as transparent for your skin's controls. If you do not wish to use transparency, set this to a color that is not present in the bitmap. Defaults to FF00FF (which is pink).
ControlsRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's controls. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. Currently, only the first two coordinates are used, and the other coordinates are determined by the size of your controls. WinAmp Control displays 5 controls at a time (alternating between play and pause as needed), so if your buttons are all 10 pixels square, your controls rectangle will be 50 pixels wide by 10 pixels high.
TimeRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's time display. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. The display is centered inside this rectangle, and the font is automatically scaled to best fill the rectangle. I don't know of any way to change the font.
TimeColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, of the time display's font.
SongRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's song title display. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. The display is centered inside this rectangle, and the font is automatically scaled to best fill the rectangle. I don't know of any way to change the font.
SongColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, of the song title display's font.
VolumeSliderBitmap = <bitmap>
This is the bitmap you created for your skin's volume slider. You do not need to include the path.
VolumeSliderTransparentColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, that you want to set as transparent for your skin's volume slider. If you do not wish to use transparency, set this to a color that is not present in the bitmap. Defaults to FF00FF (which is pink).
VolumeRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's volume slider, as well as the range. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. The height of this rectangle should be the same as the height of the volume slider bitmap, and the width should be the same as the width of the volume slider portion of the background bitmap (in other words, the range of movement you would like the volume slider to have).
When you are done, save this file to your skin's directory (make sure the name is winampctl.ini). You should then be able to select your skin in WinAmp Control's properties dialog box.
Hope this helps!
The first thing to note is the directory structure of the skin files. All skins are stored in the \Plugins\Winamp\skins directory under the TLB installation directory. Each skin is in a seperate subdirectory of this skins directory. Each skin needs a minimum of 3 files. One bitmap to use as the background, one bitmap for the controls, and one configuration file, (called winampctl.ini). If you plan on adding a volume slider, you will also need a bitmap for that as well. You can specify as many different sizes and configurations as you want under one skin, and use different sets of bitmaps for each, if you like, but they all need to be in the same directory for that skin. Before we dive into the configuration file, lets define each of the elements.
All bitmaps support a user definable transparent color.
The background is probably the most important element. The background bitmap determines the overall size of the WinAmp Control. It should contain every aspect of the skin that does not change. For instance, the frame for the song position counter or title display, the background for the volume slider, or any purely artistic (i.e. no functionality) element of the skin.
The next most important element are the controls, for obvious reasons. The controls bitmap is a single bitmap that contains a total of 18 smaller images representing the controls. All 18 controls must be the same size and square, as the individual sizes are determined from the overall size of the controls bitmap. The 18 smaller images are arranged in a grid that is 6 images wide by 3 images high. In order from left to right, the images represent the following controls: Play, Pause, Stop, Previous, Next, and Open. From top to bottom, the 3 rows represent these button states: Normal, MouseOver (Hover), and MouseDown (Click). If you are having trouble visualizing this, look at the controls bitmap for an existing skin.
The final bitmap is the volume slider. This bitmap is about as simple as it gets. It represents the portion of the WinAmp Control that the user will grab to change the volume. In other words, just the slider; the bar should be part of the background bitmap. The volume control, and thus the slider bitmap, is optional.
Once you've created (or modified) the appropriate bitmaps, it's time to tell the WinAmp Control what to do with them. Enter winampctl.ini
The WinAmp Control skin configuration file (winampctl.ini) has at least 3 sections, which can be edited using any standard text editor, such as Notepad. I'll go over each one now. For this portion, it might be easiest to copy an existing winampctl.ini to your skin's directory and modifiy it to avoid typing mistakes.
The first section (called, appropriately enough, general) contains information on the skin's name and author. It should look something like this:
Code:
[general]
SkinName = MySkin
Author = My Name Here
AuthorURL = http://www.mywebpage.com
AuthorEmail = [EMAIL=my.email@address.com]my.email@address.com[/EMAIL]SkinName = <Text>
This is the name that will show up in the skins drop-down list under the WinAmp Control's Properties dialog box. Try to make it relatively short, but descriptive and unique.
Author = <Text>
Your name. As far as I can tell, this setting and the next 2 are optional, and only appear inside the configuration file.
AuthorURL = <URL>
The URL to your personal web page, or where this skin is available for download.
AuthorEmail = <email address>
The email address you would like people to use to contact you with comments, suggestions, gripes, or praise related to your skin.
The next section is almost as easy. It's called layouts, and should look something like this:
Code:
[layouts]
LayoutsCount = 1LayoutsCount = <number>
This value determines how many layouts, or configurations you will have under this skin. Each layout will need a seperate section to configure it. This number must be at least 1.
Which brings us to the final section(s). If you have more than one layout, the syntax for each section is the same, simply increment the number in each section's heading (layout0, layout1, layout2, etc). The first section should be called layout0, and uses this format:
Code:
[layout0]
Name = Layout name
ShowVolume = TRUE
ShowTime = TRUE
ShowSong = TRUE
;Background description
BackgroundBitmap = background.bmp
BackgroundTransparentColor = FF00FF
;Controls description
ControlsBitmap = controls.bmp
ControlsTransparentColor = FF00FF
ControlsRect = 25 0 75 10
;Time description
TimeRect = 0 0 25 10
TimeColor = 000000
;Song description
SongRect = 0 10 100 25
SongColor = 000000
;Volume description
VolumeSliderBitmap = volume_slider.bmp
VolumeSliderTransparentColor = FF00FF
VolumeRect = 80 0 100 10Name = <Text>
This is the name of the layout, which will appear in the Layouts drop-down menu in the plugin's properties dialog box. The standard format for this name consists of which size icons this layout was designed to fit next to and which elements are present. For example, in this case the name would be: "Small Icons: Time & Song & Volume".
ShowVolume = <BOOLEAN>
If you wish to include a volume slider in this layout, set this to TRUE, otherwise set it to FALSE.
ShowTime = <BOOLEAN>
If you wish to include a song position counter (time display) in this layout, set this to TRUE, otherwise set it to FALSE.
ShowSong = <BOOLEAN>
If you wish to include a song title scroller in this layout, set this to TRUE, otherwise set it to FALSE.
BackgroundBitmap = <bitmap>
This is the bitmap you created for your skin's background. You do not need to include the path.
BackgroundTransparentColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, that you want to set as transparent for your skin's background. If you do not wish to use transparency, set this to a color that is not present in the bitmap. Defaults to FF00FF (which is pink).
ControlsBitmap = <bitmap>
This is the bitmap you created for your skin's controls. You do not need to include the path.
ControlsTransparentColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, that you want to set as transparent for your skin's controls. If you do not wish to use transparency, set this to a color that is not present in the bitmap. Defaults to FF00FF (which is pink).
ControlsRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's controls. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. Currently, only the first two coordinates are used, and the other coordinates are determined by the size of your controls. WinAmp Control displays 5 controls at a time (alternating between play and pause as needed), so if your buttons are all 10 pixels square, your controls rectangle will be 50 pixels wide by 10 pixels high.
TimeRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's time display. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. The display is centered inside this rectangle, and the font is automatically scaled to best fill the rectangle. I don't know of any way to change the font.
TimeColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, of the time display's font.
SongRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's song title display. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. The display is centered inside this rectangle, and the font is automatically scaled to best fill the rectangle. I don't know of any way to change the font.
SongColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, of the song title display's font.
VolumeSliderBitmap = <bitmap>
This is the bitmap you created for your skin's volume slider. You do not need to include the path.
VolumeSliderTransparentColor = <color>
This is the color, in standard hexidecimal RGB (Red Green Blue) format, that you want to set as transparent for your skin's volume slider. If you do not wish to use transparency, set this to a color that is not present in the bitmap. Defaults to FF00FF (which is pink).
VolumeRect = <X1 Y1 X2 Y2>
This setting is used to determine placement for your skin's volume slider, as well as the range. The four values define a rectangle. X1 and Y1 are the coordinates for the upper left corner, and X2 and Y2 are the bottom right. These coordinates are relative to the background bitmap. The height of this rectangle should be the same as the height of the volume slider bitmap, and the width should be the same as the width of the volume slider portion of the background bitmap (in other words, the range of movement you would like the volume slider to have).
When you are done, save this file to your skin's directory (make sure the name is winampctl.ini). You should then be able to select your skin in WinAmp Control's properties dialog box.
Hope this helps!