Guide Editing Html Windows

vampir · February 13, 2015

Basics:

<html><body>Content of the page</body></html>

It is not required to add <html><body> tags.

- NoScrollBar (Not available in INTERLUDE)

Default: No Scroll Bar:

<html noscrollbar>

- IMGSRC

<html imgsrc="l2ui_ch3.tutorial_img10">

- Title

<title>Text</text>

- BR

Text Line 1<br1>
Text Line 2<br>
Text Line 3

Changing Text

- You can change the color

<font color="882323">Red Text</font>

Number 882323 is Html Color Code, you can use this web to get them: http://html-color-codes.info/

- You can change the font (Not available in INTERLUDE)

<font name="hs16">Big Text</font>

List of all possible fonts in H5:

- You can change both

<font name="__SystemEditBoxFont" color="666666">Text</font>

Buttons and Action:

- Normal Bypass

<a action="bypass -h npc_%objectId%_Chat 1">Normal</a>
<font color="b31a1a"><a action="bypass -h npc_%objectId%_Chat 1">Colored</a></font>

- Bypass to Website (Not available in INTERLUDE)

<a action="url !2265">Go to Web</a>

Note: 2265 is Id in sysstring-e.dat containing Web Page that will open. Just Ids 2265, 2266 and 2267 are available

- Buttons

<button value="Button Name" action="bypass -h npc_%objectId%_Chat 1" width=100 height=30 back="L2UI_CT1.Button_DF_Down" fore="L2UI_CT1.Button_DF">

fore - Image of the button that shows up when mouse cursor is away

back - Image that shows when player clicks on the button

What about image that shows when cursor is on image, but it's not clicked? Game Client is taking content of fore and adds "_over" at the end. For example "L2UI_CT1.Button_DF_Over". It's NOT possible to change that path. Adding "over="blabla"" will not work.

- Action Prefix

There are 3 types of prefixes for action="" tag:

1. "Bypass -h" - Use it in Npc Window(it closes page upon click). It can also be used in Community Board, but NOT IN INTERLUDE!

2. "Bypass" - Use it in Npc Window or Community Board

3. "link" - Use it in Tutorial Window

Setting bypass/link in action will trigger RequestBypassToServer or RequestTutorialLinkHtml packet upon click.

Simple Image:

<img src="L2UI_CH3.map_Moon" width=32 height=32>

Tables

<table width=300>
	<tr>
		<td width=100>
			Text 1
		</td>
		<td width=100>
			Text 2
		</td>
		<td width=100>
			Text 3
		</td>
	</tr>
	<tr>
		<td width=100>
			Text 4
		</td>
		<td width=100>
			Text 5
		</td>
		<td width=100>
			Text 6
		</td>
	</tr>
</table>

<tr> - New Line

<td> - New Column

- Sizes

Width

Fixwidth - Simple text will not resize the table in width

Height

- Bgcolor (Only following colors are available in INTERLUDE: 000000, ffffff, ff0000, ff00ff, ffff00, 00ff00, 00ffff, 0000ff)

<table bgcolor=b31a1a>
	<tr>
		<td>
			Some text
		</td>
	</tr>
</table>

Value of bgcolor is HTML color code, you can get them from Gimp, Photoshop or this web: https://html-color-codes.info/

- Background (Not available in INTERLUDE)

<table cellspacing=0 cellpadding=0 background="icon.skill0226">
	<tr>
		<td>
			<button value="" action="bypass -h npc_%objectId%_Chat 1" width=34 height=34 back="L2UI_CH3.menu_outline_Down" fore="L2UI_CH3.menu_outline">
		</td>
	</tr>
</table>

Value of Background is image from Game Client UTX or U files. You can also use Server Side image if you have PledgeCrest addon.

- Align

                <td width=100 align=right>
			Text 1
		</td>
		<td width=100 align=left>
			Text 2
		</td>
		<td width=100>
			<center>
			Text 3
			</center>
		</td>

- Cellspacing(it is set to "2" by default)

<table cellspacing=10 bgcolor=ffffff>

Edited September 12, 2018 by vampir

vampir · February 13, 2015

- Cellpadding(it is set to "1" by default)

<table cellpadding=10 bgcolor=ffffff>

If you have problem with last letter or 2 last letters of text to be dropped into next line like this:

cellpadding being > 0 is the problem. Set it to 0, for example:

<table cellpadding=0>

- Border("0" by default)

<table border=3>

Window Sizes:

- NpcHtmlWindow

width=294 height=359

- Community Board

HIGH FIVE: Size without <br> at the beginning: width=773 height=506 
INTERLUDE: Size without <br> at the beginning: width=630 height=465

Note: Always 10 first pixels of Community Board Height are hidden. <br> will lower everything by 9 pixels, so you should always use it at the beginning of the Community Board Html.

HIGH FIVE: Size with <br> at the beginning: width=773 height=496
INTERLUDE: Size with <br> at the beginning: width=630 height=455

- Tutorial Window

width=294 height=316

- Example:

<table border=0 cellpadding=0 cellspacing=0 width=294 height=359 background="L2UI_CH3.refinewnd_back_Pattern">
	<tr>
		<td height=359>
			<br>
			<br>
			<center>
			Some Text
			</center>
		</td>
	</tr>
</table>

Usefull features:

- Combobox

<combobox width=80 var="comboList" list="Choice 1;Choice 2;Choice 3">

- Edit(You can't press enter on it, to skip to new line)

<edit width=80 var="editName">

<edit width=80 var="editName2" type="password">

<edit width=80 var="editName3" type="number">

- Multiedit(Scrollbar Up and Down arrows are always present)

<multiedit width=80 height=80 var="multiEditName">

- What is var="multiEditName" for?

So you can use it in bypass, example:

<a action="bypass -h npc_%objectId%_PetitionContentBypass $multiEditName">Send Petition</a>

$multiEditName will be replaced by content of the Multiedit(same for Edit, Combobox)

Nice Examples:

<button value="" action="bypass -h npc_%objectId%_Chat 1" width=32 height=32 back="L2UI_CT1.MiniMap_DF_PlusBtn_Red_Down" fore="L2UI_CT1.MiniMap_DF_PlusBtn_Red">

(INTERLUDE doesn't handle background tag, such images must be put directly into client)

<table border=0 cellspacing=0 cellpadding=0 width=32 height=32 background="icon.accessary_phoenixs_ring_i00"><tr><td>
    <table cellspacing=0 cellpadding=0 width=34 height=34 background="L2UI.item_click">
        <tr><td><br></td><td height=16><br></td></tr>
        <tr>
            <td width=16><br></td>
            <td width=18>
                <table height=17 cellspacing=0 cellpadding=0 background="L2UI_CT1.Windows_DF_TooltipBG">
                    <tr>
                        <td height=17 width=17 align=center>
                            <font color="FFFFFF">A</font>
                        </td>
                    </tr>
                </table>
</td></tr></table></td></tr></table>

(INTERLUDE doesn't handle background tag, such images must be put directly into client)

<table cellspacing=0 cellpadding=0 width=130 height=124 background="L2UI_CH3.refinegrade2_03">
	<tr>
		<td width=170 align=center>
			<img src="icon.skill5762" width=32 height=32>
		</td>
	</tr>
</table>

<button value="" action="bypass -h npc_%objectId%_Chat 1" width=15 height=15 back="L2UI.CheckBox_checked" fore="L2UI.CheckBox_checked">
<button value="" action="bypass -h npc_%objectId%_Chat 1" width=15 height=15 back="L2UI.CheckBox" fore="L2UI.CheckBox">

http://pastebin.com/9Zsj4Fxe

Edit Box that cannot be edited:

(INTERLUDE doesn't handle background tag, this is not possible to be done)

<table>
<tr><td>
	<table height=21>
            <tr><td width=40>
		Fee: 
	    </td></tr>
	</table>
</td><td>
	<table width=125 height=21 background="L2UI_CT1.CharacterPassword_DF_EditBox">
	    <tr>
		<td fixwidth=121 align=right>
		    123
		</td><td width=4>
			<br1>
		</td></tr>
	</table>
</td></tr>
</table>

(INTERLUDE doesn't handle background tag, simple <img src="Crest.crest_%serverId%_%clanCrestId%" width=16 height=16> must be put)

My Clan Crest:<br1>
<table cellpadding=0 cellspacing=0 width=16 height=16 background="Crest.crest_%serverId%_%clanCrestId%">
	<tr>
		<td width=16 height=4>
			<img src="L2.NonEdistingImage" width=16 height=5>//For getting non Transparent Black Color
		</td>
	</tr><tr>
		<td width=16 height=12>
			<br>
		</td>
	</tr>
</table>

Note: %serverId% and %clanCrestId% should be replaced in Java Files by real values. Server Id will be most likely 1, Clan Crest can be 2033832109 for example

Usefull Icons & Textures:

High Five in PNG: https://www.4shared.com/rar/aDWwBOU2ba/Icon.html

Interlude in TGA: https://mega.nz/#!cNVFiCaK!Korm1LZKRQbMtBqwuvaJs3AYJ7_svd8NJa1yTdq-lHg

If i forgot about something, let me know. I will try to make it larger in time

Goddness of Destruction:

- Tooltip

<button width=32 height=32 tooltip="Click here to find out more!" back="L2UI_CH3.Botsystem_DF_Key2" fore="L2UI_CH3.Botsystem_DF_Key2"></button>

- Itemtooltip

<button width=32 height=32 itemtooltip="57" back="L2UI_CH3.aboutotpicon" fore="L2UI_CH3.aboutotpicon"></button>

It doesn't matter what you put in back and fore, icon will be icon of the item anyway.

- Icon Buttons(Since ERTHEIA)

<button align="LEFT" icon="RETURN" action="bypass -h npc_%objectId%_Chat 0">Go back</button>

Icon value can be: NORMAL, QUEST, TELEPORT, RETURN

CENTER and RIGHT align:

Edited September 9, 2018 by vampir

Wolf Bitch · February 13, 2015

Updated with windows sizes, they are useful if you want to put image on the whole background or change its color

What else can be added?

on h5 you can add background image also on the npc's html's you can add this also

Hl4p3x · February 13, 2015

Fucking awesome guide, thanks!

vampir · February 13, 2015

on h5 you can add background image also on the npc's html's you can add this also

Thanks, added

Wolf Bitch · February 13, 2015

Thanks, added

np mate ;d ,gj again

kyosume · February 13, 2015

Good stuff.

vampir · February 19, 2015

Added Bypass to Website:

Edit Box that cannot be Edited:

Clan Crest in Html File:

Let me know if there are any not long html things that you cannot code, so i will work on them and add as example here

Edited February 19, 2015 by vampir

HammerV2 · March 13, 2015

Thanks! and that rar its amazing!

Rootware · March 13, 2015

<edit width=80 var="editName2" type="number">

Only digits.

vampir · March 13, 2015

<edit width=80 var="editName2" type="number">

Only digits.

Added, thank you

Rootware · March 13, 2015

<edit width=80 var="editName2" length="10"> // max 10 symbols

bypass -h npc_12345_Chat // window will be closed after click

bypass npc_12345_Chat // window not closed

lord_rex · March 16, 2015

Nice and long description man. +1 is given. However you should make one like this for IL too, IL client has less things allowed from these HTML codes.

janiko · April 1, 2015

best guides, thank you for your share

Synerge · April 9, 2015

Nice, I never knew that you can make bypasses to websites, and never knew what -h means xD

Guide Editing Html Windows

Recommended Posts

vampir

vampir

Wolf Bitch

Hl4p3x

vampir

Wolf Bitch

kyosume

vampir

HammerV2

Rootware

vampir

Rootware

lord_rex

janiko

Synerge

Create an account or sign in to comment

Create an account

Sign in

vampir

vampir

vampir

Posts

Topics

Browse

Activity

Store