The Guide - Skins - Designing Your Own Skins

Copyright: Sharman Networks Ltd does not condone activities and actions that breach copyright owners. As a Kazaa user you have agreed to abide by the End User License Agreement and it is your responsibility to obey all laws governing copyright in each country. With regard to skins, you cannot use images or content that you do not own the copyright to and you cannot modify an existing skin without the owner/creators permission.

Designing Your Own Skins

• Image Files
• XML Basics
• Hierarchy of XML Tags
• Changing Colors
• Refreshing the Skin
• Graphic Elements
• Sounds
• Layers
• Corners & Borders
• Toolbars & Buttons
• Distributing Your Skin
• Kazaa Skin Tag Definitions v.1.1 (92.5k PDF)

Users of Kazaa are able to make their own skins! ‘Skins’ is a term used to describe the practice of applying new colors and graphics to a standard application - i.e. give it a new 'skin'. You can personalize the interface of Kazaa to look and act exactly as you like… and it’s pretty easy.

First off, to get your creativity flowing, we recommend checking out some of the other skins that are available for Kazaa. You can either search Kazaa using the keywords 'Kazaa Skins' or look at our Skins webpage

Once you have checked out what others have done, it's time for you to get a little experimental. The good news is that we are happy for you to tweak the code and images from the skins we have made; 'Ceramic Biscuit', 'Rubber Cakeshop' and 'Toasted Sherbert'. The images are just XML and BMP!

1. Navigate to your 'Kazaa' folder and then into the 'Skins' folder.
2. Highlight the skin you'd like to edit, right-click, select 'Copy' and then right-click the mouse again, and select 'Paste'. If you open one of the skin folders, you can see all the files that go into the making of that skin.

Image Files

Opening the folder, you'll notice it has quite a lot of files. Most of them are image files in the standard BMP format and should be named with obvious titles: 'mainbar_search.bmp', 'searchbar_searchuser.bmp', etc. We hope that you will keep the names of your graphics as easy to follow!

The reason there are so many files is that there are 4 basic states for each button and each state requires its own graphic;

• Regular state: Button sitting unselected and undisturbed.
• Over state: The image that the button takes when the mouse cursor is rolled over it.
• Selected state: The image the button takes when it is selected.
• Disabled state: What the button looks like when it is unavailable for selection.

So to maximize the user experience, you can use up to 4 graphical variations per button, one graphic for each state. This will be an important concept in the upcoming sections regarding XML.

Important Note On Image Files Kazaa Skins rely on all menus, toolbars and buttons. Removing any item, no matter how trivial this element may seem, may result in the skin becoming non-functional. This doesn't mean you shouldn't experiment, however be aware that the Kazaa application is expecting to see all the images, toolbars and controls in the skin. If any are missing, the application may have some trouble.

The arrangement and behavior of the skin is dictated by the “skin.xml” document also located in the folder of your skin. You can open “skin.xml” into any basic text or HTML editor and if you understand basic web design, you should be able to get started editing right away. If you’re not, don’t worry, there are lots of websites that will teach you the basics of how HTML and XML work. Just do a web search on “HTML tutorial” and you’ll get about 1000 links to helpful sites.

The first lines in the skin.xml file are:

<?xml version="1.0"?>

This tells Kazaa that it’s an XML file.

<SKIN>
   <VERSION>
      3.0
   </VERSION>

This is XML telling Kazaa that the following information is in regards to the skin and that this skin was created for Kazaa version 3.0. Remove any of these lines and the skin won’t work.

After those lines, the variable code begins. Let’s look at the basic structure of a field:

<SKIN>
   <VERSION>
      3.0
   </VERSION>
   <!--colors -->
   <COLORS>
       <PARENTBKGND>
            (244,201,0)
        </PARENTBKGND>
        <!--Menu text color-->
        <WINDOWTEXT>
            (206,226,255)
        </WINDOWTEXT>
        <HIGHLIGHTTEXT>
            (255,255,255)
        </HIGHLIGHTTEXT>

If you know XML or even basic HTML, you’ll recognize the <tags> <get> <used> <to> <them>....

There are 2 types of XML tags in a skin: Active tags and Comment tags

• Active tags are standard <> tags that control a function or attribute of the skin
• Comment tags are just for programmers to keep their work tidy and convey any “inside programmer knowledge” without effecting the functionality of the skin. Comment tags are formatted as such: <!—- your comment here -->
  

A Few Words on XML

To clarify, XML is not a programming language, but more like a way for information to be organized: it’s a way for you to define and separate information. When you deal with a language such as HTML, the tag values are pre-defined; <BOLD> is required to make something appear bold, <CENTER> is required to center whatever item follows the tag, etc… But in XML, the values are defined by the creator of the standard. And the creators of the XML standard in the case of Kazaa skins, are us!

We’ve tried to keep the names as logical as they can be, for instance the XML tag where you define the color of the window text is called <WINDOWTEXT>, or the area that you edit the attributes for the first button is called <BUTTON1>.

XML tags also require closure; any XML tag that does not have a closure tag will not work. Closure tags are simply the original tag name preceded by a forward-slash “/”. For instance, when you start working on a section called <WINDOWTEXT>, make sure that after all the editable parameters comes a </WINDOWTEXT> tag.

Heirarchy of XML Tags

Using XML requires an understanding of tag hierarchy. Just as in many situations, elements can be broken down into groups that become part of larger groups which then get lumped into even larger groups. Think of it this way; at a job, a group of employees report into a single manager; that manager and several other managers report into a Director. Groups of Directors report into a Vice President. This keeps the order of things; imagine the bedlam if every employee reported directly into the VPs! So XML breaks up the code into a similar hierarchy.

In the current example <SKIN> is known as the “Root” tag; this means that everything that comes after <SKIN>, is part of the <SKIN> (at least until there is a </SKIN> tag).

The next level down from the root tag is a “Parent” tag; a Parent tag is required to define and separate a section of the root. Attributes of the Parent tags are generally represented by values kept in “Child” tags. Child tags are elements of Parent tags. So the layout is as follows:

<ROOT>
    <!--comment -->
    <PARENT1>
        <CHILD1>
            values for child 1
        </CHILD1>
        <CHILD2>
            values for child 2
        </CHILD2>
    </PARENT1>
    <PARENT2>
        <CHILD1>
            values for child 1
        </CHILD1>
        <CHILD2>
            values for child 2
        </CHILD2>
    </PARENT2>
</ROOT>

There can be multiple child tags within each other too. For instance, you may run into some values like this:

<PARENT1>
    <CHILD1>
        <CHILD1.1>
            <CHILD1.1.1>
                <CHILD1.1.1.1>
                    {value for child 1.1.1.1}
                </CHILD1.1.1.1>
            </CHILD1.1.1>
        </CHILD1.1>
    </CHILD1>
</PARENT1>

This layout is perfectly valid, so soak this in for a bit. It’s important to understand the hierarchy of the skin.xml document before we start dissecting it.

Changing Colors

Now if we look into the XML code once again, we’ll see the following section:

<PARENTBKGND>
    (244,201,0)
</PARENTBKGND>

This is a tag that allows us to put in values for the “PARENTBKGND”. The color values are expressed in numerical RGB format. If you are not familiar with RGB colors, learn more by doing a web search for “RGB color values”.

The above color of (244, 201,0) is a bright yellow. Let’s change the value to….oh let’s say (22,108,255).

1. Change the value field to be (22,108,255)
2. Save the skin.xml file
3. Go to the Kazaa application, select the “Tools” menu and then “Options”. The options window should open.
4. Select the tab titled “Skins”, make sure the “Skin” radio button is active and using the dropdown menu, select the skin you just altered.
5. Hit the “OK” button and check out what Kazaa looks like now.

If you did it right, the background of the skin should be a blue-ish color. It should also make obvious all the little button borders within the application.

Refreshing The Skin We just glazed over the concept of refreshing the skin to reflect what you edited, now let’s look at that process in detail: Skin preferences are set within the TOOLS > OPTIONS > SKINS window. When Kazaa launches, it reads into the user preferences to find the skin the user last set. So Kazaa will remember the last skin you chose for it. However if you have Kazaa launched and you alter the currently selected skin, the program’s appearance will not change until you do one of two things; Reselect the skin in the Tools->Options->Skins window; or Close Kazaa and reopen it. . We recommended that you create a backup of the skin you wish to edit and work on the backup. In case you make a mistake, you can always revert back to the master skin.

Graphic Elements

Now we’re ready to move into the really creative part of making skins; creating, altering and changing the graphical elements. But before we get too far into it, let’s go back to the “skin.xml” file and check out how it handles graphics.

The parent XML tag to a graphic looks something like this:

<TOPLEFT>
    <IMAGEFILENAME>
        window_topleft.bmp
    </IMAGEFILENAME>
    <OUTERMASKCOLOR>
        (255, 0, 0)
    </OUTERMASKCOLOR>
    <INNERMASKCOLOR>
        (0, 255, 0)
    </INNERMASKCOLOR>
</TOPLEFT>

The Parent XML tag is <TOPLEFT>. This bit of code sets the stage for how the top-left portion of the skin will look. Within the “<TOPLEFT>” section, you have a few child tags:

• <IMAGEFILENAME> : Refers to the image that will be used in the upper left hand corner of the skin
• <OUTERMASKCOLOR> : The RGB value for the color of the outer mask
• <INNERMASKCOLOR> : The RGB value for the color of the inner mask

We covered RGB values earlier in this tutorial, so let’s concentrate on the <IMAGEFILENAME> option. This example reads this way: In the “<TOPLEFT>” portion of the skin, it will display the image whose “<IMAGEFILENAME>” is “window_topleft.bmp”.

So now you remember all those graphic files in the skin’s folder? Let’s go through them, find and open the one named “window_topleft.bmp” (or whatever filename your skin refers to here).

Now as informative as the XML code is, it will only do as it is told. The code doesn’t care about color or consistency, it’s just looking for a file called “window_topleft.bmp”.

Just like in real life, different parents have different sets of children. The group of parents that define the borders of the skin, <TOPLEFT>, <TOP>, <TOPRIGHT>, <LEFT>, <RIGHT>, <BOTTOMLEFT>, <BOTTOM> and <BOTTOMRIGHT> have the following children:

• <IMAGEFILENAME>
• <OUTERMASKCOLOR>
• <INNERMASKCOLOR>

But you will soon see that the deeper you get into the skin.xml document, there are different child value tags for various subsets of parent tags. For instance, the parent tags that define the buttons have the following format:

<BUTTON1>
    <NAME>
        {namevalue}
    </NAME>
    <CORNER>
        {which corner is this button anchored to}
    </CORNER>
    <OFFSET>
        <X>
            {x-coordinate offset}
        </X>
        <Y>
            {y-coordinate offset}
        </Y>
    </OFFSET>
    <TEXT>
        {any text}
    </TEXT>
    <COMMANDID>
        {a digit specifying the command ID}
    </COMMANDID>
    <!-- must be this cmdid-->
</BUTTON1>

We realize that you can probably figure out how most of these values work simply by reading the tag or by conducting a little experiment with the values. If you’d like more detail on certain tags, here is a link to the master Kazaa Skin Tag Definitions (PDF format, 92.5k).

Sounds

You can even add your own sounds too! It’s pretty simple, using standard WAV files. Here are the tags you need to know to add audio:

<SOUNDFILENAME>
    <ON>
        soundyouwanttohearwhenon.wav
    </ON>
    <OFF>
        soundyouwanttohearoff.wav
    </OFF>
    <CLICK>
        soundyouwantothearonclick.wav
    </CLICK>
</SOUNDFILENAME>

Layers One thing to keep in mind during the design phase is that the Kazaa application processes the skin in layers. This is important because the elements of the final layers will always cover up anything in their space on the layers directly below them. The first bottommost initial layers begin with the corner and color elements. The medium layers consist of the toolbars and control sliders. The top and final layers are the Kazaa application window, the ad and the status bar.

Toolbars & Buttons

Toolbars are really just a series of buttons.

There are a couple of things to remember when working on the toolbars:

• As you can see, each toolbar contains several buttons of similar size. Each button in the specific toolbar has to be the same size. Keep this in mind when you design, otherwise you’ll run into difficulty when you code.
• Kazaa application is expecting to see every button. If you remove or leave one out, you will run into problems.
• Toolbars need at least 1 button each.
• If you want buttons of multiple sizes, create multiple toolbars.

1. Using a utility like Winzip or WinRAR, compress the folder containing all the skin elements.
2. Put the zipped file into your Kazaa Shared Folder (typically C:\Program Files\Kazaa\My Shared Folder).
3. Add file data (metadata) to the file:
   a. Open Kazaa
   b. Select “My Kazaa”
   c. Navigate to the zipped Skin File
   d. Right-click on the file and select “Edit Details”
   e. Edit the General details under the “General” tab and add details under the “Details” tab
   f. Ensure your sharing capability is enabled ( TOOLS > OPTIONS > TRAFFIC )
4. That’s it!

Copyright: Sharman Networks Ltd does not condone activities and actions that breach copyright owners. As a Kazaa user you have agreed to abide by the End User License Agreement and it is your responsibility to obey all laws governing copyright in each country. With regard to skins, you cannot use images or content that you do not own the copyright to and you cannot modify an existing skin without the owner/creators permission.