Your First Skin

If you've already read all the other sections of Getting Started, you're ready to create your very first skin. Nothing beats a concrete example, especially after all this technical talk about resources, file formats, resource data types, etc... in order to keep things simple, this sample will only work in Messenger 8.5 as it is. However, the very same XML code will require very little modification to work properly in other versions of Messenger so feel free to modify the version restriction (see below) if you're using a different version of Windows Live Messenger.

Note to Messenger 8.1 users: for your first skin to work properly, replace the code below with this one.

Test Skin Example

Skininfo files can be very short or very long depending on the extent of the modifications your skin needs to perform. Here is an example of a very short skin file demonstrating how easy it is to make two single modifications to Messenger:

<SkinInfo>
    <Information>
        <Name>Test Skin</Name>
    </Information>

    <MessengerSkin>
        <ResGroup>
            <Restrictions>
                <MsgVersions>
                    <Version Major="8" Minor="5"/>
                </MsgVersions>
            </Restrictions>

            <Resources>
                <Replace>
                    <Strings>
                        <String Id="61288">Hello World!</String>
                    </Strings>

                    <Graphics><Pictures>
                        <Picture Id="20061">
                            <File>clouds.jpg</File>
                        </Picture>
                    </Pictures></Graphics>
                </Replace>
            </Resources>

        </ResGroup>
    </MessengerSkin>
</SkinInfo>

To be detected by Messenger Plus!, a skin only needs to be added in the proper directory by its creator. Of course, Messenger Plus! takes care of all of this when a Skin Pack is imported (public distribution) but developers of new skins need to do some of the work themselves. Here are the steps needed to make this sample work:

1. Create a directory for your skin called Test Skin in the Messenger Plus!'s Skins directory. By default, this directory will be C:\Program Files\Messenger Plus! Live\Skins\Test Skin.

2. Open-up your favorite text editor (we'll use Notepad for this example) and copy-paste the above code.

3. Save the file in the Test Skin directory and name it SkinInfo.xml. The name of this file cannot be anything else than that, every skin needs one SkinInfo.xml file. If possible, when saving the file, choose "Unicode" for encoding as this will allow you to write text in the language of your choice and will speed-up the loading of your skin in Messenger.

   • Important: after the file has been saved, double check that its extension is xml as some text editors will automatically append txt to text files. Of course, your next skins should be created with a real XML editor as explained here so this won't be a problem in the future.

4. Extract this picture in your skin's directory as clouds.jpg. You can use any other picture of your choice as long as you name it the same way (or you can also replace clouds.jpg in the XML code by the name of your own file). Messenger will generally indiscriminately accept GIF, JPG and PNG files for its pictures anywhere in the program.

   • Note about backgrounds: as you'll see below, this picture will be used in a background. Backgrounds can be stretched by a big factor depending on the size chosen by the user for his windows. For that reason, it is recommended that you use pictures of good quality, with a big enough resolution (at the very least 350*350, the more the better) and with a small compression factor (when using JPG). If you don't, your skin may look quite bad for some people.

5. Close the Preferences panel of Messenger Plus! if Messenger was running and the panel was already opened.

Because skins are considered to be "installed" by default, that's all you need to do when creating a new skin (in contrast with scripts that need to be specifically marked as being installed in the Windows registry). Now open the Messenger Plus! Preferences panel, go to the Customize!\Skins section and if you did all of the above correctly, an entry called "Test Skin" should be displayed. Enable your new skin and restart Messenger.

The first visible result of this skin is a modification of the login screen, as seen in this screenshot. If your contact list does not open or opens totally black, it means that your skin was not created properly. The most probable cause of this error (in this example) is the absence of the clouds.jpg picture so make sure it was properly copied in C:\Program Files\Messenger Plus! Live\Skins\Test Skin.

Piece by Piece Analysis

The skininfo data used for this example contains 4 blocks of interest, all of which you've already seen in previous sections. Let's see them again one by one, beginning with information about the skin itself:

<Information>
    <Name>Test Skin</Name>
</Information>

The Information block lists everything users may want to know about the skin. It is explained in details in *Packaging your Skin*. By default, all that's needed is a Name element which is used to display the skin's name (like in the Preferences panel). Much more information such as a description, a version and the developer's web site url can be specified here.

Following the skin's information is a Messenger resource group block that can be divided in 3 smaller blocks.

<Restrictions>
    <MsgVersions>
        <Version Major="8" Minor="5"/>
    </MsgVersions>
</Restrictions>

First is the restriction governing the use of the resource group. As you can see, one Messenger version is specified here to restrict the skin to Windows Live Messenger 8.5.x.x. More Version elements could be added to allow Messenger Plus! to load the skin for other versions of Messenger. The version could also be restricted more precisely by using the additional Build and Revision attributes.

The last two blocks describe the resources that are replaced in Messenger.

<Strings>
    <String Id="61288">Hello World!</String>
</Strings>

<Graphics>
    <Pictures>
        <Picture Id="20061">
            <File>clouds.jpg</File>
        </Picture>
    </Pictures>
</Graphics>

The first one is the "Remember me" string which is located at id 61288 (you can find this string in Strings & Colors\msglang_strings.txt in resources extracted from Messenger). The second one is the background picture used in many places in Messenger 8.5 (contact list, notification popups, etc...). The picture's id is 20061 (find it in and Graphics\Pictures) and its replacement data comes from the clouds.jpg file (loaded and sent to Messenger as-is).

Note about strings: you'll notice that many lines of text have the character & included somewhere in them. This is used by Messenger to know what letter can be used for Alt+ keyboard shortcuts. It is recommended to always include this character in your strings when it is present in the original one as sometimes, Messenger may add some extra text to your string to compensate for the missing shortcut. The letter that's marked in your new string does not need to be the same as the one that was marked in the original. Because & is a special character in XML, it needs to be written &. To underline the first letter of the string mentioned above, you would write:

<Strings>
    <String Id="61288">&amp;Hello World!</String>
</Strings>

Testing and More

Now that you know how to create a simple skin, you'll need to practice to understand more about the skinning system offered by Messenger Plus!. Several subjects of importance are reviewed in Skins Essentials and for the more adventurous ones, Specialized Subjects will tell you all you need to do to create professional, advanced and out-of-the-ordinary skins.

Remember that despite the fact that only one picture and one string were modified in this example, you can modify any number of them in your file. All you need to do is add the elements one after the other. For example, you can add any number of String elements in Strings, one on each line to keep things organized. For Picture elements as for any other kind of resources, the same thing needs to be done. Don't let the child File element confuse you and remember that new lines are only needed to keep things organized, they are not required by the XML syntax like the example below demonstrates:

<Pictures>
    <Picture Id="20061"><File>clouds.jpg</File></Picture>
    <Picture Id="636"><File>header.png</File></Picture>
    ...
</Pictures>

While you'll be working on your skin, remember that testing is very important and must be your first priority before distributing anything publicly. Here are two of the main things you need to test:

• Because some resources in Messenger are used in multiple places (the Picture Map.txt file is helpful but not exhaustive), verify every window you can think of in Messenger to make sure a resource replaced for one reason in one window does not cause nasty effects in a different window. If a change you made causes an important problem in Messenger, windows will appear in black or won't display at all.

• When using several restrictions for your resource groups, make sure to test every possible combination, especially if your skin is intended to work on multiple versions of Messenger. Never authorize a version of Messenger that you have not tested with your skin and repeat your tests before releasing any update.

One last thing you should do before proceeding to the more specific sections of this documentation is to check out the schema reference of SkinInfo. Skins should always be developed in a real XML editor and learning how to use the schema file to validate your work will save you a lot of headaches. You'll then be able to proceed to Skins Essentials.

See Also

Introduction to Skinning, Integration with Messenger section, SkinInfo Information.