FANDOM


This is a metatemplate for building navboxes, which is based on the Module at Module:Navbox. A navbox is a grouping of links used in multiple related articles to facilitate navigation between those pages.

An infinite amount of headers/blocks and an infinite amount of content/group fields each are supported, as well as displaying the rows in a column-based or horizontal layout and making groups collapsible. Each of these options can be specified for individual blocks or the whole navbox. In addition, navboxes built with this meta-template can be nested/displayed within each other. The template also supports displaying images to the left and/or right of individual blocks or the whole navbox.

Standard navboxes (i.e. those inserted at the bottom of an article) are collapsible and will be auto-collapsed by default (this can be changed by altering the autocollapse limit in MediaWiki:Common.js).

Usage

{{Navbox}} is a metatemplate, meaning it is a template for other templates. So, a navbox, {{FFVI}}, will be built using "Navbox" as its base code, and once created, a user only needs to add {{FFVI}} to the bottom of an article for it to be put in place. This code is primarily for building other navboxes, not for being used on articles.

Copy/paste

{{Navbox
|1               ={{{1|}}}
|name            =Navbox example
|title           =Title
|contentA1       =Links
}}

Easy navbox creation

The box below allows you to create a new {{Navbox}} with the appropriate layout. Simply enter the name of the new navbox ("Template:Navbox" is automatically added) and click the "Create" button.

Creating a new navbox template

For those with a very limited understanding of code, this function is designed to make it easier.

Common parameters

Parameter Inputs Description
<unnamed 1> {{{1|}}} This parameter should always be set to {{{1|}}} (see below) if it is in use. It allows the layout of the navbox to be changed so it fits inside another navbox, if the parameter is set to "nested" from within the other navbox. This should only be used if it is supposed to be nested; if it is not being nested, it should not be used.
title Title or caption of the navbox. The title that the navbox will display at the top. Use of {{SL}} is recommended when the title is a link.
editlink Exact name the navbox is located at. An important parameter, as it determines the VED - view, edit, discuss. The name of the navbox, without the "Template:" prefix, should go here. However, if unspecified, no VED will be added. The only times it should not be specified are on nested navboxes. This parameter is also responsible for triggering any potential background images or different title text for games.
class The Codename of the release the navbox is for. This will default to series, however, it must be specified in most cases. For full details, see below.
headerA - headerZZZ Content of header rows. headerA appears above contentA1, headerB appears above contentB1 and so forth. This block is mandatory unless set to not be collapsible.
contentA1 - contentZZZ999 List of links pointing to pages in content cells. Make sure that links point directly to the intended pages (i.e. not to redirects) so the current page is properly marked in the template. It is recommended to sort links in each cell alphabetically for reader convenience. For standard (horizontal) rows, separate individual links with dashes (-). For columns, use unnumbered lists (inserted with *).
grouA1 - groupZZZ999 Content of group cells. groupA1 appears to the left of contentA1 (or above it when in column mode) and so forth. If a group field has been specified, the corresponding content becomes mandatory. For example, if groupD3 has been set, you need to set contentD3 as well.
blockA - blockZZZ Content of block cells. Optional parameter, used mostly within nested navboxes. blockA appears left of the groupA parameters and so forth. If no group or content fields in this block have been specified, the block is not displayed.
below Text of the footer. A row at the very bottom of the navbox, optional.
nestedplainA - nestedplainZZZ {{Navbox|nested|contentA1=Links}}. You can use this to directly set up another navbox within this one. This is preferred in instances where multiple cells to the left of the links are needed for groups within groups.
nestedA - nestedZZZ Name of another navbox to be displayed as part of the current one (without "Template:"). Works similar to nestedplain, though it is used for navboxes which already exist, not creating new ones within it. If set, the other navbox replaces the whole corresponding block of cells. For example, setting nestedA results in all cells with an "A" in their name (such as blockA or contentA20) not being displayed; the specified navbox will be displayed in their place.

Options parameters

The various options (often referred to as an options param) are to be used when the navbox is different to the default setting. For instance, changing to side navboxes, changing whether a navbox should be collapsible, or changing things such as the width. Some parameters should be used more sparingly than others.


Parameter Inputs Description
options collapsed, collapsible, nocollapse, uncollapsed Control the collapse behaviour of the navbox itself. They are mutually exclusive; if more than one is specified, the navbox falls back to the default behaviour according to position; collapsed means the navbox is collapsible and collapsed on page load; collapsible means the navbox is collapsible and is collapsed or uncollapsed on page load (default setting if position is set to "bottom" or not unspecified); nocollapse means the navbox is not collapsible. This is the default setting if position is set to "left" or "right" and uncollapsed<code> means the navbox is collapsible and uncollapsed by default.
<code>collapsiblegroups This makes all blocks within the navbox collapsible and collapsed on page load. Can be overriden for individual blocks by setting the block-specific option parameter (see below) to "uncollapsed".
columns This turns all blocks into column-type blocks, i.e. blocks where the links are listed from top to bottom instead of from left to right.
normallists This option only applies to column-type blocks. By default, unnumbered lists in columns have special formatting (increased line height, no bullets); with this option you can disable this formatting if desired.
uncollapsedgroups This makes all block within the navbox collapsible and uncollapsed on page load. Can be overriden for individual blocks by setting the block-specific option parameter (see below) to "collapsed". This is the default setting.
wraplinks If set, line breaks can occur in the middle of links inside the navbox.
optionsA - optionsZZZ Same as options, but specific to blocks. This parameter allows to specify options which apply to the corresponding block of rows. For example, optionsB applies to the block containing all cells with a "B" in their name. Multiple options can be specified at once; simply separate them with commas (,). Group-specific options override options set for the whole navbox. You can use this to contradict the options that apply to the entire navbox.
position bottom The navbox is supposed to be put at the end of articles; full width, collapses.
left The navbox is supposed to be put on the left side of articles with text flowing around it; thin navbox, not collapsible.
right The navbox is supposed to be put on the right side of articles with text flowing around it; thin navbox, not collapsible.
width Width of the navbox in px or percent. Defaults to 100% or 200px depending on position. In order to maintain a standardized look, width should only be changed if particularly necessary (e.g. for side boxes). All boxes placed at the bottom should keep the standard width, no width parameter should be specified.

Class parameters

The class options in order to change based on already set CSS classes in the Common.css. These classes are defined by a codenames. This option is essential to most navboxes. While most times, simply applying a class to an entire navbox normally works, there may be times where more than one is useful. Classes can be found here.

Parameter Inputs Description
class Specifies the CSS class for the entire navbox. This means that it will apply classes based on the "a" and "b" codename classes for releases and series. For instance, the codename FFVI covers the entire navbox code exactly like a Final Fantasy VI template. By default, the series class is used, though this often needs to be specified.
meta class Codename for a series/release, ie FFVI. Unlike class, meta class species CSS classes to appear in every cell, but applies the same identical class. For instance, FFVI in meta class will apply the "FFVIa" class to every single cell, while if it were inserted in the class parameter, the "a" and "b" would be used differently depending on the cell.
headerA class - headerZZZ class Codename for a series/release. Specifies CSS classes already set in the MediaWiki:Common.css to apply only to the corresponding group cell. For example, headerB class set to FFV will color headerB with FFV template colors.
blockA class - blockZZZ class Codename for a series/release. Specifies CSS classes already set in the MediaWiki:Common.css to apply only to the corresponding group cell. For example, blockB class set to FFX will color blockB with FFX template colors.
contentA1 class - contentZZZ999 class Codename for a series/release. Specifies CSS classes already set in the MediaWiki:Common.css to apply only to the corresponding content cell. For example, contentD12 class set to FFVIII will color contentD12 with FFVIII template colors. Note that changing the class for content cells is not preferred and often unnecessary.
groupA1 class - groupZZZ999 class Codename for a series/release. Specifies CSS classes already set in the MediaWiki:Common.css to apply only to the corresponding group cell. For example, groupC6 class set to FFVII will color groupC6 with FFVII template colors.
class blocks, class contents, class groups, class headers Codename for a series/release. Specifies CSS classes to apply to all cells of a certain type. For example, class applies to every cell in the whole navbox, class blocks applies to all content cells and so forth.
classA - classZZZ Codename for a series/release. Specifies CSS classes to apply to all cells within the corresponding block of cells. For example, classA applies to all cells with an "A" in their name, such as blockA, contentA1, imageA etc.
contentsA class - contentsZZZ class, groupsA class - groupsZZZ class Codename for a series/release. Specifies CSS classes to apply to a certain type of cells within the corresponding block. For example, contentsA class applies to all content cells with an "A" in their name, such as contentA1, contentA2 etc.
title class Codename for a series/release. Specifies CSS classes to apply to the title cell.

Style parameters

Unlike class, the style options should be used sparingly as they can lead to visual inconsistencies. They are often preferred when a css class does not exist to be used.

Some examples of useful styles:

  • Changing background color: background-color: #123456; (accepts HTML color names or RGB hex triplets)
  • Changing (horizontal) text-alignment: text-align: center; (accepts "center", "justify", "left", "right")
  • Changing vertical text-alignment: vertical-align: middle; (accepts "bottom", "middle", "top")
Parameter Inputs Description
meta style Any CSS style code. CSS styles to apply to every cell except for the title cell.
headerA style - headerZZZ style Any CSS style code. Specifies CSS styles to apply to the corresponding header cell. For example, headerD style applies to the cell of headerD etc.
blockA style - blockZZZ style Any CSS style code. Specifies CSS styles to apply to the corresponding block cell. For example, blockF style applies to the cell of blockF etc.
contentA1 style - contentZZZ20 style Any CSS style code. Specifies CSS styles to apply to the corresponding content cell. For example, contentE3 style applies to the cell of contentE3 etc.
groupA1 style - groupZZZ20 style Any CSS style code. Specifies CSS styles to apply to the corresponding group cell. For example, groupB7 style applies to the cell of groupB7 etc.
above style, below style Any CSS style code. Specifies CSS styles to apply to the footer cell.
blocks style, contents style, groups style, headers style Any CSS style code. Specifies CSS styles to apply to all cells of a certain type. For example, style applies to every cell in the whole navbox, blocks style applies to all content cells and so forth.
styleA - styleZZZ Any CSS style code. Specifies CSS styles to apply to all cells within the corresponding block of cells. For example, styleA applies to all cells with an "A" in their name, such as blockA, contentA1, imageA etc.
contentsA style - contentsZZZ style, groupsA style - groupsZZZ style Any CSS style code. Specifies CSS styles to apply to a certain type of cells within the corresponding block. For example, contentsA style applies to all content cells with an "A" in their name, such as contentA1, contentA2 etc.
title style|req=no Any CSS style code. Specifies CSS styles to apply to the title cell.

Examples

Simple

A simple usage of the navbox would be:

{{Navbox
|1               ={{{1|}}}
|editlink        =Navbox/doc
|class           =series
|title           =Title
|contentA1       =Content A
}}

results in:

Every navbox is required to include an editlink, a class, a title, and at least some content. These are the bare necessities for every navbox. Note, that if only a single "contents" exists, it is more likely that the navbox will become a side navbox instead (more on those later).

Functionality and explanations

The basic functionality of the Navbox metatemplate's parameters used in practice to construct navboxes will be explained here.

"Standard" refers to groups, blocks and headers.

{{Navbox
|1               ={{{1|}}}
|image           =Wiki.png
|title           =Title
|blockA          =Block A
|groupA1         =Group A1
|contentA1       =Content A1
|contentA2       =Content A2
|headerB         =Header B
|blockB          =Block B
|groupB1         =Group B2
|contentB1       =Content B1
}}

results in:

As shown about, all the "A" content is grouped under the "A" block, however, all the "B" content is grouped not only under the "B" block, but under a collapsible header. The image is applied to the right of the entire navbox.

{{Navbox
|1               ={{{1|}}}
|title           =Title
|imageA          =Wiki.png
|headerA         =Header A
|groupA1         =Group A1
|contentA1       =Content A1
|contentA2       =Content A2
|groupA3         =Group A3
|contentA3       =Content A3
|imageB          =Wiki.png
|headerB         =Header B
|groupB1         =Group B1
|contentB1       =Content B1
|groupB2         =Group B2
|contentB2       =Content B2
|groupB3         =Group B3
|contentB3       =Content B3
}}

results in:

The images here were applied to the "A" and "B" contents, as opposed to the entire box. When adding images to large navboxes, this is always preferred. Note, that if "blocks" were used instead of "headers", the same result would be produced. The same result would also be produced if neither headers nor blocks were used.

{{Navbox
|1               ={{{1|}}}
|title           =Title
|options         =columns
|contentA1       =Content A1
|contentA2       =Content A2
|contentA3       =Content A3
|contentB1       =Content B1
|contentB2       =Content B2
|contentB3       =Content B3
}}

results in:

By simply changing the "options" value to add "columns", the navbox's contents now don't add new rows, but new columns. Groups appear in the row above contents. Note, that while groups can be added, and will appear in the row above the contents, they are not preferred. To add contents in a row below, simply add them to a different letter. Be careful when adding more than 10 to a row, as while doable, it will often look untidy and make the contents unnecessarily small.

{{Navbox
|1               ={{{1|}}}
|title           =Title
|optionsA        =columns
|headerA         =Header A
|contentA1       =Content A1
|contentA2       =Content A2
|headerB         =Header B
|groupB1         =Group B1
|contentB1       =Content B1
|groupB2         =Group B2
|contentB2       =Content B2
}}

results in:

The options parameter does not just apply to the entire navbox, it can apply to individual letters. Sometimes colums are preferred, though sometimes they are not.

{{Navbox
|1               ={{{1|}}}
|title           =Title
|position        =right
|width           =25em
|optionsA        =columns
|headerA         =Header A
|contentA1       =Content A1
|contentA2       =Content A2
|contentA3       =Content A3
|headerB         =Header B
|contentB1       =Content B1
|contentB2       =Content B2
|contentB3       =Content B3
}}

For some navboxes, particularly ones with less content, using the "position" parameter and setting it to either left or right can make it a side navbox. This is often useful when the navbox is only meant to make lists. Note, that it is important, though unnecessary, to specify the width of the side navboxes, in order to give the contents more room. Also note that the side navs prefer listing things with "*" and "#" (the bullet points will not actually show, but numbers will).

{{Navbox
|1                ={{{1|}}}
|title            =Title
|nestedplainA     ={{Navbox|nested
|title            =Nested navbox A
|imageA           =Wiki.png
|blockA           =Block A
|groupA1          =Group A1
|contentA1        =Content A1
|groupA2          =Group A2
|contentA2        =Content A2
|imageB           =Wiki.png
|blockB           =Block B
|groupB1          =Group B1
|contentB1        =Content B1
|groupB2          =Group B2
|contentB2        =Content B2
}}
|nestedplainB     ={{Navbox|nested
|title            =Nested navbox B
|image            =Wiki.png
|groupA1          =Group A1
|contentA1        =Content A1
|groupA2          =Group A2
|contentA2        =Content A2
|groupB1          =Group B1
|contentB1        =Content B1
|groupB2          =Group B2
|contentB2        =Content B2
}}
|groupC1          =(Un-nested) Group C1
|contentC1        =(Un-nested) Group C1
}}

Nested navboxes are especially useful when more information is needed under a header. Particularly, for navboxes when multiple blocks are needed in the contents under what would otherwise be a header. Since placing multiple blocks under a header is impossible, a nested navbox fills that role. Otherwise, they are often unnecessary, as headers can already be styled, classed, given images and other functions normally; that, and the number of contents should almost never exceed 20, though if they do, nested navboxes can be added.

Customization features

The Navbox metatemplate is designed to allow for plenty of customization to its appearance. Through the use of style and class parameters, the metatemplate can be applied used for every situation and colored based on the wiki's own classes, which are based on the games. It also allows for bg images.

{{Navbox
|1                ={{{1|}}}
|title            =Title
|class            =FFVI
|contentA1        =Content A1
}}

results in:

Adding FFVI pulled up the FFVI class from the Wiki's Common.css, and colored the entire template automatically as an FFVI template. It did not, however, provide title text or a bg image. This is because, while the navbox is an FFVI navbox, it is not an FFVI navbox for the whole game.

{{Navbox
|1                ={{{1|}}}
|title            =Title
|class            =FFIV
|headerA          =Header A (unclassed)
|contentA1        =Content A1 (unclassed)
|headerB          =Header B
|headerB class    =FFV
|contentB1        =Content B1
|headerC          =Header C
|headerC class    =FFX
|contentC1        =Content C1
}}

results in:

While the template was classed like an FFIV template, for the whole thing, as headers B and C referred to other games, they were classed as such, so FFV and FFX were used as classes specified only for them.

{{Navbox
|1                ={{{1|}}}
|class            =FFVIII
|title            =Title
|style            =background-color: #FFFF00; text-align: center;
|contentA1        =Content A1
|contentA2        =Content A2
}}

results in:

The navbox was given a yellow background color and its text was aligned to the left. This was applied to everything in the navbox. This style is in contrast to the class, used, which in this case was FFVIII.

{{Navbox
|1                ={{{1|}}}
|class            =FFXIII
|title            =Title
|title style      =background-color: #FF0000;
|styleA           =background-color: #008000;
|headerA          =Header A
|contentA1        =Content A1
|headerB          =Header B
|headerB style    =background-color: #0000FF;
|contentB1        =Content B1
|contentB1 style  =text-align: left;
|contentB2        =Content B2
|contentB2 style  =text-align: center;
}}

results in:

Here, the title has been made red, while everything in A was given a green background. Only the header of B was given a background, which was yellow. The texts in the contents have been aligned differently. Everything else, however, has gone by the default, which was the FFXIII class.

{{Navbox
|1                ={{{1|}}}
|title            =Title
|class            =FFVII
|editlink         =FFVII
|contentA1        =Content A1
}}

results in:

Filling in the "editlink" triggers the bg image. It identifies that the navbox being built is a navbox for the game, and deserves the bg image and title text.

Examples in use

Examples of navboxes actually in use are as follows:

{{FFVI}}
Uses bg image, class, headers, and a nested navbox
{{Armor}}
Uses columns, headers
{{Black Magic}}
Uses multiple different classes, headers, blocks, and nested navboxes
{{Translations}}
Uses positioning (as a sidenav)

Technical

This metatemplate is fairly complicated. Editing it requires a good understanding of Lua syntax or general programming knowledge. For help editing, or using, contact the designers for help.

In order to use the module, the Scribunto MediaWiki extension is required.

Background images

The navboxes which use a background image (referred to as "bg" image) import the images from the Common.js and Common.css, which are hosted on the FF wiki. The images are all 170x30 in resolution. Anyone can upload an image for the navboxes.

The background images should only be featured on navboxes for the game in question. They are triggered by the "editlink" param (see above). Since the navbox name will be identical to the game's class and code name, the editlink should be too, meaning it will activate the js and css.

The images can be found on {{Navbox/bgimagegallery}}.

When a background image is used, the titletext replaces normal text.

Development credit

The metatemplate was originally based on code found on the Fallout Wiki. However, since introduction, Technobliterator and JBed heavily modified it until both its design and structure were very different. The main differences are:

  • Is now based on a module, located at Module:Navbox.
  • Instead of being heavily based around the HTML <table> tag, while it still contains the tag, it uses <div>s more often, mainly in its headers.
  • The image parameter no longer exists, due to being impractical for FFWiki use.
  • As mentioned above, the FFWiki's navbox also makes heavy usage of its codename game classes.
  • The navbox importants from the CSS and JavaScript to use its various logo images.
  • The Fallout Wiki's navbox was much more limited, only capable of 8x8.
  • No auxiliary templates are needed, while the original Navbox had 3 auxiliary templates, the Module combined them into one.

There are plans to possibly use Lua in the future to make code easier.

Community content is available under CC-BY-SA unless otherwise noted.