Jump to content
Sign in to follow this  
Psyancy

Editing Html Windows In H5 [Lineage 2]

Recommended Posts

Hello members of LordCraft, here is a tutorial about editing html windows for High Five Lineage 2 Client.

 

Basics:

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

I don't think it's ever required, but i always add that so i am not sure.

 

► NoScrollBar

Default:

xZRmFNU.png

 

No Scroll Bar:No Scroll Bar:

jweUTrL.png

<html noscrollbar>

► Title

3u0VGtj.png

<title>Text</text> 

► BR (aka spaces)

qQBmNd4.png

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

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

List of all possible fonts in H5:

ZEtC5GY.png

 

► You can change both

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

Buttons and Action:

► Normal Bypass

aMMRtfJ.png

<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

toBYkll.png

<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

LUnjjIR.png

<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.

 

Simple Image:

amrKh6E.png

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

Tables:

1jeFefb.png

<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(uses Html Color Code)

V1Xx0Q9.png

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

► Background(uses image from the Game Client)

vOginPe.png

<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> 

► Align

Pv5og5d.png

                <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)

Nq0yYZe.png

<table cellspacing=10 bgcolor=ffffff>

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

PqDEpo5.png

<table cellpadding=10 bgcolor=ffffff> 

► Border("0" by default)

Ji310eI.png

<table border=3> 

Window Sizes:

► NpcHtmlWindow

width=294 height=359 

► Community Board

Size without <br> at the beginning: width=773 height=506 

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.

Size with <br> at the beginning: width=773 height=496 

► Tutorial Window

width=294 height=316

- Example:

xt1c2lN.png

<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> 

Useful Features:

► Combobox

FWt7npv.png

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

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

2EoAwla.png

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

WaI6nVR.png

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

zIWxK1o.png

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

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

XZvOMmb.png

<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:

6NDq3po.png

<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">

0hXI1vR.png

<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>

ARFP1AE.png

<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>

d8MLir4.png

<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"> 

tsfu1ao.png

<table cellspacing=0 cellpadding=0 width=250 height=50 background="L2UI_CT1.Windows_DF_Drawer_Bg">
        <tr>
                <td width=8><br></td>
                <td width=35>
                        <table cellspacing=0 cellpadding=0><tr>
                                <td height=14><br></td>
                        </tr><tr>
                                <td height=36>
                                        <img src="icon.skill0268" width=32 height=32>
                                </td>
                        </tr></table>
                </td>
                <td width=159>
                        <table cellspacing=4 cellpadding=0 width=159>
                                <tr>
                                        <td height=20>
                                                <font name="hs16" color="B71800">Song of Wind</font>
                                        </td>
                                </tr>
                                <tr>
                                        <td height=20>
                                                <font color="C15D15">Speed + 20</font>
                                        </td>
                                </tr>
                        </table>
                </td>
                <td width=35>
                        <table cellspacing=0 cellpadding=0><tr>
                                <td height=14><br></td>
                        </tr><tr>
                                <td height=36>
                                        <button value="" action="bypass -h npc_%objectId%_Chat 1" width=33 height=32 back="L2UI_CH3.PremiumItemBtn" fore="L2UI_CH3.PremiumItemBtn">
                                </td>
                        </tr></table>
                </td>
                <td width=8>
                        <br>
                </td>
        </tr>
</table>

Edit Box that cannot be edited:

mv7kVqS.png

<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>

xMO08zl.png

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

 

Download H5 Icons:

Hidden Content
You'll be able to see the hidden content once you reply to this topic.

 

Credits for the tutorial: vampir

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×