Tutorial:Temporary
From XfireWiki
|
This article is not complete yet. You can help by expanding it. |
Contents |
General
This tutorial is made by the community for the community of skinning Xfire. There are various ways to create a design, to cut the design and code it, but this way is in my thoughts the easiest and fastest to learn.
If you want to use a different way to do things, that is your choice. This tutorial will teach you all the basics of skinning Xfire. All you need to know before you start with this tutorial is how to use a graphics program and how the structure of an XML document looks like.
If you think there has left out a certain element in this tutorial, feel free to post about it in the forum of the Xfire website, and we will see what we can do.
Good luck, and feel free to ask questions.
Design
- Don't use Anti-aliasing; Alpha is not supported.
- Use pink (#FF00FF) as transparent color.
- Best to use a graphics program with layers.
- Make sure if you want your skin to be resizable, that the design needs to be adjustable to that.
Slicing
- Every component consists of 1, 3, 6, or 9 images.
topleft | top | topright --------------------------------- left | middle | right --------------------------------- bottomleft | bottom | bottomright
- All middle images (top, left, middle, right, bottom) are repeated or stretched in the skin.
- Cut up the design and place all separate components in a separate file.
- Every image that needs a transparent background needs to be saved on a pink background.
Coding
Basics
1. Create info.xml.
2. Create skin.xml.
3. Create strings.xml. You can copy the content from XMLFiles:strings.xml.
4. Create an empty components.xml with only <Components></Components> in it.
5. Add the first entry:
- The first component being added is the component that determines the basic settings of the window. This component doesn't have any graphics included with it.
<Component Name="MainWindow" <!-- Unique name for the component so it can be identified --> Class="MainWindow" <!-- Type of component (see classes) --> MinWidth="248" <!-- The minimal width of the component in case it can be resized in the skin --> MinHeight="340" <!-- The minimal height of the component in case it can be resized in the skin --> />
6. Create a new empty file called mainwindow.xml and add the the following text to the file:
<Tile Name="StandardMainWindow" ResizeX="100" ResizeY="100" Component="MainWindow"> <!-- Name defines the unique name within mainwindow.xml ResizeX and ResizeY are showing the percentage the middle parts are resizable Component is the name of the component that is used in components.xml --> </Tile>
- Now we created our first tile for our skin. This is the main outline for our skin.
- Inside this tile we can add all the visual components that are used by the skin. But before we can do that we must add some components to our components.xml
7. Create the tile that shows the main layout of the skin. Add the following information to components.xml.
<Component Name="MainBackground" <!-- Unique name for the component so it can be identified --> Class="Tile" <!-- Type of component (see classes) --> Color="MainBackground" <!-- The colorgroup name used in themes.xml to change the color of this component --> > <Images> <!-- Add the various images for this component --> <Image Type="topleft">main/topleft.gif</Image> <Image Type="top">main/top.gif</Image> <Image Type="topright">main/topright.gif</Image> <Image Type="left">main/left.gif</Image> <Image Type="middle">main/middle.gif</Image> <Image Type="right">main/right.gif</Image> <Image Type="bottomleft">main/bottomleft.gif</Image> <Image Type="bottom">main/bottom.gif</Image> <Image Type="bottomright">main/bottomright.gif</Image> </Images> </Component>
- As you see this tile exists out of 9 separate images to create the whole background of the skin. These images are all stored between the <Images>-tag.
- This component is now ready to be used in the mainwindow.xml.
8. Add the previous created tile to the mainwindow.xml to let it show up on the skin.
- This information needs to be added within the tile with the main information.
<Tile Name="MainBackground" X="0" Y="0" ResizeX="100" ResizeY="100" Component="MainBackground"> <!-- Important in this part is that is defined that the used component can be streched over the X- and Y- side. Note: The name does not have to be the same as the component. Although if a component is only used once within a window this works the easiest for me. --> </Tile>
- Now you added the first graphical tile to the skin, and the skin can be tested.
Before we can test our skin, we have to make sure Xfire will be able to use all the other files defined in our skin.xml. For this we need to create some dummy files just so we can test the skin.
These files will be edited along our way as we continue our skin. But for now they will just contain some data so Xfire thinks the skin is complete.
Following are the filename with the content of the file:
- themes.xml →
<Themes></Themes> - popups.xml →
<Popups></Popups> - chatwindow.xml →
<Tile Name="ChatWindow" Component="MainWindow"></Tile> - groupchatwindow.xml →
<Tile Name="GroupChatWindow" Component="MainWindow"></Tile> - ingamemainwindow.xml →
<Tile Name="IngameMainWindow" Component="MainWindow"></Tile> - ingamealertwindow.xml →
<Tile Name="IngameAlertWindow" Component="MainWindow"></Tile>
Now you are really done to see what you just created and if everything worked out well.
9. Restart Xfire, choose your skin to test it, and see the result.
 |
To test every change in your skin, you can right click the Xfire icon in the bottom right corner of your screen, and choose skins and then the name of your skin. This way the current skin will be reloaded and your changes will be visible. |
Congratulations, you just made your first Xfire skin! Of course we need to add various components. Follow the upcoming steps to continue.
Tiles
- Tiles are the basic components in a skin.
- A tile is used as a static component or graphic in a skin.
Now we are going to add the first component to our skin. (Xfire logo)
1. Add the component to the components.xml:
<Component Name="Logo" Class="Tile" <!-- The class of this static image is a Tile --> Stretch="ToContent" <!-- This defines the size of the component to be the size of the image itself --> Color="MainWindow" > <Images> <Image Type="middle">main/logo.gif</Image> <!-- This image doesn't need to be resizable, so only middle is used --> </Images> </Component>
2. Now we need to add this component to the skin itself.
3. Add component Logo to the MainBackground in mainwindow.xml:
<Tile Name="Logo" X="5" Y="5" Component="Logo"> <!-- X and Y are defining the coordinates of the component inside the previous component (MainBackground) --> </Tile>
4. Test the changes by reloading the skin and see if it worked.
Buttons
1. Add a button to the components.xml (close button)
2. Place the button in the mainwindow.xml to let it show up in the skin.
More to be added...
