Skinning HowTo/Basics

From Second Life Wiki
Jump to: navigation, search


This page describes the skinning capabilities of Viewer 1.20 and higher, and until it becomes the official viewer, assumes you have the 1.20 Release Candidate installed.

The skinning capabilities of the Second Life viewer are currently limited, but will be continuously improved through the development of the Skinning Project. This document sets out some basic information about the structure and loading of UI textures, colors, floaters as defined in XML.

Caution is always warranted when making changes to Second Life's installed files. In some cases the viewer will crash if an XML file is missing requisite node or element, or if such an element is malformed/misspelled. Making a backup copy of the unaltered files is highly recommended. If a malformed file prevents you from running the viewer without an immediate crash, you will need to restore the original file; or re-install Second Life from the download page.

Helpful tools

  • You will need an XML editor program for more easily making edits to an XML file.
    • One such editor that is free and open source is Komodo Edit.
  • Most Windows versions do not provide a thumbnail view for tga files (an essential feature while editing the skin files). Thumb Plug TGA is a free open source tga thumbnail plugin that will provide this functionality.
  • OpenSim is a free and open source version of the SL Simulator that you can run yourself. Next to your xml editor and imaging program, this will be your most important tool while skinning the viewer. Linden grid logins can be slow, or disabled, and are inconvenient for testing things like a one line edit of an XML file. Logins on a simulator running on your local machine are significantly faster than logins sent over the Internet, thus providing a quick and easy testbed for edits you've made to your viewer skin.

Its usefulness cannot be stressed enough when dealing with xml files that need a relog (such as colors.xml).

Useful menu items

  • Advanced > UI > Show Name Tooltops

Shows the XML file name or UI path of whatever element your mouse is hovering over.

  • Advanced > XUI > Edit UI...

A barest of bones xml file editor. Useful for testing spacing and layout for portions of the UI without relogging.

Creating new skins

New skins have already been created -- see the page Skinning - Post Your Skins Here.

For a full list of tutorials -- see the Skinning_HowTo/Basics#See_Also section.

If you would like to add tutorials with more than Basic information, you might choose to name your page along similar lines:

  • Skinning HowTo/Resize the toolbar
  • Skinning HowTo/Changing a highlighting effect
  • etc

Skins folder

The skins folder is \SecondLife\skins\[SKIN]\

Note: colors.xml and colors_base.xml are now associated with specific viewer skins. Each skin folder has its own copy of colors.xml and colors_base.xml


This file defines the basic colors of the UI as separately named nodes.

WARNING: It is highly advisable that you do NOT MAKE CHANGES to this file. Instead, copy & paste entries from this file to the next file (colors.xml) -- which overrides settings in colors_base.xml. The viewer will crash if any requisite entry is missing or malformed in colors_base.xml!


By default, this file has no entries. However this file can contains entries which will override any identically-named entry in colors_base.xml.

The format for specifying a color is


...where R,G,B,Opacity are in the range 0-255. For opacity, 128 is half opacity (ergo, half transparent).

Note: Opacity is also sometimes called the Alpha value.

For example, you could copy the following entries from colors_base.xml and paste them into colors.xml, where you can make adjustments:

<xml> <ChatHistoryBgColor value="0, 30, 80, 200" /> <ChatHistoryTextColor value="255, 255, 255, 255" /> <IMHistoryBgColor value="0, 30, 80, 128" /> <IMHistoryTextColor value="255, 255, 255, 255" /></xml>

For ease of use, there is also a fully commented colors.xml file on the wiki that labels each setting.

Textures folder

The \SecondLife\skins\[SKIN]\textures\ folder contains the Viewer's installed textures. This folder contains these subfolders:

  • bottomtray
  • build
  • containers
  • icons
  • navbar
  • quick_tips
  • taskpanel
  • widgets
  • windows
  • world

Textures file

The file textures.xml contains metadata about how to load, display, and scale textures for rendering in the UI. Images do *NOT* have to appear in this file in order to use them as textures in the UI. Simply refer to them by filename (relative to textures directory).

NOTE: if you want to reuse an image file with different metadata, simply create a new texture entry with the same filename but different name

Here is an example of some simple entries in textures.xml. They have no stretch rectangle defined, not preloaded, are not referenced by UUID: <xml>



Scaling rectangles

UI art textures are often stretched (scaled) in various resizing to accommodate different widths or heights of the same widget. In order to preserve a crisp look of edges, part of the image is 'preserved' or protected to not be scaled. By default, the stretching will preserve 8 pixels on all sides of the image.

To change this default, set the <scale_rect /> element. <xml><scale_rect left="x1" top="y1" right="x2" bottom="y2" /></xml>

The pixel coordinates of the image here are counted from a (0,0) position that refers to the LEFT BOTTOM corner. (Like a Cartesian coordinate system in quadrant I.)

For example, this image toolbar_btn_selected.tga has dimensions of 128 pixels width x 24 pixels height: Toolbar btn selected.tga.jpg.

The following <scale_rect /> code defines a stretchable rectangle that preserves 26 pixels to its left and right:

<xml> <toolbar_btn_selected.tga>

       <scale_rect left="26" top="24" right="102" bottom="0" />

It results in a display that looks like this:

Toolbar btn selected rect example1.jpg




Setting preload="true" means the texture is loaded at runtime, before the login screen appears. In general it is best to preload as few textures as possible, since this affects memory usage of the viewer.



 <checkbox_disabled_false.tga preload="true" />


XUI folder

XUI (pronounced zoo-e) stands for XML User Interface. XUI consists of a custom XML data format for describing Second Life's user interface, and the code which processes that data and integrates it with the Second Life viewer. The XUI folder is \SecondLife\skins\[SKIN]\xui\.

Language folders

When you select a language in the Viewer (Preferences > General > Language), then the files in the appropriate [lang] folder are loaded hierarchically on top of the en-us version, starting the next time the viewer is run. The language folder is \SecondLife\skins\[SKIN]\xui\[lang], where [lang] is the locale code, such as:

  • de German
  • es Spanish - not officially supported nor updated regularly
  • fr French - not officially supported nor updated regularly
  • ja Japanese
  • zh Simplified Chinese - not officially supported nor updated regularly

If an element (or entire file) is missing in the [lang] version, then the Viewer falls back to the value specified in the en-us version.

The \[lang] version of floater or panel contains only the minimum values desired to override from the en-us version.

  • Generally this includes only a) the matching name= property and b) the translated string/label=.
  • However in some cases a separate per-language width may be specified, in order to adjust the size of a particular widget for that language only.

The en-us folder

This folder is where the size of floaters, panels, and widgets are defined, as well the text strings in English used by the viewer.

IMPORTANT NOTE: Do not ever change any name= parameters from the existing (English) name. The name= parameter is used to identify each node as expected when called in the viewer code, and to match it to other translations of the same node.


Skinning HowTo/XUI Text describes the XUI elements and attributes related to text strings. A further discussion of the English text strings and how these are manipulated to make translations can be found at How to Localize Your World


For purposes of skinning, it is important to note that there are still 2 XML files at this time which specify a color from within the \en-us folder.

The file \skins\default\xui\en-us\floater_instant_message_ad_hoc.xml contains a <text_editor /> widget with a bg_readonly_color, bg_writeable_color, text_color, and text_readonly_color:

Widget named "im_history" <xml><text_editor type="string" length="1" bg_readonly_color="ChatHistoryBgColor" bg_writeable_color="ChatHistoryBgColor" bottom="-265" embedded_items="false" enabled="false" follows="left|top|right|bottom" font="SansSerif" height="239" left="5" max_length="2147483647" mouse_opaque="true" name="im_history" text_color="ChatHistoryTextColor" text_readonly_color="ChatHistoryTextColor" width="490" word_wrap="true" /></xml>

These four values could be set as either a named entry in colors.xml (bg_readonly_color="ChatHistoryBgColor") or directly as an R,G,B,O value (bg_readonly_color="50, 115, 185, 150")

    • Note: you can set a text color to any such <text_editor /> widget in the XML using the text_color= parameter.

The file \skins\default\xui\en-us\floater_chat_history.xml contains a couple <text_editor /> widget with a bg_readonly_color, bg_writeable_color, text_color, and text_readonly_color:

Example: Widget named "Chat History Editor"

<xml><text_editor type="string" length="1" bottom="28" embedded_items="false" enabled="false" follows="left|top|right|bottom" font="SansSerif" height="74" left="5" max_length="2147483647" mouse_opaque="true" name="Chat History Editor" text_color="ChatHistoryTextColor" text_readonly_color="ChatHistoryTextColor" width="299" bg_readonly_color="ChatHistoryBgColor" bg_writeable_color="ChatHistoryBgColor" word_wrap="true" /></xml>

Example: widget named "Chat History Editor with mute"

<xml><text_editor type="string" length="1" bottom="28" embedded_items="false" enabled="false" follows="left|top|right|bottom" font="SansSerif" height="74" left="5" max_length="2147483647" mouse_opaque="true" name="Chat History Editor with mute" text_color="ChatHistoryTextColor" text_readonly_color="ChatHistoryTextColor" width="300" word_wrap="true" bg_readonly_color="ChatHistoryBgColor" bg_writeable_color="ChatHistoryBgColor"/></xml>


The XML files in this folder are also where you describe the configuration or structure of the floaters, panels, menus, etc. See

See also

Other tutorials

Slightly outdated Tutorials

Helpful Resources

Resident Created Skins