Creating a Custom UI Skin

This is a guide brought to you by LordGregGreg Beck to create a new user interface skin for Firestorm. It is a lot easier than it may look here, so just jump in and go for it!

Note: This is not how to create a new avatar skin, but rather the skin on the viewer.

Preliminary Information

  • First, the user should be generally familiar with how skins work
  • Skins are found in the Firestorm installation folder, in the sub-folder named “skins”
  • When the viewer first starts up, it will read the value of the saved setting “skinCurrent” and load the textures and colors from this folder (inside the skins folder)
  • Use the following steps to change the value of these settings:
    1. Select Ctrl + Alt + D to view the Advanced menu at the top of the viewer
    2. Go to Advanced → Debug Settings
    3. In the drop down area, type “skinCurrent”
    4. Change the value below, and then hit the “x” button
  • Images and files will first be read from the folder specified by the “skinCurrent” settings, and if they are not found, the files will be loaded from the “default” skin folder. Take advantage of this, and only include the desired textures the skin folder*

How To

  1. Go to the skins folder [Install Location]/skins
  2. Create a new folder with the name of the new skin (no spaces please)
  3. Inside this folder, make a new folder named “textures”
  4. Go into the folder “skins/default,” copy the files “colors_base.xml” and place them directly inside the new skin folder (not inside the textures folder)
  5. Now it is time to start changing textures!
    • To change a texture, copy it from the default skins folder, paste it into the new skin folder (yes, inside the texture folder), then use a program to change it
    • You can use any program that can read .tga files (e.g. Photoshop CS4, although there are many free programs like gimp → that will work just fine)
    • It is advisable to keep the same file extension, name, and dimensions as the original file.
    • Certain files may be difficult to open (such as the login j2c file), but sites such as → can be used to convert back and forth between formats and can also be handy at previewing the existing images before choosing what to modify
    • Don't be afraid to use files from other skins folders as a base to start with, just be sure to give their creators credit
  6. There are elements in the UI (User Interface) that are not controlled by textures (like the drop down menus). The information that controls these elements can be edited inside the “colors_base.xml” file that was copied into the new skin folder at the beginning. In the absence of a program that can properly edit “.xml” files, use →
  7. Test the new skin by changing the “skinCurrent” setting to the name of the new skin folder and re-logging. Trial and error rocks!


Q: What if I want to change the locations of certain UI elements or adjust the size of buttons?

A: Changes like these can be done by editing the files in the xui folder. However, such changes are normally frowned upon, because this information is typically read from the “default” skin folder where it can be easily changed without having to modify this file in every skin.

If you have a good modification to the xui, please talk to me about it personally to get it changed in the default skin or set as a viewer option.

Q: Can I just copy all the textures from the default folder and then edit them?

A: Yes, although this will normally result in a skin folder that is HUGE and unnecessary. Keep in mind that files not found in the skin folder are read from the default folder, so use this to save space.

If you find this method easier, be sure to delete unmodified files after you are done.


  • phoenix/custom_ui_skins.txt
  • Last modified: 2013/06/01 17:24
  • by miro.collas