Template Tutorial
From Shaiya Wiki
Functions You Need to Know
There are many functions used in HTML code, the code wikis use(unless specified). To become successful you must know the basic ones of by heart.
All terms that are started must have an end. To end a term you must rename the term but with a / in front. For instace a term named <lookout> can be ended at the point you want it to by typing </lookout>. In simpler words / equals end so </lookout> equals <end lookout>
Creating a table:
There are two ways of making a table. The first way: <table> Creates a table. Inside the brakets you may define; border, cellspacing, cellpadding, width, bgcolor, background, align, hspace and vspace, hight, frame, rules, and border color. <tr> (Table Row) This defines a row. <td> (Table Data) This creates and alows you to edit one cell in a row. Ending one cell and starting another cell on the same row stacks the cells horizontally. These are defined when you make the table or for each row/cell. To define the table/tr/td type <*table/tr/td *insert a funtion here=*insert number/data here>
The second way:
{| Creates table and first table row. Define; border, cellspacing, cellpadding, width, bgcolor, background,
align, hspace and vspace, hight, frame, rules, and border color; before first cell is created.
|- This defines the next row or ends the current row.
|| This creates and alows you to edit one cell in a row. Ending one cell and starting another cell on the same
row stacks the cells horizontally.
{| *insert a function here=*insert number/data here
! *insert text/fuction here
For instance:
{| border=5 width=100%
! Icon
! Name
! Helm
! Upper
! Lower
! Glove
! Boot
! Weapon
! Shield
! Amulet
! Ring
! Loop
! Effect
|-
!{{{icon}}}
!{{{name}}}
!{{#ifeq: {{{helm}}} | yes | http://s5.tinypic.com/ivbkoj_th.jpg | }}
!{{#ifeq: {{{upper}}} | yes | http://s5.tinypic.com/2ljrxiu_th.jpg | }}
!{{#ifeq: {{{lower}}} | yes | http://s5.tinypic.com/j9ud50_th.jpg | }}
!{{#ifeq: {{{glove}}} | yes | http://s5.tinypic.com/4igevd_th.jpg | }}
!{{#ifeq: {{{boot}}} | yes | http://s5.tinypic.com/317hzc5_th.jpg | }}
!{{#ifeq: {{{weapon}}} | yes | http://s5.tinypic.com/wclmxk_th.jpg | }}
!{{#ifeq: {{{shield}}} | yes | http://s5.tinypic.com/2yjpz13_th.jpg | }}
!{{#ifeq: {{{amulet}}} | yes | http://s5.tinypic.com/2mheb9j_th.jpg | }}
!{{#ifeq: {{{ring}}} | yes | http://s5.tinypic.com/2uzq8p2_th.jpg | }}
!{{#ifeq: {{{loop}}} | yes | http://s5.tinypic.com/demnbq_th.jpg | }}
!{{{effect}}}
|-
|}
is the same as
<table border=5 width=100%>
<tr> <td> Icon </td>
<td> Name </td>
<td> Helm </td>
<td> Upper </td>
<td> Lower </td>
<td> Glove </td>
<td> Boot </td>
<td> Weapon </td>
<td> Shield </td>
<td> Amulet </td>
<td> Ring </td>
<td> Loop </td>
<td> Effect </td> </tr>
<tr>
<td>{{{icon}}}</td>
<td>{{{name}}}</td>
<td>{{#ifeq: {{{helm}}} | yes | http://s5.tinypic.com/ivbkoj_th.jpg | }}</td>
<td>{{#ifeq: {{{upper}}} | yes | http://s5.tinypic.com/2ljrxiu_th.jpg | }}</td>
<td>{{#ifeq: {{{lower}}} | yes | http://s5.tinypic.com/j9ud50_th.jpg | }}</td>
<td>{{#ifeq: {{{glove}}} | yes | http://s5.tinypic.com/4igevd_th.jpg | }}</td>
<td>{{#ifeq: {{{boot}}} | yes | http://s5.tinypic.com/317hzc5_th.jpg | }}</td>
<td>{{#ifeq: {{{weapon}}} | yes | http://s5.tinypic.com/wclmxk_th.jpg | }}</td>
<td>{{#ifeq: {{{shield}}} | yes | http://s5.tinypic.com/2yjpz13_th.jpg | }}</td>
<td>{{#ifeq: {{{amulet}}} | yes | http://s5.tinypic.com/2mheb9j_th.jpg | }}</td>
<td>{{#ifeq: {{{ring}}} | yes | http://s5.tinypic.com/2uzq8p2_th.jpg | }}</td>
<td>{{#ifeq: {{{loop}}} | yes | http://s5.tinypic.com/demnbq_th.jpg | }}</td>
<td>{{{effect}}}</td></tr></table>
These functions are used to modify a table from default(defalt is all values at 0 except cellpadding[specified by writer of the programming language], Align[default left], hight[autodetect], Backfround[white]: Border Adds a border around each cell in the table. Numbers over and under 1 only affect outer border size. Defined with a number. Can also define border color after this. Cellspacing Affects the distance between each cell in a table. Defined with a number. Cellpadding Affects the distance between the cell wall and the contents of the cell. Defined with a number. Width Used to ajust the width of each cell. Defined with a number. Bgcolor Changes the background color acording to which color you define. Defined with a color/color code Background Sets background to the url of the image. Align Sets which side of the page the table will sit. Define Left or Right Hspace Used to ajust amount of horizontal space between table and surrounding text. Vspace Used to ajust amount of vertical space between table and surrounding text. Height Ajusts the height of each cell in the table. Not really needed as table auto ajusts to text/images. Frame Alows choice of where outside border covers. VOID, BOX, BORDER, ABOVE, BELOW, LHS, RHS, HSIDES, and VSIDES can be specified. Rules Alows choice of where the inside borders cover. NONE, ALL, COLS, ROWS, and GROUPS can be specified. Border Color Alows the changing of border color.
How a template works
- Templates are pages of code that are written to serve a given purpose and/or display specific information through parameter use.
- It works similar to displaying an image from a web host.
In this way the template does not need to be retyped multiple times. Also, any upgrade modifications to the template affects other pages that are using it, so make sure that any changes won't adversely affect the target pages. A little change can make a huge difference.
The template must first be created and when creating a template use the format Template:<<pagename>> for the name otherwise you will end up with faulty links when attempting to call the template.
Once the the template is completed, it can be called from the base page by typing:
{{ <<insert name of template here>>
}}
Typing out this:
{{Armor
}}
Will import the armor template from this page and do the same thing as if you had typed this.
<includeonly>
<table style="background: #f9f9f9; border: 1px #aaaaaa solid;"><tr><td style="vertical-align: top;">
<table style="width: 35em; text-align: left; font-size: 95%; vertical-align: top; background: #f9f9f9;">
<tr><td colspan="2" style="font-size: larger; text-align: center; background: #f2f2f2">'''{{PAGENAME}}'''</td></tr>
<tr><td colspan="2" style="text-align:center; background: #ffffff">''{{{Desc}}}''</td></tr>
<tr><td style="width: 125px; vertical-align: top;">'''Level Required:'''
</td><td>{{{Level}}}</td></tr>
<tr><td style="vertical-align: top;">'''Equip Spot:'''</td>
<td>{{{Slot}}}</td></tr>
<tr><td style="vertical-align: top;">'''Defense Power:'''</td>
<td>{{{Def}}}</td></tr>
<tr><td style="vertical-align: top;">'''Resistance:'''</td>
<td>{{{Resist}}}</td></tr>
<tr><td style="vertical-align: top;">'''Location:'''</td>
<td>{{{Location}}}</td></tr>
<tr><td style="vertical-align: top;">'''Price:'''</td>
<td>{{{Buy}}}</td></tr>
<tr><td style="vertical-align: top;">'''Sellback:'''</td>
<td>{{{Sell}}}</td></tr>
<tr><td style="vertical-align: top;">'''Notes:'''</td>
<td>{{{Notes}}}</td></tr></table></td>
<td style="vertical-align: top;">[[Image:{{{Image|ImageNeeded.jpg}}}|thumb|center]]</td></tr>
</table>
</includeonly>
- This would be a lot to write out and may be confusing to copy and paste.
By itself the Armor template looks like this:
|
|||||||||||||||||||||
The parameters like {{{Slot}}} and {{{Def}}} can be entered by assigning them values within the template call.
{{Armor *Calls Armor template
|Slot = Helmet *Assigns the value Helmet to {{{Slot}}}
|Def = 7 *Assigns the value 7 to {{{Def}}}
}}
This will then display the assigned values given to {{{Slot}}} and {{{Def}}} for that particular template call. If a parameter is not assigned a value, it will be displayed by default, as shown below.
|
|||||||||||||||||||||
To 'hide' a parameter that has an unassigned value you can do this : {{{ x |}}}.
The '|' at the end also allows you to enter a default value as well : {{{ x | y }}}.
In this case if parameter 'x' is not included in the template call 'y' will be displayed.
To box a function for display you can do this :
put <pre> before a function, word, or paragraph to box the intended digits
put </pre> to end the box
Anything inside the box will not do a function but instead appear as it was typed
