Jump to content

Editing Html Windows


Recommended Posts

Basics:

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

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

 

- NoScrollBar (Not available in INTERLUDE)

Default: xZRmFNU.png No Scroll Bar: jweUTrL.png

<html noscrollbar>

- IMGSRC

SxDezwm.png

<html imgsrc="l2ui_ch3.tutorial_img10">

- Title

3u0VGtj.png

<title>Text</text> 

- BR

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 (Not available in INTERLUDE)

<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 (Not available in INTERLUDE)

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.

 

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

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 (Only following colors are available in INTERLUDE: 000000, ffffff, ff0000, ff00ff, ffff00, 00ff00, 00ffff, 0000ff)

V1Xx0Q9.png

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

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> 

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

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>

 

Edited by vampir
  • Like 5
  • Thanks 3
  • Upvote 9
Link to comment
Share on other sites

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

PqDEpo5.png

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

Trk9YyN.png

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

<table cellpadding=0> 

- Border("0" by default)

Ji310eI.png

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

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> 

Usefull features:

- Combobox

FWt7npv.png

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

2EoAwla.png

<edit width=80 var="editName">

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

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

ARFP1AE.png

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

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

http://pastebin.com/9Zsj4Fxe 

Edit Box that cannot be edited:

mv7kVqS.png

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

xMO08zl.png

(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

9NcTsEk.png

<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

Arme9CR.png

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

8iCzHQS.png

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

pLwznzk.png

Edited by vampir
  • Like 2
  • Thanks 2
  • Upvote 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Added Bypass to Website:

toBYkll.png

 

Edit Box that cannot be Edited:

mv7kVqS.png

 

Clan Crest in Html File:

xMO08zl.png

 

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 by vampir
Link to comment
Share on other sites

  • 3 weeks later...


<!-- This is comment and won't be displayed -->


<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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.




×
×
  • Create New...