Overriding System Defaults

To really add the finishing touches to your skin, you should always change the System defaults to more completely match your skin's design and style. To do this, you redefine the System Colors and the System Elements. First, let's take a look at the System Colors.

System Colors

The System Colors, also called the Studio Colors, control the colors of text and borders of most aspects of the skin. By overriding the default values, you can change the color of the text in the Playlist Editor, Preferences, Menus, etc. Since the things you are changing are the same from skin to skin, you can reuse the same file, changing the values to suit your new skin. Here is the file I used for this tutorial skin: studio-colors.xml. Include this file (after changing the extension back to .xml) right after gamma-presets.xml but before any other files. It's pretty thoroughly commented, so it shouldn't be too hard to customize it for your needs.

System Elements

The System Elements, or Studio Elements, provide the images for the generic pieces of the skin. This includes Buttons, ScrollBars, CheckBoxes, and the likes. Most often, people just use the default images as a guideline and put their custom images in their place. The default Elements look like this:

Hopefully, since you are setting out to skin Winamp, you have enough experience with it that some of these look familiar. The big squares in the bottom left are used to create all different sized Buttons, like those found in the Statusbars or in Preferences. You should also recognize the Scrollbars and a few other Elements. There are three of many of the Elements which are used for the up, down, and hover states. Thorough skinning of these parts is crucial to making a complete skin. Also, like the other images for our skin, these can be made to respond to Color Themes. Here are the images used for the Tutorial Skin:

Like the System Colors, we can use the same XML amongst different skins to get the images we need from the above image. To customize this one, you may want to change the gammagroups of different layers. Here is the file I used for this tutorial skin: studio-elements.xml. Include this file (after changing the extension back to .xml) right after gamma-presets.xml but before any other files. Place your modified image into the standardframe subfolder. It should be called Window-elements.png.

To more completely skin Winamp, the next section we'll cover is Menus and Tooltips.