Lord Of The Rings Online: Game Systems: Custom UI Skinning in LOTRO

A new game system guide on how to create custom UI skins is available on the official site:

In The Lord of the Rings Online^TM: Shadows of Angmar^TM (LOTRO), players can customize certain elements of the game's user interface (UI), also known as "skinning." While we don't allow you to do a full-scale UI replacement, we do give you the ability to replace selected visual elements of the UI. (A full list of these elements and their sizes is provided at the end of this overview.)

The Directory Structure

All of the UI skins created by users must be located within the "...uiskins" directory. Each user-defined skin should be placed in a separate subdirectory under our pre-defined location, so you may have something like:

"...uiskinsChatRevamp"
"...uiskinsRedToolbar"
"...uiskinsTestSkin"

Inside each user defined skin directory a skin definition file (and accompanying images) is expected. This XML file is named "SkinDefinition.xml" for every skin (discussed below.)

The remaining files in this directory are the media files. The media files are generally TGAs (RGB + alpha).

Note: the "..." directory is where you can find the UserPreferences.ini file. It is usually something like

"C:Documents and SettingsusernameMy DocumentsThe Lord of the Rings Online"

The Skin Definition File Structure

The skin definition provides two pieces of information: the name of the skin (which is displayed on the "User Skins" option panel listbox) and the list of media that the skin replaces. The two XML tags are:

• SkinName - the name of the skin. There should only be one SkinName tag in the file.
• Mapping - the mapping of an ArtAssetID to an image FileName. There will be one mapping in the file for each piece of media that is going to be replaced.

The "Mapping" tag has two parts:

• ArtAssetID - a string representing in internal identification of an image. We provide you a "dictionary" of all valid mappings from which to chose (see below)
• FileName - the local file to use when rendering that ArtAssetID. These can be any media on your drive.

A sample skin file is as follows:

The sample skin is named "RedToolbar" and replaces one piece of media: the toolbar identified by "LetterBoxBottom" is replaced by the file

"...uiskinsRedToolbarletterbox_bottom_red.tga"

Activating Your Skin

You can activate your custom UI skin from within LOTRO.

1. Open the Options panel, Ctrl-O
2. Click "UI Settings"
3. In the "Current User Skin" droplist at the bottom of this window, select your skin.

After you click "Accept", your new UI will be applied!

If your skin is not in the list, it failed to parse. Make sure your tags are all specified and closed!
Currently, the game must be re-launched whenever a new skin is added or a change is made to an existing skin.

Want to learn more? Visit http://www.lotrointerface.com/, home to the LOTRO UI skinning community!

ArtAssetID Dictionary

The following is an alphabetical list of ArtAssetIDs and their sizes that can be
replaced by the game (Note: the monster play versions of these UI elements simply contain the suffix of _mp, as in accomplishment_journal_normal_mp).

Filename	Dimensions
accomplishment_journal_normal	29 x 29
accomplishment_journal_pressed	29 x 29
accomplishment_journal_rollover	29 x 29
bag1	32 x 32
bag1_normal	29 x 29
bag1_pressed	29 x 29
bag1_rollover	29 x 29
bag2	32 x 32
bag2_normal	29 x 29
bag2_pressed	29 x 29
bag2_rollover	29 x 29
bag3	32 x 32
bag3_normal	29 x 29
bag3_pressed	29 x 29
bag3_rollover	29 x 29
bag4	32 x 32
bag4_normal	29 x 29
bag4_pressed	29 x 29
bag4_rollover	29 x 29
bag_inventory	32 x 32
base_box_center	1024 x 1024
base_box_center_silver	1024 x 1024
base_box_titlebar_left	35 x 42
base_box_titlebar_right	35 x 42
base_box_titlebar_top	139 x 42
basepanel_bottomleft	19 x 19
basepanel_bottommid	2 x 3
basepanel_bottomright	19 x 19
basepanel_midleft	3 x 2
basepanel_midright	3 x 2
basepanel_topleft	19 x 19
basepanel_topmid	2 x 3
basepanel_topright	19 x 19
black_translucent	128 x 128
blue_mail_select_highlight	425 x 45
blue_mail_select_highlight_active	435 x 45
blue_mail_select_highlight_active_admin	435 x 45
blue_mail_select_normal	435 x 45
blue_selection	384 x 20
blue_selection_accomplisment_updated	390 x 20
blue_selection_bright	242 x 36
blue_selection_quest_highlight	242 x 36
blue_selection_quest_highlight_active	242 x 36
blue_selection_quest_normal	242 x 36
blue_selection_selectable_reward_highlight	366 x 64
blue_selection_skilltrainer_ghosted	366 x 64
blue_selection_skilltrainer_highlight	366 x 64
blue_selection_skilltrainer_highlight_active	366 x 64
blue_selection_skilltrainer_normal	366 x 64
blue_selection_title_highlight	366 x 64
blue_selection_vendor_item_highlight_active	183 x 64
blue_selection_vendor_item_normal	183 x 64
blue_selection_vendor_item_repair	366 x 64
blue_selection_vendor_item_repair_normal	366 x 64
blue_tracking_select_highlight	225 x 25
blue_tracking_select_highlight_active	225 x 25
blue_tracking_select_normal	225 x 25
box_01_titlebar	512 x 20
box_silver_bottom	103 x 36
box_silver_bottom_left	36 x 36
box_silver_bottom_left_noadorn	36 x 36
box_silver_lower_right	36 x 36
box_silver_lower_right_noadorn	36 x 36
box_silver_side_left	36 x 105
box_silver_side_right	36 x 237
box_silver_upper	434 x 37
box_silver_upper_left	36 x 36
box_silver_upper_left_noadorn	36 x 36
box_silver_upper_right	36 x 36
box_silver_upper_right_noadorn	36 x 36
button_autoattack_highlight	63 x 63
button_autoattack_highlight_mouseover	63 x 63
button_autoattack_highlight_pressed	63 x 63
button_autoattack_mouseover	63 x 63
button_autoattack_normal	63 x 63
button_autoattack_normal_pressed	63 x 63
button_main_mouseover	51 x 34
button_main_normal	51 x 34
button_main_pressed	51 x 34
chat_back	32 x 32
chat_entry_focussed	13 x 20
chat_tab_tier1_middle_back_e	13 x 28
chat_tab_tier1_middle_back_n	183 x 28
chat_tab_tier1_middle_back_w	204 x 28
chat_tab_tier1_middle_front_e	13 x 28
chat_tab_tier1_middle_front_n	182 x 28
chat_tab_tier1_middle_front_w	204 x 28
chat_unread_overlay	16 x 16
crafting_highlight	29 x 29
crafting_normal	29 x 29
crafting_pressed	29 x 29
fellowship_normal	29 x 29
fellowship_pressed	29 x 29
fellowship_rollover	29 x 29
green_selection_vendor_item_stacktoggleon	183 x 64
green_selection_vendor_item_stacktoggleon_highlight	183 x 64
im_button_close_highlight_active	100 x 19
im_button_close_normal	14 x 14
im_button_close_pressed	14 x 14
im_button_close_rollover	14 x 14
im_button_ghosted	100 x 19
im_button_normal	100 x 19
im_button_pressed	100 x 19
im_button_rollover	100 x 19
im_chat_alert	14 x 14
inventory_normal	29 x 29
inventory_pressed	29 x 29
inventory_rollover	29 x 29
journal_normal	29 x 29
journal_pressed	29 x 29
journal_rollover	29 x 29
main_menu_normal	30 x 30
main_menu_pressed	30 x 30
main_menu_rollover	30 x 30
map_normal	30 x 30
map_pressed	30 x 30
map_rollover	30 x 30
money_player_all_background	265 x 28
no_hope_no_dread	238 x 238
options_panel_divider	400 x 30
panel_border	256 x 256
pedigree_bg	392 x 247
quest_normal	29 x 29
quest_pressed	29 x 29
quest_rollover	29 x 29
selection_inanimate_backdrop	229 x 65
social_panel_list_elements_highlight_bottom_center	44 x 3
social_panel_list_elements_highlight_bottom_left	3 x 3
social_panel_list_elements_highlight_center	94 x 75
social_panel_list_elements_highlight_lower_right	3 x 3
social_panel_list_elements_highlight_middle_left	3 x 43
social_panel_list_elements_highlight_middle_right	3 x 44
social_panel_list_elements_highlight_top_center	44 x 3
social_panel_list_elements_highlight_top_left	3 x 3
social_panel_list_elements_highlight_top_right	3 x 3
social_panel_list_elements_normal_bottom_center	44 x 3
social_panel_list_elements_normal_bottom_left	3 x 3
social_panel_list_elements_normal_lower_right	3 x 3
social_panel_list_elements_normal_middle_left	3 x 44
social_panel_list_elements_normal_middle_right	3 x 44
social_panel_list_elements_normal_top_center	44 x 3
social_panel_list_elements_normal_top_left	3 x 3
social_panel_list_elements_normal_top_right	3 x 3
tab_tier1_middle_back_e	13 x 28
tab_tier1_middle_back_e_sm	13 x 20
tab_tier1_middle_back_n	183 x 28
tab_tier1_middle_back_n_sm	131 x 20
tab_tier1_middle_back_w	204 x 28
tab_tier1_middle_back_w_sm	146 x 20
tab_tier1_middle_front_e	13 x 28
tab_tier1_middle_front_e_sm	13 x 20
tab_tier1_middle_front_n	182 x 28
tab_tier1_middle_front_n_sm	130 x 20
tab_tier1_middle_front_w	204 x 28
tab_tier1_middle_front_w_sm	146 x 20
textbutton_left_ghosted	147 x 20
textbutton_left_highlighted_mouseover	147 x 20
textbutton_left_highlighted_normal	147 x 20
textbutton_left_highlighted_pressed	147 x 20
textbutton_left_mouseover	147 x 20
textbutton_left_normal	147 x 20
textbutton_left_pressed	147 x 20
textbutton_mid_ghosted	120 x 20
textbutton_mid_highlighted_mouseover	120 x 20
textbutton_mid_highlighted_normal	120 x 20
textbutton_mid_highlighted_pressed	120 x 20
textbutton_mid_mouseover	120 x 20
textbutton_mid_normal	120 x 20
textbutton_mid_pressed	120 x 20
textbutton_right_ghosted	20 x 20
textbutton_right_highlighted_mouseover	20 x 20
textbutton_right_highlighted_normal	20 x 20
textbutton_right_highlighted_pressed	20 x 20
textbutton_right_mouseover	20 x 20
textbutton_right_normal	20 x 20
textbutton_right_pressed	20 x 20
tga_empty	2 x 2
titlebar_X_2	16 x 16
titlebar_X_2_mouseover	16 x 16
titlebar_X_2_pressed	16 x 16

The contents and format of the actual XML file appear below.