Skinning How To/Skin the viewer
Creating a new skin for the viewer typically involves two steps:
- Recoloring the texture files (buttons, icons, toolbar, etc).
- Recoloring the viewer elements set in colors.xml (text color, window color, etc).
- (Optional): Editing any other xml files than colors.xml (in other words making layout changes, etc).
- The viewer's texture files are located in \SecondLifeReleaseCandidate\skins\textures in Release Candidates and \SecondLife\skins\textures in the current release viewer.
- icn_* files are icons.
- ff_* files related to the friends list.
- inv_folder* files are inventory folders.
- inv_item* files are inventory items.
- NOTE: This folder also contains files in the Jpeg2000 (.j2c) format. These are the OI HUD and miscellaneous viewer files. You will never need to edit them, except if you want to change the login screen (startup_logo.j2c). To do so, you need to have a program that can save Jpeg2000 Codestream files (any program that can write .j2c or .j2k files; the two extensions are interchangeable).
To recolor an image:
- Open it in your image editor.
- Apply a color mask.
- Save it, overwriting the original image.
This process is unique to the program you're using, but Yukiko Omegamu has provided a video tutorial for Photoshop.
- NOTE: Not every file in the \textures\ folder is used, like icn_media-stop_enabled.tga. For a full list, see Legacy files.
- colors.xml is located in \SecondLifeReleaseCandidate\app_settings in Release Candidates and \SecondLife\app_settings in the current release viewer.
Colors are set using the following format:
R,G,B,Opacity are each in the range 0-255. For opacity, 128 is half opacity (ergo, half transparent).
- You can use the website http://www.colorschemer.com/online.html to quickly generate RGB values.
There are two ways to edit colors.xml:
- Copy the entries you want to edit from colors_base.xml into colors.xml, then change them there.
<!-- CHAT AND IM HISTORY TEXTBOX COLORS --> <ChatHistoryBgColor value="0, 30, 80, 200" /> <ChatHistoryTextColor value="255, 255, 255, 255" /> <IMHistoryBgColor value="0, 30, 80, 128" /> <IMHistoryTextColor value="255, 255, 255, 255" />
- Use the fully commented colors.xml file on the wiki.