Introduction

UPDATE: Since this page was written, a feature was added to the 1.20 viewer to change to a Classic look very simply! Go to Edit menu > Preferences > Skins tab, and choose the default grey color. This feature was made possible by an open source patch by McCabe Maxsted, who used the steps in this tutorial!

This page is a great practice exercise, to become familiar with how the skinning architecture works under-the-hood.

This page is for reverting the XML and viewer artwork files in the 1.20 viewer back to their pre-1.20 viewer state. There are several steps you need to go through to rebuild the classic viewer look. *NOTE* This a work in progress. See the revision history. If you'd like the quick and easy path, you can get the full thing at Viewer_Skins/Classic_Look.

Classic Skin for 1.20 RC12

Classic Skin login

Revision History

McCabe Maxsted 12:43, 10 July 2008 (PDT) : http://blog.secondlife.com/2008/07/10/now-available-optional-release-candidate-viewer-120-rc13-switch-between-skins/ This skin is now part of the viewer. W00t, skin switching!
McCabe Maxsted 09:55, 8 June 2008 (PDT) : Fixed black text on gray background for People Search.
McCabe Maxsted 02:14, 3 June 2008 (PDT) : Fixed the flyout buttons, redid the toolbar buttons and media icons from scratch so they look better at different resolutions, ported rounded_square (thanks Henri for the tip on how to do that), updated textures.xml.
McCabe Maxsted 14:20, 3 May 2008 (PDT) : Updated the inventory background color with the change in colors_base.xml in RC5.
McCabe Maxsted 22:18, 23 April 2008 (PDT) : Updated to RC3.
McCabe Maxsted 17:51, 20 April 2008 (PDT) : Progress bar now displays in the classic look, more xml updates.
McCabe Maxsted 21:27, 19 April 2008 (PDT) : Fixed certain buttons displaying oblong, fixed two misnamed texture files, added classic artwork for buying lindens/land, remade the no-script status icon into something decent, new scrollbar textures, fixed the slider, updated textures.xml to include the new artwork in RC2.
McCabe Maxsted 14:04, 17 April 2008 (PDT) : Fixed media and voice toolbars, updated artwork files.
McCabe Maxsted 16:23, 15 April 2008 (PDT) : Fixed login page to display the classic backdrop (new artwork file), updated textures.xml.
McCabe Maxsted 06:59, 12 April 2008 (PDT) : Fixed an issue with circular buttons displaying as squares. Updated the artwork package with a missing file.
McCabe Maxsted 03:43, 12 April 2008 (PDT) : Fixed parcel and clock colors in colors.xml.

Editing the XML files

For convenience, I've uploaded the updated xml files in a zip file here. However, if you'd like to make the changes the yourself, here are the files and parameters you need to alter:

(NOTE: I'm using the en-us version. For other languages, edit the xml files in that language folder using the same values I've used)

colors.xml

This file controls the majority of colors in the viewer. In-between the <settings version = "101"> and </settings> tags, copy/paste the following:

<!-- WINDOWS -->
<TitleBarFocusColor value="255, 255, 255, 30" />	<!-- Focused window title bar highlight, no equivalent for unfocused windows -->
<FloaterFocusBorderColor value="0, 0, 0, 80" />
<FloaterUnfocusBorderColor value="0, 0, 0, 80" />
<FocusBackgroundColor value="62, 62, 62, 255" />	<!-- Background color of focused floaters -->
<DefaultBackgroundColor value="62, 62, 62, 140" />	<!-- Background color for unfocused floaters -->
<ColorDropShadow value="0, 0, 0, 200" />		<!-- The drop shadow behind windows and menus -->
<DefaultHighlightDark value="26, 26, 26, 255" />
<DefaultHighlightLight value="115, 132, 155, 255" />
<DefaultShadowDark value="26, 26, 26, 255" />
<DefaultShadowLight value="0, 0, 0, 255" />

<!-- LABELS -->
<LabelDisabledColor value="147, 169, 213, 77" />
<LabelSelectedColor value="255, 255, 255, 255" />
<LabelSelectedDisabledColor value="164, 190, 237, 128" />
<LabelTextColor value="147, 169, 213, 255" />

<!-- LOGIN -->
<LoginProgressBarBgColor value="255, 255, 255, 255" />
<LoginProgressBarFgColor value="255, 255, 255, 255" />
<LoginProgressBoxBorderColor value="0, 30, 60, 0" />
<LoginProgressBoxCenterColor value="0, 0, 0, 200" />
<LoginProgressBoxShadowColor value="0, 0, 0, 200" />
<LoginProgressBoxTextColor value="255, 255, 255, 255"/>

<!-- BUTTONS -->
<ButtonLabelColor value="220, 220, 220, 255" /> 	<!-- Text labels for buttons, like the "OK" text -->
<ButtonLabelSelectedColor value="220, 220, 220, 255" />
<ButtonLabelDisabledColor value="147, 169, 213, 200" />
<ButtonLabelSelectedDisabledColor value="164, 190, 237, 200" />
<ButtonSelectedBgColor value="62, 62, 62, 255" />
<ButtonSelectedColor value="255, 255, 255, 255" />
<ButtonUnselectedBgColor value="62, 62, 62, 255" />
<ButtonUnselectedFgColor value="255, 255, 255, 255" />
<ButtonBorderColor value="239, 156, 0, 255" />
<ButtonColor value="255, 255, 255, 255" /> 		<!-- Blended with button art, usually left as opaque white -->
<ButtonImageColor value="255, 255, 255, 255" /> 	<!-- Blended with button art, usually left as opaque white -->

<!-- SLIDERS -->
<SliderDisabledThumbColor value="0, 0, 0, 255" />
<SliderThumbCenterColor value="200, 200, 200, 255" />
<SliderThumbOutlineColor value="255, 255, 255, 255" />
<SliderTrackColor value="255, 255, 255, 255" />

<!-- TEXTFIELDS -->
<TextBgFocusColor value="200, 209, 204, 255" />		<!-- Text field background when receiving input (focused) -->
<TextBgReadOnlyColor value="62, 62, 62, 160" />	        <!-- Text field background when read-only -->
<TextBgWriteableColor value="200, 209, 204, 230" />	<!-- Text field background when not receiving input (unfocused) -->
<TextCursorColor value="0, 0, 0, 255" />
<TextFgColor value="0, 0, 0, 255" />
<TextFgReadOnlyColor value="255, 255, 255, 200" />
<TextFgTentativeColor value="0, 0, 0, 255" />
<TextEmbeddedItemReadOnlyColor value="58, 147, 242, 255" />	<!-- i.e. About Land name that you don't own -->
<TextEmbeddedItemColor value="0, 0, 128, 255" />
<TextDefaultColor value="0, 20, 0, 255"/>
  
<!-- LISTBOXES -->
<ScrollBgReadOnlyColor value="200, 209, 204, 255" />
<ScrollBgWriteableColor value="200, 209, 204, 255" />
<ScrollBGStripeColor value="100, 100, 100, 40" />
<ScrollDisabledColor value="128, 128, 128, 204" />
<ScrollSelectedBGColor value="100, 100, 188, 150" />
<ScrollSelectedFGColor value="0, 0, 0, 204" />	            <!-- Text color -->
<ScrollUnselectedColor value="0, 0, 0, 204" />	            <!-- Text color -->
<ScrollHighlightedColor value="183, 184, 188, 128" />	    <!-- Hover color -->
<ScrollbarThumbColor value="60, 76, 124, 255" />            <!-- Scroll bar-->
<ScrollbarTrackColor value="153, 154, 158, 255" />          <!-- Scroll bar background-->

<!-- MENUS -->
<MenuBarBgColor value="62, 62, 62, 255" />
<MenuBarGodBgColor value="62, 128, 62, 255" />
<MenuNonProductionGodBgColor value="0, 128, 0, 255" />
<MenuNonProductionBgColor value="128, 0, 0, 255" />
<MenuDefaultBgColor value="0, 0, 0, 255" />
<MenuItemDisabledColor value="133, 133, 164, 128" />        <!-- Menu text color; also text color for pie menus and treeviews (like Inventory) -->
<MenuItemEnabledColor value="255, 255, 255, 255" />         <!-- Menu text color; also text color for pie menus and treeviews (like Inventory) -->
<MenuItemHighlightBgColor value="183, 184, 188, 100" />
<MenuItemHighlightFgColor value="255, 255, 255, 255" />	    <!-- Highlighted menu text color; also treeview node selection highlight -->
<MenuPopupBgColor value="0, 0, 0, 255" />

<!--  PIE MENUS -->
<PieMenuBgColor value="62, 62, 62, 150" />
<PieMenuLineColor value="0, 0, 0, 128" />
<PieMenuSelectedColor value="183, 184, 188, 77" />

<!-- TOOLTIPS -->
<ToolTipBgColor value="183, 184, 188, 200" />
<ToolTipBorderColor value="171, 212, 245, 255" />
<ToolTipTextColor value="0, 0, 0, 255" />

<!-- NOTIFICATION POP-UPS -->
<NotifyBoxColor value="70, 170, 255, 255" />
<NotifyTextColor value="0, 0, 0, 255" />
<NotifyCautionBoxColor value="254, 209, 118, 255" /> 	<!-- the background color of caution permissions prompts -->
<NotifyCautionWarnColor value="0, 0, 0, 255" /> 	<!-- the foreground color of the special title text in caution permissions prompts -->
<GroupNotifyBoxColor value="70, 170, 255, 255" />
<GroupNotifyTextColor value="0, 30, 60, 255" />

<!-- CHAT AND IM HISTORY TEXTBOX COLORS -->
<ChatHistoryBgColor value="0, 0, 0, 0" />
<ChatHistoryTextColor value="255, 255, 255, 255" />
<IMHistoryBgColor value="0, 30, 80, 200" />
<IMHistoryTextColor value="255, 255, 255, 255" />

<!-- IN-WORLD SELECTION -->
<SilhouetteParentColor value="255, 255, 0, 255" />
<SilhouetteChildColor value="32, 106, 196, 255" />
<HighlightParentColor value="171, 212, 245, 255" />
<HighlightChildColor value="171, 212, 245, 255" />
<HighlightInspectColor value="255, 0, 255, 255" />

<!-- EDIT MODE GRID -->
<GridFocusPointColor value="255, 255, 255, 128" />
<GridlineColor value="255, 255, 255, 255" />
<GridlineBGColor value="235, 235, 255, 200" />
<GridlineShadowColor value="0, 0, 0, 80" />

<!-- PROPERTY LINES -->
<PropertyColorAvail value="0, 0, 0, 0" />
<PropertyColorGroup value="0, 184, 184, 102" />
<PropertyColorOther value="255, 0, 0, 102" />
<PropertyColorSelf value="0, 255, 0, 102" />
<PropertyColorForSale value="255, 128, 0, 102" />
<PropertyColorAuction value="128, 0, 255, 102" />	<!-- Match the color on the world map -->

<!-- Icon Enable/Disable -->
<IconEnabledColor value="255, 255, 255, 255"/>
<IconDisabledColor value="147, 169, 213, 200"/>

<!-- MINI-MAP -->
<NetMapBackgroundColor value="0, 0, 0, 77" />
<NetMapYouOwnAboveWater value="0, 255, 255, 255" />
<NetMapYouOwnBelowWater value="0, 200, 200, 255" />
<NetMapGroupOwnAboveWater value="255, 0, 255, 255" />
<NetMapGroupOwnBelowWater value="200, 0, 200, 255" />
<NetMapOtherOwnAboveWater value="60, 60, 60, 255" />
<NetMapOtherOwnBelowWater value="30, 30, 30, 255" />

<!-- HELP WINDOW -->
<HelpBgColor value="200, 209, 204, 255" />
<HelpFgColor value="0, 0, 0, 255" />
<HelpScrollTrackColor value="183, 184, 188, 255" />
<HelpScrollThumbColor value="80, 96, 124, 255" />
<HelpScrollHighlightColor value="115, 132, 155, 255" />
<HelpScrollShadowColor value="0, 0, 0, 255" />

<!-- MISC -->
<AvatarNameColor value="251, 175, 93, 255" /> 		<!-- Text color of avatar nametags -->
<FocusColor value="239, 156, 0, 255" /> 		<!-- Color of the glow around UI controls with keyboard focus -->
<FloaterButtonImageColor value="239, 156, 0, 255" /> 	<!-- The floater buttons (like the close box) are white images that receive this color. -->
<ButtonCautionImageColor value="255, 255,  255, 255" />	<!-- Match the caution dialog buttons to the default -->
<HealthTextColor value="255, 255, 255, 255" />
<MapAutopilotColor value="255, 128, 0, 255" />
<ContextSilhouetteColor value="239, 156, 0, 255" />	<!-- For "context" highlighting, i.e. pie menu -->
<ScriptBgReadOnlyColor value="100, 100, 100, 255" />
<ParcelTextColor value="144, 165, 208, 255" />		<!-- Parcel name on menu bar, normal state -->
<ParcelHoverColor value="255, 255, 255, 255" />		<!-- Parcel name on menu bar, hover state -->
<TimeTextColor value="255, 255, 255, 255" />		<!-- SL Time on menu bar -->
<BalanceTextColor value="0, 255, 0, 255" />		<!-- Linden dollar balance on menu bar -->
<HealthTextColor value="255, 255, 255, 255" />		<!-- Damage meter text on menu bar -->
<GroupOverTierColor value="110, 15, 15, 255" />		<!-- Warning text in Group Info window -->
<FilterBackgroundColor value="0, 0, 20, 255" />         <!-- Matching region of Inventory search text -->
<FilterTextColor value="255, 200, 70, 255" />
<InventoryItemSuffixColor value="191, 216, 216, 255" />     <!-- "worn", "no modify", etc-->
<InventorySearchStatusColor value="255, 255, 255, 255" />
<ConsoleBackground value="0, 0, 0, 255" />
<FolderViewLoadingMessageTextColor value="240, 165, 90, 255"/>     <!-- "loading..." in the inv -->
<InventoryBackgroundColor value="62, 62, 62, 80"/>

<!-- Alert box colors -->
<AlertBoxColor value="62, 62, 62, 255" />               <!-- Warnings floaters, like when returning objects -->
<AlertTextColor value="147, 169, 213, 255" />
<AlertCautionBoxColor value="254, 209, 118, 255" />	<!-- Background color of caution alerts -->
<AlertCautionTextColor value="0, 0, 0, 255" />		<!-- Foreground color of the special title text in caution alerts -->

<!--  Multi sliders, as in the sky animation setting -->
<MultiSliderDisabledThumbColor value="0, 0, 0, 255"/>
<MultiSliderThumbCenterColor value="183, 184, 188, 255"/>
<MultiSliderThumbOutlineColor value="0, 0, 0, 255"/>
<MultiSliderTrackColor value="30, 30, 30, 255"/>
<MultiSliderThumbCenterSelectedColor value="255, 50, 50, 255"/>
<MultiSliderTriangleColor value="255, 255, 50, 255"/>

textures.xml

This file is tricky, in that it doesn't play well with pre-Dazzle graphics (just changing the colors.xml file and replacing the artwork results in squished/misshapen buttons). To get the pre-1.20 button shapes back, make the following edits to your textures.xml file:

Change scale_rect values to <scale_rect left="16" top="12" right="112" bottom="12" /> for:

button_disabled_32x128.tga
button_enabled_32x128.tga
button_enabled_selected_32x128.tga

Change scale_rect values to <scale_rect left="7" top="32" right="121" bottom="0" />

toolbar_btn_enabled.tga
toolbar_btn_disabled.tga
toolbar_btn_selected.tga

Change scale_rect values to <scale_rect left="0" top="30" right="32" bottom="0"/> for:

flyout_btn_right.tga
flyout_btn_right_disabled.tga
flyout_btn_right_selected.tga

Change scale_rect values to <scale_rect left="16" top="15" right="112" bottom="15"/> for:

flyout_btn_left.tga
flyout_btn_left_disabled.tga
flyout_btn_left_selected.tga

Change scale_rect values to <scale_rect left="20" top="24" right="44" bottom="0"/> for:

btn_chatbar_selected.tga
btn_chatbar.tga

Change scale_rect values to <scale_rect left="10" top="7" right="65" bottom="7"/> for:

progressbar_fill.tga

Change scale_rect values to <scale_rect left="10" top="7" right="80" bottom="7"/> for:

progressbar_track.tga

panel_media_controls.xml

This panel controls the size and spacing of the media controls. There is an oddity here you have to watch out for: the stop/pause/play buttons are based on flyout_btn_*.tga rather than button_anim_*.tga as you'd prolly expect. The actual stop/pause/play "button" is an icon overlay (icn_play.tga, for example) and the spacing of the icon overlay is tied to the spacing of the flyout buttons and follows the same left_delta values. That means you can't move the play icon two pixels to the right without moving the entire button, which makes sense on the surface, but if your play icon is two pixels too far to the left there's nothing you can do.

To get the classic media controls layout back, replace panel_media_controls.xml with the following:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<panel bg_visible="false" border="false" border_visible="false" bottom="1"
     enabled="true" follows="right|bottom" height="20" left="0"
     name="media_controls" width="262">
	<icon bottom="-22" enabled="true" follows="left|top" height="22"
	     image_name="icn_label_music.tga" label="" left_delta="2" mouse_opaque="true"
	     name="music_icon" scale_image="true" tool_tip="Play/pause streaming music"
	     width="20" />
	<button bottom="-21" enabled="true" follows="left|top" height="20"
          image_overlay="icn_play.tga"
          image_unselected="flyout_btn_left.tga"
             image_selected="flyout_btn_left_selected.tga"
             image_disabled="flyout_btn_left_disabled.tga"
	      label="" left_delta="20"
	     mouse_opaque="true" name="music_play" scale_image="true" toggle="false"
	     tool_tip="Play/pause streaming music" width="20" />
  <button bottom="-21" enabled="false" follows="left|top" height="20"
	     image_overlay="icn_pause.tga"
             image_unselected="flyout_btn_left.tga"
             image_selected="flyout_btn_left_selected.tga"
             image_disabled="flyout_btn_left_disabled.tga"
	     label="" left_delta="0"
	     mouse_opaque="true" name="music_pause" scale_image="true" toggle="false"
	     tool_tip="Pause streaming music" width="20" />
  <button bottom="-21" enabled="true" follows="left|top" height="20"
	     image_overlay="icn_stop.tga"
             image_unselected="flyout_btn_right.tga"
             image_selected="flyout_btn_right_selected.tga"
             image_disabled="flyout_btn_right_disabled.tga"
	     label="" left_delta="20"
	     mouse_opaque="true" name="music_stop" scale_image="true" toggle="false"
	     tool_tip="Stop streaming music" width="20" />
  <icon bottom="-22" enabled="true" follows="left|top" height="22"
	     image_name="icn_label_media.tga"
             label="" left_delta="23" mouse_opaque="true"
	     name="media_icon" scale_image="true" tool_tip="Play/pause streaming music"
	     width="20" />
  <button bottom="-21" enabled="true" follows="left|top" height="20"
	     image_overlay="icn_play.tga"
             image_unselected="flyout_btn_left.tga"
             image_selected="flyout_btn_left_selected.tga"
             image_disabled="flyout_btn_left_disabled.tga"
	     label="" left_delta="21"
	     mouse_opaque="true" name="media_play" scale_image="true" toggle="false"
	     tool_tip="Play/pause streaming music" width="20" />
  <button bottom="-21" enabled="false" follows="left|top" height="20"
	     image_overlay="icn_pause.tga"
                          image_unselected="flyout_btn_left.tga"
             image_selected="flyout_btn_left_selected.tga"
             image_disabled="flyout_btn_left_disabled.tga"
	     label="" left_delta="0"
	     mouse_opaque="true" name="media_pause" scale_image="true" toggle="false"
	     tool_tip="Pause streaming media" width="20" />
	<button bottom="-21" enabled="true" follows="left|top" height="20"
	     image_overlay="icn_stop.tga"
                          image_unselected="flyout_btn_right.tga"
             image_selected="flyout_btn_right_selected.tga"
             image_disabled="flyout_btn_right_disabled.tga"
	     label="" left_delta="20"
	     mouse_opaque="true" name="media_stop" scale_image="true" toggle="false"
	     tool_tip="Stop streaming media" width="20" />
	<volume_slider bottom="-21" control_name="AudioLevelMaster" height="22" increment="0.05"
	     initial_val="0.5" left_delta="15" max_val="1" min_val="0"
	     mouse_opaque="true" name="volume_slider" tool_tip="Master Volume"
	     width="56" />
	<button bottom="-19" control_name="MuteAudio" height="20"
	     image_selected="icn_speaker-muted_dark.tga"
	     image_unselected="icn_speaker_dark.tga" label="" left_delta="55"
	     name="mute_master" toggle="true" tool_tip="Master Mute" width="24" />
	<button bottom="-22" control_name="ShowVolumeSettingsPopup" height="22" label=""
	     left_delta="19" name="expand" scale_image="true" toggle="true"
	     tool_tip="Adjust individual volume levels" width="22" />
        
	<string name="play_label">
		Play
	</string>
	<string name="stop_label">
		Stop
	</string>
	<string name="pause_label">
		Pause
	</string>
	<string name="default_tooltip_label">
		No Media Specified
	</string>
	<string name="media_hidden_label">
		(URL hidden by parcel owner)
	</string>
	<string name="media_icon_tooltip_web">
		This location displays content from the World Wide Web. Click the Play button to display Web content.
	</string>
	<string name="media_icon_tooltip_movie">
		This location displays Video content. Click the Play button to play the video.
	</string>
	<string name="media_play_tooltip">
		Display Web content at this location.
	</string>
</panel>

panel_voice_controls.xml

Unlike most other xml files changed between 1.19 and 1.20, the only things to change in panel_voice_controls are the values. For the ptt_lock_*.tga button scale_image was changed from true to false. I assume there was a good reason for this, so I've left it as and resized the icon.

For the classic skin values, replace panel_voice_controls.xml with the following:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<panel bg_visible="false" border="false" border_visible="false" bottom="2"
     enabled="true" follows="right|bottom" height="20" left="0"
     mouse_opaque="true" name="voice_controls" width="128">
	<button bottom="-22" height="22" image_overlay="active_speakers.tga" label="" left="2"
	     name="speakers_btn"
	     tool_tip="Show list of residents using voice chat around you" width="38" />
	<button bottom="-22" height="22" label="Talk" left_delta="40" name="push_to_talk"
	     tab_stop="false" tool_tip="Hold the button to talk" width="64" />
	<button bottom="-19" height="16" image_selected="ptt_lock_on.tga"
	     image_unselected="ptt_lock_off.tga" label="" left_delta="4" name="ptt_lock"
	     scale_image="false" toggle="true"
	     tool_tip="Click lock to switch to talk mode" width="16" />
	<icon bottom="-19" height="16" image_name="icn_voice_ptt-off.tga" left_delta="42"
	     name="voice_volume" width="16" />
	<button bottom="-22" control_name="ShowVoiceChannelPopup" height="22" label=""
	     left_delta="20" name="show_channel" scale_image="true" toggle="true"
	     tool_tip="Click to show current voice channel" width="22" />
</panel>

floater_tools.xml

The size of the build icons changed, so to use the classic icons you need to change the layout in the tools xml file. Open floater_tools.xml and delete everything between < !-- Create panel -- > and < !-- Land panel -- >. Then, replace it with the following:

	<button bottom="-75" follows="left|top" font="SansSerif" halign="center" height="24"
	     image_disabled="object_cube.tga"
	     image_disabled_selected="object_cube_active.tga"
	     image_selected="object_cube_active.tga" image_unselected="object_cube.tga"
	     label="" label_selected="" left="4" mouse_opaque="true" name="ToolCube"
	     scale_image="TRUE" width="24" tool_tip="Cube"/>
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_prism.tga"
	     image_disabled_selected="object_prism_active.tga"
	     image_selected="object_prism_active.tga"
	     image_unselected="object_prism.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolPrism" scale_image="TRUE"
        tool_tip="Prism" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_pyramid.tga"
	     image_disabled_selected="object_pyramid_active.tga"
	     image_selected="object_pyramid_active.tga"
	     image_unselected="object_pyramid.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolPyramid" scale_image="TRUE"
 tool_tip="Pyramid" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_tetrahedron.tga"
	     image_disabled_selected="object_tetrahedron_active.tga"
	     image_selected="object_tetrahedron_active.tga"
	     image_unselected="object_tetrahedron.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolTetrahedron"
	     scale_image="TRUE" tool_tip="Tetrahedron" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_cylinder.tga"
	     image_disabled_selected="object_cylinder_active.tga"
	     image_selected="object_cylinder_active.tga"
	     image_unselected="object_cylinder.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" tool_tip="Cylinder" name="ToolCylinder" scale_image="TRUE"
	     width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_hemi_cylinder.tga"
	     image_disabled_selected="object_hemi_cylinder_active.tga"
	     image_selected="object_hemi_cylinder_active.tga"
	     image_unselected="object_hemi_cylinder.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolHemiCylinder"
	     scale_image="TRUE" tool_tip="Hemicylinder" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_cone.tga"
	     image_disabled_selected="object_cone_active.tga"
	     image_selected="object_cone_active.tga" image_unselected="object_cone.tga"
	     label="" label_selected="" left_delta="23" mouse_opaque="true"
	     name="ToolCone" scale_image="TRUE" tool_tip="Cone" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_hemi_cone.tga"
	     image_disabled_selected="object_hemi_cone_active.tga"
	     image_selected="object_hemi_cone_active.tga"
	     image_unselected="object_hemi_cone.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolHemiCone" scale_image="TRUE"
      tool_tip="Hemicone" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_sphere.tga"
	     image_disabled_selected="object_sphere_active.tga"
	     image_selected="object_sphere_active.tga"
	     image_unselected="object_sphere.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolSphere" scale_image="TRUE"
	     width="24" tool_tip="Sphere" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_hemi_sphere.tga"
	     image_disabled_selected="object_hemi_sphere_active.tga"
	     image_selected="object_hemi_sphere_active.tga"
	     image_unselected="object_hemi_sphere.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolHemiSphere"
	     scale_image="TRUE" tool_tip="Hemisphere" width="24" />
	<button bottom_delta="-23" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_torus.tga"
	     image_disabled_selected="object_torus_active.tga"
	     image_selected="object_torus_active.tga"
	     image_unselected="object_torus.tga" label="" label_selected="" left="4"
	     mouse_opaque="true" name="ToolTorus" scale_image="TRUE" tool_tip="Torus" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_tube.tga"
	     image_disabled_selected="object_tube_active.tga"
	     image_selected="object_tube_active.tga" image_unselected="object_tube.tga"
	     label="" label_selected="" left_delta="23" mouse_opaque="true"
	     name="ToolTube" scale_image="TRUE" tool_tip="Tube" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_ring.tga"
	     image_disabled_selected="object_ring_active.tga"
	     image_selected="object_ring_active.tga" image_unselected="object_ring.tga"
	     label="" label_selected="" left_delta="23" mouse_opaque="true"
	     name="ToolRing" scale_image="TRUE" tool_tip="Ring" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_tree.tga"
	     image_disabled_selected="object_tree_active.tga"
	     image_selected="object_tree_active.tga" image_unselected="object_tree.tga"
	     label="" label_selected="" left_delta="23" mouse_opaque="true"
	     name="ToolTree" scale_image="TRUE" tool_tip="Tree" width="24" />
	<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
	     height="24" image_disabled="object_grass.tga"
	     image_disabled_selected="object_grass_active.tga"
	     image_selected="object_grass_active.tga"
	     image_unselected="object_grass.tga" label="" label_selected=""
	     left_delta="23" mouse_opaque="true" name="ToolGrass" scale_image="TRUE"
	     tool_tip="Grass" width="24" />
	<check_box bottom="-117" control_name="CreateToolKeepSelected" follows="left|top"
	     font="SansSerifSmall" height="16" initial_value="false"
	     label="Keep Tool Selected" left="4" mouse_opaque="true"
	     name="checkbox sticky" width="128" />
	<check_box bottom_delta="-15" control_name="CreateToolCopySelection" follows="left|top"
	     font="SansSerifSmall" height="16" initial_value="false"
	     label="Copy Selection" left_delta="0" mouse_opaque="true"
	     name="checkbox copy selection" width="134" />
	<check_box bottom_delta="-15" control_name="CreateToolCopyCenters" follows="left|top"
	     font="SansSerifSmall" height="16" initial_value="true" label="Center Copy"
	     left_delta="20" mouse_opaque="true" name="checkbox copy centers"
	     width="134" />
	<check_box bottom_delta="-15" control_name="CreateToolCopyRotates" follows="left|top"
	     font="SansSerifSmall" height="16" initial_value="false" label="Rotate Copy"
	     left_delta="0" mouse_opaque="true" name="checkbox copy rotates" width="134" />

floater_directory.xml

Some tabs in the search floater have different background colors, which will cause the text color set by ScrollSelectedFGColor to look off. In this case, ScrollSelectedFGColor is set to dark gray, but the People Search tab's background is also set to dark gray. To fix this, in 1.20 RC9, open floater_directory.xml and scroll down to the People panel. Change:

<scroll_list background_visible="false" bottom="-513" column_padding="0" draw_border="true"
			     draw_heading="true"
			     follows="left|top|right|bottom" height="464" left="4" mouse_opaque="true"
			     multi_select="false" name="results" search_column="2" width="326">

To:

<scroll_list background_visible="false" bottom="-513" column_padding="0" draw_border="true"
			     draw_heading="true" fg_disable_color="1, 1, 1, 1"
                            fg_selected_color="1, 1, 1, 1" fg_unselected_color="1, 1, 1, 1"
			     follows="left|top|right|bottom" height="464" left="4" mouse_opaque="true"
			     multi_select="false" name="results" search_column="2" width="326">

The parameters fg_selected_color and fg_unselected_color override the settings in colors.xml.

Misc XML files

In Dazzle, most info buttons like (?) were given oblong dimensions. In order to fix this, you need to edit the following XML files accordingly:

panel_avatar.xml

Change:

<button bottom_delta="2" follows="left|top" font="SansSerif" halign="center"
height="16" label="i" label_selected="i" left_delta="44"
mouse_opaque="true" name="partner_info"
tool_tip="Click to open partner's profile" width="20" />
<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
height="16" label="?" label_selected="?" left_delta="24"
mouse_opaque="true" name="partner_help" width="20" />

to:

<button bottom_delta="2" follows="left|top" font="SansSerif" halign="center"
height="18" label="i" label_selected="i" left_delta="44"
mouse_opaque="true" name="partner_info"
tool_tip="Click to open partner's profile" width="18" />
<button bottom_delta="0" follows="left|top" font="SansSerif" halign="center"
height="18" label="?" label_selected="?" left_delta="24"
mouse_opaque="true" name="partner_help" width="18" />

floater_about_land.xml

Under the "Options" panel section, change:

<button bottom="-140" enabled="true" follows="left|top" font="SansSerif"
halign="center" height="16" label="?" label_selected="?" left="400"
mouse_opaque="true" name="?" width="20" />

to:

<button bottom="-140" enabled="true" follows="left|top" font="SansSerif"
halign="center" height="18" label="?" label_selected="?" left="400"
mouse_opaque="true" name="?" width="18" />

floater_env_settings.xml

Change:

<button bottom="-40" follows="left|top" font="SansSerif" height="18" label="?"
left="570" name="EnvSettingsHelpButton" width="22" />

to:

<button bottom="-40" follows="left|top" font="SansSerif" height="18" label="?"
left="570" name="EnvSettingsHelpButton" width="18" />

floater_water.xml

12 edits. Anyplace you see:

<button bottom_delta="0" follows="left|top" font="SansSerifSmall" height="15" label="?"

change it to:

<button bottom_delta="0" follows="left|top" font="SansSerifSmall" height="18" label="?"

floater_windlight_options

22 edits. Same change as above. Replace height="15" with height="18".

panel_group_*.xml

Change:

<button bottom="-24" font="SansSerif" halign="center" height="16" label="?"
	     label_selected="?" left="391" name="help_button" width="20" />

to:

<button bottom="-24" font="SansSerif" halign="center" height="16" label="?"
	     label_selected="?" left="391" name="help_button" width="18" />

for

panel_group_general.xml
panel_group_land_money.xml
panel_group_notices.xml
panel_group_roles.xml
panel_group_voting.xml

Viewer Artwork

Starting from scratch

Most of the viewer artwork is in the source drop. Head to the Source_archive and download the 1.9.1.4 artwork file. In linden\indra\newview\skins\textures you'll find the majority artwork files for the classic skin as either .tga or .j2c (Jpeg2000 files). All are named as UUIDs, and will need to be renamed to their proper filenames to match their entries in textures.xml (this can take a long time. There are 316 files you need to rename). If you try to use UUID file names and modify the textures.xml file it won't work.

Several files will also need to be converted to .tga. These are:

16d032e8-817b-4368-8a4e-b7b947ae3889.j2c to tab_top_selected_blue.tga
1ed83f57-41cf-4052-a3b4-2e8bb78d8191.j2c to tab_top_blue.tga
1097dcb3-aef9-8152-f471-431d840ea89e.j2c to tab_left.tga
bea77041-5835-1661-f298-47e2d32b7a70.j2c to tab_left_selected.tga
bf0a8779-689b-48c3-bb9a-6af546366ef4.j2c to tab_bottom_blue.tga
c001d8fd-a869-4b6f-86a1-fdcb106df9c7.j2c to tab_bottom_selected_blue.tga
d8faf8cb-ee6e-b0b5-abd9-bde873ad3461.j2c to toolbar_btn_enabled.tga
f8124d60-2875-c358-7847-2acb63e5400c.j2c to toolbar_btn_disabled.tga
1eddba75-b682-110a-104e-6cdcce616a25.j2c to toolbar_btn_selected.tga

The helper icons on the toolbar are hard coded to load so you can't modify textures.xml. Turn the following into fully transparrent textures:

icn_toolbar_build.tga
icn_toolbar_fly.tga
icn_toolbar_inventory.tga
icn_toolbar_map.tga
icn_toolbar_minimap.tga
icn_toolbar_search.tga
icn_toolbar_snapshot.tga

These files won't display correctly, and must be shrunk to 16x16:

ptt_lock_off.tga
ptt_lock_on.tga

These files you need to create yourself:

Buttons:

flyout_btn_left.tga
flyout_btn_left_selected.tga
flyout_btn_left_disabled.tga
- Remember to make sure the flyout_btn_lefts are 128x24.
flyout_btn_right_disabled.tga

Icons:

icn_play.tga
icn_pause.tga
icn_stop.tga
- Each should be 10x10. Shift the actual graphic to the right or the left so that it'll appear centered on the actual button.

Other:

toolbar_tab.tga (the chatbar backdrop)
toolbar_bg.tga (toolbar backdrop; a solid color will do)
progressbar_track.tga (progress bar backdrop)
progressbar_fill.tga (bar itself)
startup_logo.j2c (the login screen background)
- You need an imaging program that can write Jpeg2000 codestream files (.j2c or.j2k; the two extensions are interchangeable). Copy the lower third portion of the 1.19 image (66864f3c-e095-d9c8-058d-d6575e6ed1b8.j2c) onto the 1.20 version (startup_logo.j2c). The top portion is loaded by html now, and sometimes changes.

Optional artwork:

Go to the Source_archive and download the 1.13 artwork. In there, you'll find classic versions of the buy lindens and buy land icons.
Use my status_no_scripts.tga file. The 1.19.1.4 one is pretty awful. I made it into something decent.

Downloading Classic artwork files

If you wish to skip this step (and I recommend you do) I've renamed all the viewer artwork for you and uploaded them as a zip file here.

Installing

Once you have downloaded the XML and artwork files linked above, or created your own, installation is straightforward. Back up your skins and app_settings folders, then:

Copy colors.xml to \SecondLifeReleaseCandidate\app_settings\
Copy textures.xml to \SecondLifeReleaseCandidate\skins\textures
Copy all other xml files to \SecondLifeReleaseCandidate\skins\xui\[Language]
Copy all artwork to \SecondLifeReleaseCandidate\skins\textures (be sure to "Replace all")
Browse to \SecondLifeReleaseCandidate\skins\textures and delete "rounded_square.tga" and "rounded_square_soft.tga".
Restart Second Life

Congratulations, you now have a Classic skin for Viewer 1.20 (to replace Dazzle).

Skinning How To/Revert 1.20 to a Classic look

Contents

Introduction

Revision History

Editing the XML files

colors.xml

textures.xml

panel_media_controls.xml

panel_voice_controls.xml

floater_tools.xml

floater_directory.xml

Misc XML files

panel_avatar.xml

floater_about_land.xml

floater_env_settings.xml

floater_water.xml

floater_windlight_options

panel_group_*.xml

Viewer Artwork

Starting from scratch

Downloading Classic artwork files

Installing

Navigation menu

Search