Back to main instructions.

Skinning Glossary/Index

Accelerator
ActionEvents
BtnDown
ChatSkin
Class
ColorGroupTheme
ControlGroupId
Cursor
Default
Disabled
events
Graphics
Graphics definitions
GroupChatSkin
GroupId
Hover
IndentLeft
IndentRight
IndentTop
IndentBottom
JustX
JustY
ListViews
MinWidth
MinHeight
MouseOver
Name
OutdentLeft
OutdentRight
OutdentTop
OutdentBottom
Overlay
PushType
ResizeX
ResizeY
Scrollbars
Skin
Stretch
Text
Tooltip
TooltipColor
TooltipTextColor
Triggers
Version
Window(N)
WindowFocus
X
Y
Z

Accelerator

Accelerators are used for pushbuttons and derived classes such as Menus or SkinLaunchers.
Example:

[FileMenu]
Class=Menu
Hover.ColorGroup=MenuHoverCG
Hover.middle=menubar-middle.gif
BtnDown.ColorGroup=MenuDownCG
BtnDown.middle=menubar-middle.gif
Action.lbtndown=MenuFile
Accelerator=ALT(f)

Location: Child definition or window definition.
index

ActionEvents

The following section describes Xfire application events and the corresponding actions that can be triggered.

Here are some examples of how to use these in your own skins:

Action.<Event>=<Action>
Action.lbtndown=MenuTool
Action.doubleclick=AppMaximize
Action.rclick=ContextMenuSys
Action.lbtndown=AppLaunchUrl(http://www.xfire.com/)
Action.onserversfocus=AnimationStart(GroupId=85,Type=Repeat,Delay=7,Repeat=-1)




Location: Child definition
index

BtnDown

One of the 5 Graphics states.  Graphics, BtnDown, Hover, Disabled. and Overlay.  BtnDown is a group definition. It can only occur in class types that are derived from pushbutton. (skinlauncher, menu, pushbutton). This group can have the following names.


The rest are graphic file definitions

Location: Child definition
index

ChatSkin

This is declared only in the [MainWindow] section. This name specifies the .ini file to be used for the skinning of the chat window.

ChatSkin=XfireChatSkin

Location: MainWindow Window definition only.
index

Class

Class tells Xfire what type of tile the window is. Possible values are:

	AdView	Every skin must have a window defined as an AdView. An AdView window will display a random Advertisement from Xfire. The sample below can be copied and pasted directly into your skin. Note: If a minimum height and width specified is smaller than this you will get unexpected results in your skin. [AdView] Class=AdView MinWidth=234 MinHeight=60
	Animation	This class is used to specify an animation frame by frame.   It allows each frame to have an associated color group. [SomeTile] Class=Tile Graphics.middle=ScrewAnimation ... [ScrewAnimation] Class=Animation Frame1.Graphic=screw1.gif Frame1.ColorGroup=RGBA(0,0,0,0) Frame2.Graphic=screw2.gif Frame2.ColorGroup=RGBA(-34,-11,57,0) Frame3.Graphic=screw3.gif Frame3.ColorGroup=(-34,-11,127,0)
	BuddyListView	This class defines the list view used for our friends list. You have options to set the text data (font, style, size, colors) as well as setting up custom graphics for list view headers, scrollbars, etc... [BuddyView] Class=BuddyListView WindowFocus=true ColorGroup=BuddyViewBG Text.color_friend=BuddyViewFriendText Text.color_fof=BuddyViewFofText Text.color_offline=BuddyViewOfflineText Text.color_selected=BuddyViewSelected Text.color_nonfocus=BuddyViewNonFocus Text.color_selectedtext=BuddyViewSelectedText Text.font=Arial Text.bold=true Text.size=11 Text.color_header=HeaderText Graphics.HeaderColor=HeaderColor Graphics.HeaderLeft=LISTVIEWHEADERLEFT Graphics.HeaderMiddle=LISTVIEWHEADERMIDDLE Graphics.HeaderRight=LISTVIEWHEADERRIGHT Graphics.HeaderArrowUp=LISTVIEWHEADERARROWUP Graphics.HeaderArrowDown=LISTVIEWHEADERARROWDOWN Scrollbar=DefaultScrollbar Graphics.Collapsed=ARROWRIGHT Graphics.Expanded=ARROWDOWN
	ChatArea	This class is used to display the ChatArea or chat history. This would be the top window area in the regular Xfire chat window. This class allows you to specify text data and a scrollbar. [ChatArea] Class=ChatArea ColorGroup=ChatViewCG Text.color_other=ChatOtherCG Text.color_othertext=ChatOtherTextCG Text.color_personal=ChatPersonalCG Text.color_personaltext=ChatPersonalTextCG Scrollbar=DefaultScrollbar
	ChatEdit	This class is used to display the ChatEdit area of our chat window. This would be the bottom window area in the regular Xfire chat window. The window is actually a rich edit control and allows the user to enter his chat message to send. [ChatEdit] Class=ChatEdit WindowFocus=true ColorGroup=ChatViewCG Text.color=ChatPersonalTextCG Scrollbar=DefaultScrollbar
	DownloadView	This class defines the list view used for our file downloads list. The details are exactly the same as the BuddyListView class.
	MainWindow	MainWindow is used only once.  It must be used in each windows skin.
	Menu	Menu is used to specify those tiles which launch menus. It is a derivation of PushButton. [FileMenu] Class=Menu Hover.ColorGroup=MenuHoverCG Hover.middle=MENUBARMIDDLE BtnDown.ColorGroup=MenuDownCG BtnDown.middle=MENUBARMIDDLE Action.lbtndown=MenuFile Accelerator=ALT("XfireMenu")
	PushButton	PushButtons are used to simulate buttons in the skin. They allow the action event "click". [CloseBox] Class=PushButton Stretch=ToContent Graphics.ColorGroup=ButtonCG Hover.ColorGroup=ButtonCG BtnDown.ColorGroup=ButtonCG Graphics.middle=BUTTONCLOSENORM Hover.middle=BUTTONCLOSEHOVER BtnDown.middle=BUTTONCLOSEDOWN Action.click=AppMinimize Tooltip=MinimizeButtonTip
	Scrollbar	This class defines scrollbars for use with the skin. Make sure and define graphics for the following: ScrollLeft, ScrollRight, ScrollUp, ScrollDown, ScrollHorzGripperLeft, ScrollHorzGripperMiddle, ScollHorzGripperRight, ScrollHorzGripperOverlay, ScrollVertGripperTop, ScrollVertGripperMiddle, ScrollVertGripperBottom, ScrollVertGripperOverlay, ScrollHorzGutterLeft, ScrollHorzGutterMiddle, ScrollHorzGutterRight, ScrollHorzGutterTop, ScrollHorzGutterMiddle and ScrollHorzGutterBottom. [DefaultScrollbar] Class=Scrollbar Graphics.ColorGroup=ScrollbarColor Graphics.ColorGroupBG=ScrollbarColorBG Graphics.ScrollLeft=SCROLLLEFTNORM Hover.ScrollLeft=SCROLLLEFTHOVER BtnDown.ScrollLeft=SCROLLLEFTDOWN Disabled.ScrollLeft=SCROLLLEFTDISABLED ...
	ServerView	This class defines the list view used for our servers list. The details are exactly the same as the BuddyListView class.
	SkinLauncher	This is an advanced PushButton type which launches a separate skin off either the right side or bottom of a skin window.   It allows the definition of the "Skin" group. [InfoViewButton] Class=SkinLauncher Graphics.middle=INFOVIEWBUTTON Hover.middle=INFOVIEWBUTTONHOVER Overlay.middle=INFOVIEWBUTTONARROWRIGHT Stretch=ToContent Action.click=LaunchSkin Accelerator=ALT(VK_RIGHT) Tooltip=ExpandButtonTip Skin.Name=XfireInfoSkin Skin.SaveState=1 Skin.JustX=LEFT Skin.JustY=TOP Skin.X=RightOuterEdge.RIGHT Skin.Y=67 Skin.Z=5 Skin.IndentBottom=82
	StatusView	This class is used to specify a special status view edit window.   The Xfire skin uses this to display the users status. [StatusEdit] Class=StatusView MinHeight=15 Text.font=Arial Text.bold=false Text.size=11 Text.bold=true Text.color=StatusCG Text.background=StatusBackgroundCG
	TabControl	A TabControl class is used to simulate a window which behaves as if it has a tab control. In the Xfire skin there are several tiles defined as a TabControl class. The list view which switches between friends, servers and file downloads. The buttons you see on the bottom which allow you to chat when on the friends view, but join game when on server view are examples of tabcontrols.
	Text	Class Text is used to display text. It allows the "Text" name group to be used
	Tile	Standard class. Most of your Classes will be "Tile"

Location: Window definition only
index

ColorGroupTheme

This is declared only in the [MainWindow] section. This name specifies the .ini file to be used for the color themes of all the skinned windows.

ColorGroupTheme=XfireThemes

Location: MainWindow Window definition only.
index

ControlGroupId

ControlGroupId and GroupId function in almost the same way except that a ControlGroupID is only used in a window defined as Class=TabControl. By assigning a numeric value to ControlGroupId we can later send a message to all windows/tiles with a particular ID value by using the GroupMessage syntax.

Location: Windows defined as Class=TabControl only.
index

Cursor

This tells the skin which cursor to display while the mouse is over a given tile.


Location: Window definition or Child definition
index

Default

The default statment tells the skin that we want a default event to take place as soon as the skin is loaded. For instance we might want to fake a user clicking on the servers tab by setting Default=click on the servers tab window. This would cause the skin to load with the servers tab enabled instead of the friends tab.

Any event listed in the ActionEvents list can be used here.

Location: Window definition or Child definition
index

Disabled

The only way to achieve a disabled state is to add a trigger to this graphic state.  One of the 5 Graphics states.  Graphics, BtnDown, Hover, Disabled. and Overlay.  Disabled is a group definition. This group can have the following names.


The rest are graphic file definitions

Location: Child definition
index

events

Used to allow the mouse events to pass through this tile.  Perhaps its just a tile for decoration and it is desired for the click to pass through to the tile behind it.

events=Transparent

index

Graphics

One of the 5 Graphics states.  Graphics, BtnDown, Hover, Disabled. and Overlay.  Graphics is a group definition. This group can have the following names.


The rest are graphic file definitions

Location: Child definition
index

Graphics definitions

Inside each of the 5 Graphics states are graphics definitions.  These describe how to draw a given tile.
Graphics  default
Hover mouse is hovering over the tile
BtnDown for pushbutton classes. Btndown is when the left mouse button is pressed over this tile
Disabled set by some kind of trigger, disabled is most likely used as the state where the pushbutton cannot be pressed. a disabled state will also ignore natural transitions of state caused by button down or mouse hover.  Only from a trigger will the tile leave the disabled state
Overlay pushbuttons only. overlay is drawn after the rest of the tile is drawn.  This allows a colorization of a pushbutton while having an overlay of a constant separate color.

each state has a definition.  Any tile can be broken down into 9 different sections.

upperleft	top	upperright
left	middle	right
bottomleft	bottom	bottomright

As a technical note: Tiles are always drawn in VERTICAL strips.  left then right then the middle strip tiled.  You may get odd results if you make the widths different for each vertical section. As in the table above, try to make the green sections point to graphics of the same width.  This is especially true of the middle column since it will be repeated to fill in the area between the green and red.

Take a very wide tile.  The green column is made up of 10 pixel wide images. The red column is made up of 15 pixel wide images.  The yellow column is made up of 100 pixel width images.  If the tile were 500 pixels wide the result would look like this.

UL(10pixels wide)	T(100pixels wide)	T(100 pixels wide)	T(100 pixels wide)	T(100 pixels wide)	T(75 pixels wide)	UR(15 pixels wide)
L	M	M	M	M	M	R
BL	B	B	B	B	B	LR

Where the last middle column would be 80 pixels wide only.  There is nothing disallowed with making different sizes for each column, just be aware of the consequences.

ColorGroup is a name located in the window definition that allows differentiation of graphic states or for color customization via themes.  It is recommended to make as much of the skin with  greyscale images then apply color to them with a ColorGroup.  ColorGroups when used with graphic definitions are relative color shifts that are applied to the palette used by each graphic in that definition. See the section on .GIF format in the main instructions.  ColorGroups can also be used with "Text" group definitions to directly set the color.

Animate allows you to specify that this particular graphics object (Graphic, BtnDown, Hover, Disabled) is an animation. For instance you may have defined a Graphic.middle=myfile.gif. If this is an animated GIF file it will by default only display frame 1 of the animation. By adding a .Animate statement to the graphics object we can tell the skinning system to animate the object. Examples include: Graphic.Animate=Repeat(Delay=0,Repeat=-1) or Hover.Animate=Once(Delay=5).
index

GroupChatSkin

This is declared only in the [MainWindow] section. This name specifies the .ini file to be used for the skinning of the group chat window.

GroupChatSkin=XfireGroupChatSkin

Location: MainWindow Window definition only.
index

GroupId

GroupId allows you to assign a numeric value to a window that we can later send a message to by using the GroupMessage syntax.

Location: Window definition only.
index

Hover

Hover is triggered by the user placing the mouse cursor over the given tile. One of the 5 Graphics states.  Graphics, BtnDown, Hover, Disabled. and Overlay.  Disabled is a group definition. This group can have the following names.


The rest are graphic file definitions

Location: Child definition
index

Indent

Once a tile is given its position and size, indentions are applied.
IndentLeft
IndentRight
IndentTop
IndentBottom

A 100x100 at position x50, y50 tile with IndentLeft of 10 and IndentBottom of 15 resolves to a tile 90x85 at position x60, y50
Location: child or window definition

index

JustX, JustY

By default justification is LEFT and TOP.  Justification of RIGHT will align the right-hand side of the tile on the right-hand side of its parent. Adjustments to X or Y will be reversed on a RIGHT or BOTTOM tile respectively. Justification CENTER will align the tile so that its middle is in the middle of the parent.  JustX or Y can have CENTER.

Location: child or window. recommended to be put in the child definition so the tile can be reused.
index

MinWidth, MinHeight

The minimum settings of a tile also specify the default size of the tile if no resizing was specified.. The tile can become smaller than the minwidth and minheight by using indent.

Location: child or  window definition. suggested for window definition.
index

MouseOver

MouseOver is a boolean setting that allows a menutile to not transfer focus when a mouse hovers over it.  Standard menus once activated will activate the next menutile that is hovered over.  The system menu is an example of a menu that does not have mouse over activation.


Location: window definition
index

Name

Name defines the name of the child window.  Window(N) is a valid name where N is a number from 0 to 999.  The order of children is not important.  It is possible to put Window10 before Window1.  The only important thing is that 1 and 10 are different and they specify what child window a given name is modifying.


Location: Child definition
index

Outdent

Once a tile is given its position and size, outdents are applied.


A 100x100 at position x50, y50 tile with OutdentLeft of 10 and OutdentBottom of 15 resolves to a tile 110x115 at position x40, y50
Location: child or window definition

index

ResizeX, ResizeY

This specification decides whether the tile will resize itself relative to its parent.  The setting by default is 0.  This means that the MinWidth or Height will be used.  The ranges are from 0 to 100.  100 means that for every pixel gained in either the X or Y direction of this tiles parent will be applied to the child. 50 means that half of the parents size is applied to this tile.  If the MainWindow is allowed to be resized then the skinned window is allowed to be resized.  The main window should almost always be set to ResizeX=100 and ResizeY=100

Location: Window definition or child definition

index

Stretch

Stretch is a way to bind a graphical tile to a size.  The two values are "ToFit" and "ToContent".  "ToFit" means that the graphic inside will be stretched to fill the size of the tile.  The first graphic listed is drawn.  Adding more than one graphic to the graphic definition of a "ToFit" tile is pointless.  "ToContent" means that the minimum amount of the width and height will be dictated by the first specified graphic inside.

Location: child or window definition. usually window definition

index

Skin

Skin is a type of child window specification.   Only inside a window definition of a SkinLauncher.   It is treated very much like a Window(N) definition.  It defines where the skin will be located when launched.


Location: window definition of a skinlauncher tile

index

Text

Text is a group of name/value pairs that is used by "Text" tiles.   The following is a list of names used by Text:

The other place that the Text group name is used is on BuddyListView
The last specially defined text definition is background. This is used for the "StatusEdit" class tile.  The StatusEdit is the edit control used for the current user's status.  background sets the background color of  the edit control.

Location : Window definition only

index

Tooltip

Tooltip can be assigned to any tile that is derived from the pushbutton class.  (Menu or skin launcher or pushbutton) It can be straight text or an indirect link to the strings.ini files.


Location: Window definition only

index

TooltipColor TooltipTextColor

TooltipColor and TooltipTextColor are for MainWindow class only.  They define the tooltip color and text color for the skin.  They point to ColorGroups that have direct control over the color.


Location: MainWindow window definition only

index

Triggers

Triggers are used to set the state of graphics objects. Triggers are boolean in nature in that something is either TRUE or FALSE. Generally we use triggers to toggle between a PushButtons Normal and Disabled graphics object depending on the state of a particular trigger. For example:


Possible trigger values are:


index

Version

Version is used inside the [Version] section of the first skinned window.  It will contain all the meta data for the skin.  Author name, date created etc.  "Version" as a name is an integer identifier that will be compared at some point to the known version of the most current skin with that name.  Possibly in the future this will be used to update skins automatically as authors develop new versions of a skin.


Location:  its own section

index

Window(N)

Window(N) specifies a child window definition. Window(N) is a valid name where N is a number from 0 to 999.  The order of children is not totally important.  It is possible to put Window10 before Window1.  The only important thing is that 1 and 10 are different and they specify what child window a given name is modifying.  The order matters for reasons or relative positioning.  The parent window lays out its children in sequential order.  If one child window depends on the location of another then you should place the depending child definition last.


Location: Window definition

index


X,Y.Z
X,Y and Z should be specified for a window in the child definition.  X and Y can have relative positions to other siblings as well as absolute values.  Any absolute values are cumulative with the relative values or other absolute values.  For example


This will place the Window of name "foo" 15 pixels to the right of the Titlebar.  Titlebar in this example must be assumed to be a sibling of foo.  Hopefully "Titlebar"'s  child definition is located above Window4.  Relative locations are "LEFT,TOP,RIGHT,BOTTOM".

The Z order of the window is specified by setting Z to a numeric value. By default a window is created with a default Z order of 0. If you want a tile or window to display on top of another you would set a higher Z order number.

Location: Child or window definition. Preferably child to allow reuse of the window definition

index