Jump to content
vampir

Guide 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 2
  • Upvote 9

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites


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

Share this post


Link to post
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.

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

  • Recently Browsing   0 members

    No registered users viewing this page.



  • Posts

    • Who can tell me how i can edit npc enchant with different enchant? i mean i have one npc for max enchant +150. This item need to be +0 to enchant it. and i want the secound one to be from 150 (not from +0) to +300.  Now, the problem is it in .JAVA file. How i can duplicate npc to work both? I can change just id? (i try this and doesn;t work). Thank's
    • Some words about your ideas:   You are moving wrong.   Players in 2k18 wont see the details you mentioned. What they need?   30 minutes to get S grade 2 days to get max enchant play until become hero (no worries about olympiad system if its good or not) move to another server. They wont look if your project is aCis or frozen They wont prefer your server instead of 'mine' cause of your olympiad. They wont share your website link because of those ideas.   You can add whatever you want inside, the way you described the oly seems good but do not even add it as a feature or what ever.   Why should you focus on olympiad balance since all those years they learned an unbalanced olympiad?     Do you think that all your effort - money will be a good idea for them?     Some words about the team you looking for:   Do not search for people by doing thins. By saying your idea is just a terrible thing that will brake all the things you have in your head. why? because:   A l2dev wont even read what you wrote up there A wannabe admin that do not know what 'code' means , he will agree but guess what. He wont even give you a good idea for you just because he isnt in your head and he will just want to 'part of the X project' A single person who looking for a guy to open a server is just ... NO... get real...   By saying what you want to do, you are not getting what exactly you need, you are actually seem like a guy who wants 1-2 people to give some money for you.    Just make a classic interlude AT FEATURES (you know what i mean) , add what ever code comes in your mind and then, find a good and trusted guy to be a partner. 
  • Topics

×