Template:Arcanist/Skill Tree/doc

The per-class Skill Tree templates (Template:Arcanist/Skill Tree, Assassin/Skill Tree, Huntress/Skill Tree, Knight/Skill Tree, Necromancer/Skill Tree, Samurai/Skill Tree) are data templates that hold one class's full skill-tree layout as hover nodes, and are transcluded into the Skill Tree page.

Overview

There is one of these templates per class. Each one stores that class's entire skill tree as a block of wikitext: a == <Class> Skill Trees == heading, a <tabber> with two named tabs (the class's two ability/weapon paths), and inside each tab the 18 skill nodes laid out as rows of Template:ImageTooltip calls. They take no parameters — all content is hard-coded inside each template. The Skill Tree page transcludes all six ({{Knight/Skill_Tree}}, etc.) inside its own outer tabber, and separately lists the animated showcase via Template:DynamicGifDisplay. Editors maintain these templates whenever a class's skill nodes change.

The two tabs per class are:

Class	Tab 1	Tab 2
Knight	Shield	Emblem
Samurai	Kunai	Star
Huntress	Trap	Bomb
Assassin	Poison	Cloak
Necromancer	Skull	Scripture
Arcanist	Jewel	Orb

Parameters

These templates take no template parameters — they are pure data. The "parameters" an editor actually fills are the fields of each Template:ImageTooltip node inside them:

Parameter	Required?	What it does	Example
`img`	Required	The node's icon, as `base;hover` (two file names separated by a semicolon): the first image shows normally, the second shows on hover. Live trees use the placeholder pair below for every node until art is ready.	`img=SpinningQuestion.gif;HoverSpinningQuestion.gif`
`title`	Required	The skill's name, shown as the tooltip heading. Escape an apostrophe as `'`.	`title=Unyielding Bastion`
`content`	Required	The skill description shown in the tooltip. Usually wrapped in `<p>...</p>` with key numbers highlighted via `<span>...</span>` and line breaks via `<br>`.	`content=<p>Gain <span>+2 defense </span>for <span>3s </span>(<span>Max 20</span>)</p>`

How to use

Structure of one template. Reading top to bottom in the source, a tab is a vertical flex column built from the top row of the tree down to the single root node at the bottom, in this node count per row: 3 nodes, 2, 3, 2, 2, then 1. That is 6 + 2 + 3 + 2 + 2 + 1... — in practice each tab contains 18 nodes total (the in-game tree has 3 paths × 6 rows = 18 nodes), grouped into flex rows. Each row is a <div style="display:flex; gap:...;"> holding that row's

nodes; rows of three use gap:20px and rows of two use gap:40px so columns line up. The single bottom node is placed bare (not inside a flex div). The whole column sits in <div style="display:flex; flex-direction:column; align-items:center; row-gap:15px;">.

Skeleton of a single node (this is the unit you copy):

img = base;hover images.
title = the skill name.
content = the description; use <span> to colour/emphasise numbers and <br> for new lines (e.g. tier-point damage tables: "0–8TP: 13 Damage", "9TP: 16 Damage", ...).

How they feed the Skill Tree page. The Skill Tree page does not contain any nodes itself. It has an outer <tabber> (one tab per class) and each class tab just transcludes the matching data template — for example the Knight tab is only {{Knight/Skill_Tree}}. (Note the page uses the underscore form Knight/Skill_Tree = the title Template:Knight/Skill Tree.) Below the trees, the page calls {{DynamicGifDisplay}} with a long list= of Skill Name:Gif-FileName.gif; pairs — that is the animated "Skill Tree Showcase". The GIF list is maintained separately on the Skill Tree page itself, not inside these data templates, so when you add a new skill you typically add the node here and add its GIF entry to the DynamicGifDisplay list on the Skill Tree page.

To edit an existing skill: open the class template, find the node by its title=, and edit the content= (or title/img). Save.

To add a skill: decide which tab (path) and which row it belongs to, then paste a new

block into that row's flex <div>, keeping it among the correct siblings so the layout stays aligned. Match the row's existing gap spacing. Then add the matching Title:Gif-Title.gif; entry to the DynamicGifDisplay list= on the Skill Tree page (use blank in place of a file name if no GIF exists yet, as seen for "Surprise Attack!").

Copy this

A blank single node to paste into the right flex row:

{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=
|content=
<p></p>
}}

A blank tab skeleton (one path; repeat the column for the second tab, separated by |-|):

== <Class> Skill Trees ==
<tabber>
<Tab1Name>=
<div style="display:flex; flex-direction:column; align-items:center; row-gap:15px;">
<br>
  <!-- top row (3 nodes) -->
  <div style="display:flex; gap:20px;">
    {{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=<p></p>}}
    {{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=<p></p>}}
    {{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=<p></p>}}
  </div>
  <!-- ...further rows: gap:40px for 2-node rows... -->
  <!-- root node (1, placed bare) -->
  {{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=<p></p>}}
</div>
|-|
<Tab2Name>=
<div style="display:flex; flex-direction:column; align-items:center; row-gap:15px;">
<br>
  <!-- same structure as Tab1 -->
</div>
</tabber>

Example

Live result (the Knight tree's root node from Template:Knight/Skill Tree, hover it for the tooltip):

Wikitext (one node, exactly as it appears in the data template):

{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=Unyielding Bastion
|content=
<p>When your shield deals damage or when you take damage, gain <span>+2 defense </span>for <span>3s </span>(<span>Max 20</span>)</p>
}}

And how the whole tree reaches the page:

Knight=
{{Knight/Skill_Tree}}
|-|
Samurai=
{{Samurai/Skill_Tree}}

Tips & notes

These templates take no parameters; all six are pure data and are meant to be transcluded by Skill Tree.
Title with the title Template:Knight/Skill Tree is referenced as {{Knight/Skill_Tree}} ( / in the title, _ for the space) — keep that exact form on the Skill Tree page.
All nodes currently share the placeholder icon pair SpinningQuestion.gif;HoverSpinningQuestion.gif; swap in real art per node when available (format stays base;hover).
Inside content, wrap emphasised numbers in <span> and use <br> for tier-point breakpoints; escape apostrophes in title as '.
Keep each row's node count and gap consistent (3-node rows = gap:20px, 2-node rows = gap:40px) so columns stay aligned; the lone root node is placed outside any flex row.
The animated showcase GIF list lives on the Skill Tree page in Template:DynamicGifDisplay, not in these templates — update both when adding a skill. Use blank as the file when a GIF isn't ready.
Related: Template:ImageTooltip (the node), Template:DynamicGifDisplay (the showcase), Skill Tree (the host page).