This is a meta-template for building navboxes. A navbox is a grouping of links used in multiple related articles to facilitate navigation between those pages.
Up to 20 headers/blocks with up to 20 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
}}
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
This parameter should always be set to {{{1|}}} (see the example under "Usage") 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.
The title or caption of the navbox.
The editlink is an important parameter, as it determines the VDE - view, edit delete. The name of the navbox, without the "Template:" prefix, should go here. However, if unspecified, no VDE will be added. The only times it should not be specified are on nested navboxes.
Note: this parameter is also responsible for triggering any potential background images or different title text for games.
Content of block cells. 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 either.
Lists of links. 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 · . For columns, use unnumbered lists (inserted with *).
Text of the footer, i.e. a row at the very bottom of the navbox.
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.
Content of header rows. headerA appears above contentA1, headerB appears above contentB1 and so forth. If the block is collapsible, this becomes mandatory as it is the text which remains visible when collapsed.
Allows to specify images which should be displayed to the right (image) or left (imageleft) of the whole navbox content. Simply enter the file name without "File:". If the blocks in the navbox are collapsible, these images will remain visible even if all blocks are collapsed (but will not be visible if the navbox itself is collapsed). Be careful not to make the images too large or you risk visual oddities.
Size of the corresponding side image in px. image size sets the size of image and imageleft size sets the size of imageleft. Be careful not to make the images too large or you risk stretching and/or other visual oddities.
Allows to specify images which should be displayed to the right (image) or left (imageleft) of the corresponding block of cells. Simply enter the file name without "File:". If the block is collapsible, these images will not be visible if it is collapsed. Be careful not to make the images too large or you risk visual oddities.
Size of the corresponding image in px. For example, imageA size sets the size of image A. Be careful not to make the images too large or you risk stretching and/or other visual oddities.
Name of another navbox to be displayed as part of the current one (without "Template:"). 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.
Similar to nested, except that it does not expect the name of a navbox to be given. You can use this to directly set up another navbox within this one, i.e. by using a {{Navbox|nested|title=Example|contentA1=Links}} template call.
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.
This parameter allows to specify options which apply to the navbox itself or all blocks inside. Multiple options can be specified at once; simply separate them with commas (,).
Available choices:
- collapsed, collapsible, nocollapse, uncollapsed: These options 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 according to the autocollapse limit in MediaWiki:Common.js. This is the default setting if
positionis set to "bottom" or not unspecified. - nocollapse means the navbox is not collapsible. This is the default setting if
positionis set to "left" or "right". - uncollapsed means the navbox is collapsible and uncollapsed by default.
- 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
optionparameter (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
optionparameter (see below) to "collapsed". This is the default setting. - wraplinks: If set, line breaks can occur in the middle of links inside the navbox.
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.
Available choices:
- collapsible, nocollapse, uncollapsed: These options control the collapse behaviour of the block. They are mutually exclusive; if more than one is specified the block will fall back to the default behaviour (or the options set for the whole box).
- collapsed/collapsible mean the block is collapsible and collapsed on page load.
- nocollapse means the block is not collapsible. This is the default setting.
- uncollapsed means the block is collapsible and uncollapsed on page load.
- columns: This turns the block rows into columns, i.e. cells displayed side-by-side 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.
- wraplinks: If set, line breaks can occur in the middle of links inside this block.
Intended positioning of the navbox in article pages. Also influences default width and collapse behaviour.
Available options:
- 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 of the navbox in px or percent. Please note that in order to maintain a standardized look, width should only be changed if really necessary (e.g. for side boxes). All boxes placed at the bottom should keep the standard width, i.e. 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.
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.
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.
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.
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.
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.
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.
Specifies CSS classes to apply to the cell with the corresponding side image. image class applies to the cell with image, i.e. the image at the right side of the navbox, and imageleft class applies to the cell with imageleft.
Specifies CSS classes to apply to the corresponding image cell. For example, imageB class applies to the cell of imageB, imageleftC class affects the cell of imageleftC etc.
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.
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.
Specifies CSS classes to apply to a certain type of cells within the corresponding block. For example, class contentsA applies to all content cells with an "A" in their name, such as contentA1, contentA2 etc.
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.
Specifies CSS styles to apply to every cell in the whole navbox except for the title cell.
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")
Specifies CSS styles to apply to the corresponding header cell. For example, headerD style applies to the cell of headerD etc.
Specifies CSS styles to apply to the corresponding block cell. For example, blockF style applies to the cell of blockF etc.
Specifies CSS styles to apply to the corresponding content cell. For example, contentE3 style applies to the cell of contentE3 etc.
Specifies CSS styles to apply to the corresponding group cell. For example, groupB7 style applies to the cell of groupB7 etc.
Specifies CSS styles to apply to the footer cell.
Specifies CSS styles to apply to the cell with the corresponding side image. image style applies to the cell with image, i.e. the image at the right side of the navbox, and imageleft style applies to the cell with imageleft.
Specifies CSS styles to apply to the corresponding image cell. For example, imageB style applies to the cell of imageB, imageleftC style affects the cell of imageleftC etc.
Specifies CSS styles to apply to all cells of a certain type. For example, style applies to every cell in the whole navbox, style blocks applies to all content cells and so forth.
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.
Specifies CSS styles to apply to a certain type of cells within the corresponding block. For example, style contentsA applies to all content cells with an "A" in their name, such as contentA1, contentA2 etc.
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 parser functions and wiki syntax. For help editing, or using, contact the designers for help.
Auxiliaries
The metatemplate also uses several "auxiliary" templates in its construction. The main purpose of these is to simplify the amount of content on the main metatemplate, and make it easier to edit.
- {{Navbox/aux}}
- Merges various input parameters, calculates row/column counts for a given block and passes results to aux2 or aux3 (depending on the specified layout type).
- {{Navbox/aux2}}
- Returns a whole block of standard rows according to options and specified cells.
- {{Navbox/aux3}}
- Returns a whole block of columns according to options and specified cells.
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/doc/bgimagegallery}}.
When a background image is used, the titletext replaces normal text.
A documentation exists for the individual navboxes, as opposed to just this metatemplate.
It can be found on {{Navbox/doc/standard}}.
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:
- 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.
- 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 is much more limited, only capable of 8x8.
There are plans to possibly use Lua in the future to make code easier.
