Skinning How To/Add 3rd party skins to the skins preferences panel

Important!

Following the instructions below requires modifying some system files in your <syntaxhighlight lang="text" class="" id="" style="" inline="1">\SecondLife</syntaxhighlight> or <syntaxhighlight lang="text" class="" id="" style="" inline="1">\SecondLifeReleaseCandidate</syntaxhighlight> folder (on your hard drive) from what is installed by the software from Linden Lab. Be very careful, since these changes are not supported by Linden Lab, and you may break your installation!

Intro

From 1.20 RC13 on, skins can now be switched in the new Skins preference panel. However, this panel only provides switching for the two current official skins. This tutorial shows you how modify that so users can switch to your custom skin as well.

Create your skin folder

Your skin needs to reside in a unique directory, with a unique set of artwork and a unique <syntaxhighlight lang="text" class="" id="" style="" inline="1">colors.xml</syntaxhighlight> file.

1. Browse to your Second Life install directory, which, on Windows, is the \SecondLifeReleaseCandidate\skins\ folder in Release Candidates, and \SecondLife\skins\ in Release versions; under macOS, they're under /Applications/Second Life Viewer.app/Contents/Resources/skins
2. Create a new folder. Name it after your skin. (For example, in Windows, C:\Program Files\SecondLifeReleaseCandidate\skins\new_skin\, replacing <syntaxhighlight lang="text" class="" id="" style="" inline="1">new_skin</syntaxhighlight> with your own skin name).

Create your skin image

The viewer comes with an XML file template you can use to create a consistent image for your skin. The file name is <syntaxhighlight lang="text" class="" id="" style="" inline="1">floater_skin_preview_template.xml</syntaxhighlight>. There's no standard way to use it yet, but you should be able to replace the contents of another existing floater with this file and load it that way.

Add your files

In this folder, copy the <syntaxhighlight lang="text" class="" id="" style="" inline="1">colors.xml</syntaxhighlight> and <syntaxhighlight lang="text" class="" id="" style="" inline="1">colors_base.xml</syntaxhighlight> files your skin uses. For example, if your skin is a modification of the Silver skin's color scheme, copy the <syntaxhighlight lang="text" class="" id="" style="" inline="1">colors_base.xml</syntaxhighlight> file from the \silver\ directory to \new_skin\.

(NOTE: You will need <syntaxhighlight lang="text" class="" id="" style="" inline="1">colors_base.xml</syntaxhighlight> for skin switching to work correctly).

Next, create a \textures\ directory in \new_skin\. If your skin is a modification of the Silver or Classic skin, copy the contents from \silver\textures\ or \default\textures\ to your skin's \textures\ folder, adding any files you may have modified on top of this. If your skin is a complete rework from the ground up, copy your artwork and textures.xml to \new_skin\textures\ instead.

(NOTE: You will need a full \new_skin\textures\ folder for skin switching to work correctly).

If your skin modifies XML files, create an \xui\ directory in \new_skin\.

• If the modification is a translation, add the appropriate directory tree for your language, and include any modified XML files there. For example, \SecondLifeReleaseCandidate\skins\new_skin\xui\fr\floater_tools.xml to use a different French translation for the tools window.

• If your skin modifies the layout of XML files, you need to put them in the \en-us\ directory. For example, \SecondLifeReleaseCandidate\skins\new_skin\xui\en-us\floater_tools.xml to use a different layout for the tools window.

Modify panel_preferences_skins.xml

<syntaxhighlight lang="text" class="" id="" style="" inline="1">panel_preferences_skins.xml</syntaxhighlight> contains the listing for skins you can switch to. You need to modify the version in the default <syntaxhighlight lang="text" class="" id="" style="" inline="1">en-us</syntaxhighlight> folder (\skins\default\xui\en-us\) so that all skins can access your skin.

Open the file in a text or XML editor and scroll to the bottom. There, you'll see two <syntaxhighlight lang="text" class="" id="" style="" inline="1">radio_group</syntaxhighlight> options:

<syntaxhighlight lang="html"> <radio_group bottom="0" draw_border="false" follows="top|left" height="380" left="12" name="skin_selection" width="480">

   <radio_item bottom="-20" height="20" left="0" name="default" width="480">
     Default
   </radio_item>
   <radio_item bottom="-180" height="20" left="0" name="silver" width="480">
     Silver
   </radio_item>

[...] </syntaxhighlight>

And two buttons:

<syntaxhighlight lang="html">

 <button left="130" bottom="-160" width="298" height="130" name="classic_preview"

label="" scale_image="true" image_selected="skin_thumbnail_default.png" image_unselected="skin_thumbnail_default.png" image_hover_selected="skin_thumbnail_default.png" image_hover_unselected="skin_thumbnail_default.png"/>

 <button left="130" bottom="-320" width="298" height="130" name="silver_preview"

label="" scale_image="true" image_selected="skin_thumbnail_silver.png" image_hover_selected="skin_thumbnail_silver.png" image_unselected="skin_thumbnail_silver.png" image_hover_unselected="skin_thumbnail_silver.png"/> </syntaxhighlight>

The radio items select the skin to switch to; the buttons display a preview of the skin.

Selecting your skin

• If you want to just switch to your skin without previewing it, add the follow line before <syntaxhighlight lang="text" class="" id="" style="" inline="1"></radio_item></syntaxhighlight>:

<syntaxhighlight lang="html" inline><radio_item bottom="-340" height="20" left="0" name="new_skin" width="480">New Skin</syntaxhighlight>

The parameter name="" must point to the directory name of your skins folder. The "New Skin" portion is the name of your skin as it appears in the preferences panel.

• If you want to include a preview your skin:

1. Create a 300x130 TGA or PNG image that effectively previews your skin. Name it something memorable, like <syntaxhighlight lang="text" class="" id="" style="" inline="1">skin_thumbnail_new_skin.png</syntaxhighlight>.
2. Add this image to \skins\default\textures\ (that's the default folder, not your skin's).
3. Modify \skins\default\xui\en-us\panel_preferences_skins.xml to the following code:

<syntaxhighlight lang="html">

       [...]
       <radio_group bottom="0" draw_border="false" follows="top|left" height="380" left="12"

name="skin_selection" width="480">

   <radio_item bottom="-25" height="20" left="0" name="default" width="480">
     Classic
   </radio_item>
   <radio_item bottom="-150" height="20" left="0" name="silver" width="480">
     Silver
   </radio_item>
   <radio_item bottom="-275" height="20" left="0" name="new_skin" width="480">
     New Skin
   </radio_item>
 </radio_group>
 <button left="130" bottom="-140" width="235" height="100" name="classic_preview" label="" scale_image="true"
         image_selected="skin_thumbnail_classic.png" image_unselected="skin_thumbnail_classic.png"/>
 <button left="130" bottom="-265" width="235" height="100" name="silver_preview" label="" scale_image="true"
         image_selected="skin_thumbnail_modern.png" image_unselected="skin_thumbnail_new_skin.png"/>
 <button left="130" bottom="-390" width="235" height="100" name="new_skinc_preview" label="" scale_image="true"
         image_selected="skin_thumbnail_new_skin.png" image_unselected="skin_thumbnail_new_skin.png"/>

</panel></syntaxhighlight>

Replacing the entries containing "new skin" with ones that list your own skin files.

Package

1. Create a new zip file with an empty skins\ folder inside.

2. Add all the files you've modified — in their appropriate directory trees — to this folder. The contents of your zip file should read something like:

skins\default\textures\skin_thumbnail_new_skin.png
skins\default\xui\en-us\panel_preferences_skins.xml
skins\new_skin\colors.xml
skins\new_skin\colors_base.xml
skins\new_skin\textures\...
skins\new_skin\xui\...

Depending on what you've modified.

3. Upload your zip file somewhere on the web.

4. Create a new entry in Category:Viewer_Skins listing an image and download link for your skin.

People will now be able to install and switch to your skin.