Difference between revisions of "Skinning How To/Add 3rd party skins to the skins preferences panel"

From Second Life Wiki
Jump to navigation Jump to search
(New page: = 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 s...)
 
(Adding big warning, a few references to macOS, and a comment regarding a missing UI config file (?, some syntaxhighlighting, etc.)
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{hint
|mode=important
|desc=Following the instructions below requires modifying some ''system'' files in your {{code|\SecondLife}} or {{code|\SecondLifeReleaseCandidate}} 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 =
= 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.   
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 =
= 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.  
Your skin needs to reside in a unique directory, with a unique set of artwork and a unique {{code|colors.xml}} file.  


#Browse to your Second Life install directory, which is the '''\SecondLifeReleaseCandidate\skins\''' folder in Release Candidates, and '''\SecondLife\skins\''' in Release versions.  
#Browse to your Second Life install directory, which, on Windows, is the '''\SecondLifeReleaseCandidate\skins\''' <ref>Linux and macOS users, of course, should use the normal slash {{code|/}} as a directory separator, not the Windows-specific backslash {{code|\}}. — {{User|Gwyneth Llewelyn}}&nbsp;{{#time:l j F, H:i}}</ref> folder in Release Candidates, and '''\SecondLife\skins\''' in Release versions; under macOS, they're under '''/Applications/Second Life Viewer.app/Contents/Resources/skins'''
#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 a new folder. Name it after your skin. (For example, in Windows, '''C:\Program Files\SecondLifeReleaseCandidate\skins''\new_skin\''''', replacing {{code|new_skin}} 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 {{code|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. <ref>That file doesn't seem to exist any longer. — {{User|Gwyneth Llewelyn}}&nbsp;{{#time:l j F, H:i}}</ref>
= Add your files =
= Add your files =


In this folder, copy the '''colors.xml''' and '''colors_base.xml''' files your skin uses. If your skin is a modification of the Silver skin's color scheme, copy the colors_base.xml file from the \silver\ directory.  
In this folder, copy the {{code|colors.xml}} and {{code|colors_base.xml}} files your skin uses. For example, if your skin is a modification of the Silver skin's color scheme, copy the {{code|colors_base.xml}} file from the '''\silver\''' directory to '''\new_skin\'''.  


(NOTE: You will need colors_base.xml for skin switching to work correctly).  
(NOTE: You will need {{code|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.  
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).  
(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 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 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.  
* 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 =
= 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.  
{{code|panel_preferences_skins.xml}} contains the listing for skins you can switch to. You need to modify the version in the '''default''' {{code|en-us}} folder ('''\skins\default\xui\en-us\''') so that all skins can access your skin{{Clarify|reason=Why do all skins need to access my skin?|date=May 2024}}.  


Open the file in a text or xml editor and scroll to the bottom. There, you'll see two radio_group options:
Open the file in a text or XML editor and scroll to the bottom. There, you'll see two {{code|radio_group}} options:


<pre>
<syntaxhighlight lang="html">
    <radio_group bottom="0" draw_border="false" follows="top|left" height="380" left="12"
<radio_group bottom="0" draw_border="false" follows="top|left" height="380" left="12"
    name="skin_selection" width="480">
    name="skin_selection" width="480">
     <radio_item bottom="-20" height="20" left="0" name="default" width="480">
     <radio_item bottom="-20" height="20" left="0" name="default" width="480">
Line 41: Line 48:
       Silver
       Silver
     </radio_item>
     </radio_item>
</pre>
[...]
</syntaxhighlight>


And two buttons:
And two buttons:


<pre>
<syntaxhighlight lang="html">
   <button left="130" bottom="-160" width="298" height="130" name="classic_preview"
   <button left="130" bottom="-160" width="298" height="130" name="classic_preview"
  label="" scale_image="true" image_selected="skin_thumbnail_default.png"
  label="" scale_image="true" image_selected="skin_thumbnail_default.png"
Line 54: Line 62:
  image_hover_selected="skin_thumbnail_silver.png" image_unselected="skin_thumbnail_silver.png"
  image_hover_selected="skin_thumbnail_silver.png" image_unselected="skin_thumbnail_silver.png"
  image_hover_unselected="skin_thumbnail_silver.png"/>
  image_hover_unselected="skin_thumbnail_silver.png"/>
</pre>
</syntaxhighlight>


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


== Selecting your skin ==
== Selecting your skin ==


* If you want to just switch to your skin without previewing it, add the follow line before </radio_item>:
* If you want to just switch to your skin without previewing it, add the follow line before {{code|</radio_item>}}:


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


:The parameter <code>name=""</code> 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.  
:The parameter <code>name=""</code> '''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:
* If you want to include a preview your skin:


#Create a 300x130 tga or png image that effectively previews your skin. Name it something memorable, like skin_thumbnail_new_skin.png.
#Create a 300x130 TGA or PNG image that effectively previews your skin. Name it something memorable, like {{code|skin_thumbnail_new_skin.png}}.
#Add this image to '''\skins\default\textures\''' (that's the default folder, not your skin's).  
#Add this image to '''\skins\default\textures\''' (that's the default folder, not your skin's).  
#Modify '''\skins\default\xui\en-us\panel_preferences_skins.xml''' to the following code:
#Modify '''\skins\default\xui\en-us\panel_preferences_skins.xml'''<ref>This one seems to be missing as well. — {{User|Gwyneth Llewelyn}}&nbsp;{{#time:l j F, H:i}}</ref> to the following code:


<pre>       <radio_group bottom="0" draw_border="false" follows="top|left" height="380" left="12"
<syntaxhighlight lang="html">
        [...]
        <radio_group bottom="0" draw_border="false" follows="top|left" height="380" left="12"
    name="skin_selection" width="480">
    name="skin_selection" width="480">
     <radio_item bottom="-25" height="20" left="0" name="default" width="480">
     <radio_item bottom="-25" height="20" left="0" name="default" width="480">
Line 90: Line 100:
   <button left="130" bottom="-390" width="235" height="100" name="new_skinc_preview" label="" scale_image="true"
   <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"/>
           image_selected="skin_thumbnail_new_skin.png" image_unselected="skin_thumbnail_new_skin.png"/>
</panel></pre>
</panel></syntaxhighlight>


Replacing the entries containing "new skin" with ones that list your own skin files.  
Replacing the entries containing "new skin" with ones that list your own skin files.  
Line 97: Line 107:


:1. Create a new zip file with an empty '''skins\''' folder inside.  
: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:
: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:
<pre>skins\default\textures\skin_thumbnail_new_skin.png
<pre>skins\default\textures\skin_thumbnail_new_skin.png
skins\default\xui\en-us\panel_preferences_skins.xml
skins\default\xui\en-us\panel_preferences_skins.xml
Line 106: Line 116:
:Depending on what you've modified.  
:Depending on what you've modified.  
:3. Upload your zip file somewhere on the web.
:3. Upload your zip file somewhere on the web.
:4. Create a new entry in [[Category:Viewer_Skins]] listening an image and download link for your skin.
: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.
People will now be able to install and switch to your skin.
= Footnotes =
{{References}}


[[Category:Skinning]]
[[Category:Skinning]]

Latest revision as of 08:39, 21 May 2024

Emblem-important.png Important!

Following the instructions below requires modifying some system files in your \SecondLife or \SecondLifeReleaseCandidate 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 colors.xml file.

  1. Browse to your Second Life install directory, which, on Windows, is the \SecondLifeReleaseCandidate\skins\ [1] 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 new_skin 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 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. [2]

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[clarification needed].

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[3] 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.

Footnotes

  1. ↑ Linux and macOS users, of course, should use the normal slash / as a directory separator, not the Windows-specific backslash \. — Gwyneth Llewelyn Thursday 13 June, 12:57
  2. ↑ That file doesn't seem to exist any longer. — Gwyneth Llewelyn Thursday 13 June, 12:57
  3. ↑ This one seems to be missing as well. — Gwyneth Llewelyn Thursday 13 June, 12:57
Retrieved from "https://wiki.secondlife.com/w/index.php?title=Skinning_How_To/Add_3rd_party_skins_to_the_skins_preferences_panel&oldid=1216689"