Skinning in Xfire

Last edited April 18, 2005

Xfire uses an .ini skinning system. Currently the "skin" is given its own directory and all its respective skin files are located inside it. The skinning process is limited to the Xfire main window and the Xfire chat windows. The chat window is optional if the main window is skinned. The skins can be multilingual. They can have different color themes. Xfire skins can popout other skins that are attached. There are standard events that can be triggered such as double-clicks, right mouse button down and accelerator keys.

The main window itself usually consists of an ad, buddy list, server list and file download list. The friends list displays the user's friends, friends of friends and offline friends. If the small ad area is not explicitly added to a skin, it is added automatically inside the friends list area. In order to be an Xfire approved skin an ad area must be visible on the window that contains a friends list.

An Xfire skin contains a minimum of 1 .ini file that describes the Xfire main window. The skins are located in a directory off of the working directory of Xfire.

i.e. Xfire/Skins/MyNewSkin/

The file name of the .ini skin file must be identical (non case sensitive) to the directory it is in.

i.e. Xfire/Skins/MyNewSkin/mynewskin.ini

All skin design will involve making changes then testing them out. Run Xfire. Edit your skin inside the Xfire/Skins directory then from the menu pick your skin again from the list. This will trigger a reload of your skin and you can then see the changes.

The following skinning glossary has been provided as a reference: Skinning Glossary/Index

Basic Structure
Tutorials
Different Ini Files
Graphical File Formats

Basic Structure:

The basic structure of each skin is:

[WindowName] Window definition
WindowData

Window(N).(Name)=(Value) Child definition

The window data consists of things like the minimum height, width and graphics. The child data is usually the name, location, justification and graphics of the child window for "WindowName".

Tutorials

The tutorials section is broken up into 3 sections which get increasingly difficult.
Note: The beginner tutorials as well as the actual "Xfire" skin have .zip files which need to be uncompressed into the Xfire/Skins/ directory.

Different Ini Files

A skin can comprise of ini files for the skin window, chat window, color themes, strings (1 for each language possibly) and for skins used to popout ( from SkinLauncher tiles). Xfire skin has 5 .ini files. Let's go over each one.

Xfire.ini This is the main window that is launched after successful login.
XfireChatSkin.ini This is the chat window's skin .ini file specified from ChatSkin=XfireChatSkin inside Xfire.ini
XfireGroupChatSkin.ini This is the group chat window's skin .ini file specified from GroupChatSkin=XfireGroupChatSkin inside Xfire.ini
XfireInfoSkin.ini This is the popout from the right side of the chat and main window.
XfireThemes.ini All the color groups are themselves grouped under sections with theme names like "Ruby Red" or "Orange Peel". This decides the colors to be applied to all the above skins.
strings.ini Strings in Xfire.ini are specified here. The values you see are resource ids into the xfirel_lang_XX.dll where XX is the country code. Since other skins may not want to use our strings, a text entry surrounded by "" will suffice. XfireMenu="My own Menu" will work. If you supply a strings_XX.ini where XX is the country code, then you can internationalize your own skin's strings. Any entries found in strings_XX.ini will override those in strings.ini

Graphical File Formats

Two file types can be used. .GIF and .PNG. It is highly suggested to use .GIF files as they allow easy manipulation of the color palette. Animated GIF files are also supported. Any graphic in the skin can have a ColorGroup associated with it. This ColorGroup adds its value to each of the 255 palette entries in a .GIF file except for entry #0. Entry 0 is left alone to allow the transparent color (255,0,255) to be placed there and left unmolested by a color shift. If no ColorGroup will be applied to a certain graphic then its palette is unimportant. It is highly suggested to make most of your skin greyscale to allow for maximum of flexibility by way of simple user customization of colors.