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

From Second Life Wiki
Jump to: navigation, search

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 colors.xml file.

  1. Browse to your Second Life install directory, which is the \SecondLifeReleaseCandidate\skins\ folder in Release Candidates, and \SecondLife\skins\ in Release versions.
  2. Create a new folder. Name it after your skin. (For example, in Windows, C:\Program Files\SecondLifeReleaseCandidate\skins\new_skin\, replacing "new_skin" with your own 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 floater_skin_preview_template.xml. 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 colors.xml and colors_base.xml files your skin uses. For example, if your skin is a modification of the Silver skin's color scheme, copy the colors_base.xml file from the \silver\ directory to \new_skin\.

(NOTE: You will need colors_base.xml 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

panel_preferences_skins.xml contains the listing for skins you can switch to. You need to modify the version in the DEFAULT en-us 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 radio_group options:

    <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>

And two buttons:

  <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"/>

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 </radio_item>:
<radio_item bottom="-340" height="20" left="0" name="new_skin" width="480">New Skin
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 skin_thumbnail_new_skin.png.
  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:
        <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>

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.