Krypton

Community Archive

Template:JobLevelsChart

Introduction

JobLevelsChart provides the ability to track job levels of up to 16 characters.

Features

  • Capacity for 16 characters.
  • Fully configurable.
  • Custom chart caption.
  • Custom header content.
  • Logical level color-coding.
  • Leveling progress in tooltips.

A complete description of each parameter is provided in the Parameters section.

Notes

  • Due to the size of this template and how nothing but an empty header is rendered when all parameters are missing, example outputs have been placed on a separate page: JobLevelsChart/Sample
  • Important: This template can generate over 200k in HTML code depending on how much you provide. It is highly recommended that this template be used on a page with few other templates, especially no other large-output ones.

Parameters

The parameters are divided up based on what they affect in the chart. The section names match the comments in the template code.

Section Parameter Description
Caption The caption at the very top of the chart above the headers.
Caption-Text If you want a caption to be rendered above the chart, provide the text for it here.
Color-Caption Background color for the chart caption.
Header The character name header row below the caption and above the jobs.
Header-Height The height of the header. This value may need to be provided depending on how long your character names are.
Header-Width The width for each header column.
Header-Pos CSS position values for adjusting where the name appears in the cell.
  • Various factors affect how the name is rendered. If the name does not appear centered, adjust the positioning with this parameter.
  • Example: Header-Pos=bottom:-10px; left:4px;
Color-Header Background color for the header row.
Header-Job Arbitrary content for the header cell above the job names. You can provide any valid WikiText content for this parameter, such as an Image.
Rows The individual job rows in the chart.
No-Image Set this parameter to yes to suppress the job sprite images in the first column.
Row-Height The height for a row. When No-Image=yes, it's recommended to provide a low value for this parameter, such as 24.
Color-Row Background color for a full row. It is visible when a level is not provided for a cell.
Color-Job Background color for the job image and name columns.
Color-Zero Background color for level cells set to zero (0).
Color-Low Background color for levels from 1 to 9.
Color-Ten Background color for levels from 10 to 48.
Color-Mid Background color for levels from 49 to 98.
Color-Cap Background color for the level cap (99).
Names All of the character names that will appear in the header.
Names Comma-separated list of character names. Refer to the Example below for syntax.
Levels The levels of all characters for a job.
(JOB) Comma-separated list of all levels for a single job. The value positions match those of the character names provided in Names. Refer to the Example for syntax.

Remarks

  • Colors: All "Color-" parameters use HTML hex values without the hash symbol. Example: 00C080
  • Levels: The level ranges mentioned in Rows match the current syntax for JobLevelsChart-Cell. If the level cap changes, both the descriptions above and the aforementioned template must be changed.
  • Requirements: All of the configuration parameters can be left out. Only the parameters under Names and Levels must be provided. An example of this can be found in the Minimal section.

Usage

  • This is a Userpage Template meant for copying to your own page.
  • Copy and Paste the code from either Complete or Minimal into your own User: wiki page.
  • Do not edit the values here.
Complete
  • Use this on your user wiki / profile.
{{JobLevelsChart
<!-- Caption -->
  | Caption-Text=
  | Color-Caption=
<!-- Header -->
  | Header-Height=
  | Header-Width=
  | Header-Pos=
  | Color-Header=
  | Header-Job=
<!-- Rows -->
  | No-Image=
  | Row-Height=
  | Color-Row=
  | Color-Job=
  | Color-Zero=
  | Color-Low=
  | Color-Ten=
  | Color-Mid=
  | Color-Cap=
<!-- Names -->
  | Names=
<!-- Levels -->
  | WAR=
  | MNK=
  | WHM=
  | BLM=
  | RDM=
  | THF=
  | PLD=
  | DRK=
  | BST=
  | BRD=
  | RNG=
  | SAM=
  | NIN=
  | DRG=
  | SMN=
  | BLU=
  | COR=
  | PUP=
  | DNC=
  | SCH=
  | GEO=
  | RUN=
}}
Example: Complete
  • Parameter usage example.
{{JobLevelsChart
<!-- Caption -->
  | Caption-Text=Multi-Character Job Levels
  | Color-Caption=6699CC
<!-- Header -->
  | Header-Height=80
  | Header-Width=24
  | Header-Pos=bottom:-26px; left:4px;
  | Color-Header=CCCCFF
  | Header-Job=[[Image:White_Mage_Icon.jpg|White Mage]]
<!-- Rows -->
  | No-Image=
  | Row-Height=38
  | Color-Row=F0F0F0
  | Color-Job=FEFEFE
  | Color-Zero=DEDEDE
  | Color-Low=FFEDDD
  | Color-Ten=DDEEFF
  | Color-Mid=FFFEC8
  | Color-Cap=FFC8C8
<!-- Names -->
  | Names=Tester1,Tester2,Tester3,Tester4
<!-- Levels -->
  | WAR=19,0,0,0
  | MNK=16,8,0,0
  | WHM=85,0,0,0
  | BLM=37,0,0,0
  | RDM=22,0,20,0
  | THF=49,0,0,27
  | PLD=24,0,0,0
  | DRK=0,0,0,0
  | BST=32,0,0,0
  | BRD=11,0,0,0
  | RNG=18,0,0,0
  | SAM=0,0,0,0
  | NIN=37,0,0,0
  | DRG=21,0,0,0
  | SMN=8,0,0,0
  | BLU=15,0,0,0
  | COR=0,0,0,0
  | PUP=0,0,0,0
  | DNC=10,0,0,0
  | SCH=37,0,0,0
  | GEO=0,0,0,0
  | RUN=0,0,0,0
}}
Minimal
  • Use this on your user wiki / profile.
{{JobLevelsChart
<!-- Names -->
  | Names=
<!-- Levels -->
  | WAR=
  | MNK=
  | WHM=
  | BLM=
  | RDM=
  | THF=
  | PLD=
  | DRK=
  | BST=
  | BRD=
  | RNG=
  | SAM=
  | NIN=
  | DRG=
  | SMN=
  | BLU=
  | COR=
  | PUP=
  | DNC=
  | SCH=
  | GEO=
  | RUN=
}}
Example: Minimal
  • Parameter usage example.
{{JobLevelsChart
<!-- Names -->
  | Names=Tester1,Tester2,Tester3,Tester4
<!-- Levels -->
  | WAR=19,0,0,0
  | MNK=16,8,0,0
  | WHM=85,0,0,0
  | BLM=37,0,0,0
  | RDM=22,0,20,0
  | THF=49,0,0,27
  | PLD=24,0,0,0
  | DRK=0,0,0,0
  | BST=32,0,0,0
  | BRD=11,0,0,0
  | RNG=18,0,0,0
  | SAM=0,0,0,0
  | NIN=37,0,0,0
  | DRG=21,0,0,0
  | SMN=8,0,0,0
  | BLU=15,0,0,0
  | COR=0,0,0,0
  | PUP=0,0,0,0
  | DNC=10,0,0,0
  | SCH=37,0,0,0
  | GEO=0,0,0,0
  | RUN=0,0,0,0
}}

Extra Styling

The chart does not have a border, and the space between the cells is transparent (the container background shows through). It also does not have an alignment set.

If you want borders or alignment, you can wrap the template code with container div elements. The Samples page shows how to do this.

Output

  • Due to the size of this template and how nothing but an empty header is rendered when all parameters are missing, example outputs have been placed on a separate page: JobLevelsChart/Sample
  • Note to Contributors: The template code is located in this section. You may edit it to make changes.

Source entry: Template:JobLevelsChart. Cached on this server on 4 November 2026.

Map