Global Lua Modules/NavboxBuilder

NavboxBuider is a module that makes creating navboxes a breeze.

Features

Unlimited rows and sections.
Collapsible navbox and sections.
Possibility to customize/localize parameter names.
Parameter documentation can be imported from Dev Wiki and it will reflect customized parameter names

How to install

In order to use it you need to have Scribunto extension enabled on your wiki. If it isn't available for your community, just send a request via Special:Contact.

Module

First thing is the module itself. You don't need to copy the code. Just create a module titled Module:NavboxBuilder (or any other – just remember to adjust #invoke calls) and put this in the code

return require('Dev:NavboxBuilder')

You can also customize parameters and change some additional settings at this point. See their respective sections for more info.

CSS

There are two things to do here. First is importing the stylesheet that gives structure to the navbox. To do that just add this at the top of your Common.css or Wikia.css.

@import url("//dev.wikia.com/load.php?mode=articles&articles=MediaWiki:Global_Lua_Modules/NavboxBuilder.css&only=styles");

Second is changing how it looks. More info on that can be found in the Design section below.

Template

The module is designed to be used as a regular template. To do that just create a template (ex: Template:Navbox) with following content:

<onlyinclude>{{#invoke:NavboxBuilder|create}}</onlyinclude>

== Parameters ==
{{#invoke:NavboxBuilder|documentation}}

Now the template you created will accept parameters documented below.

These parameters can also be passed directly to the #invoke and will act as defaults. Their values will be overridden by same ones passed to the template.

Styling parameters are an exception. In their case both values will be combined.

The example above also includes the part that will insert parameter documentation on your wiki.

{{#invoke:NavboxBuilder|documentation}}

It'll display in your wiki's language (if a translation exists) and change to reflect customized parameters.

You can change the language by specifying it in an additional parameter

{{#invoke:NavboxBuilder|documentation|<lang code>}}

See the talk page for more info if you want to help translating.

Parameters

Below is the list of all available parameters. At least one list is required for the navbox to show up. Apart from that, all other parameters are optional.

Main

Title – main title of the navbox.
Links – links that appear on left side of the title bar.
- You can put any wikisyntax here.
- Title is required for it to work.
State – should the navbox be collapsed or expanded by default
- Values: collapsed or expanded (case insensitive)
- Empty or unrecognized values will disable collapsing.
- Title is required for it to work
Above and Below – fields above and below sections and images.
Left image and Right image – fields beside sections, most commonly used to add images.
- You can put any content here, not only images.

Sections

Sections include all lists with the same or higher number up to the next section.

Header n – heading of a section
- n – any positive integer
- Requires at least one list to be included to show up
State n – should the section be collapsed or expanded by default
- n – number of an existing header
- Values: collapsed or expanded (case insensitive)
- Empty or unrecognized values will disable collapsing.
Header state – same as above, but affects all headers
- Values: collapsed or expanded (case insensitive)
- Empty or unrecognized values will disable collapsing.
- Can be overridden by State n
Layout n – selects layout for that section
- n – any positive integer
- Can be used without Header n to create a separate section without a header
- Values: table or horizontal (case insensitive)
- Empty or unrecognized values will use default (table).

Table layout (`table`)

Standard layout with lists and sublists.

Left image n and Right image n – fields beside sections lists in that section, most commonly used to add images.
- n – number of an existing header
- You can put any content here, not only images.

Horizontal layout (`horizontal`)

Horizontal layout with lists forming columns. Sublists are not supported and will be treated as regular lists.

Per row n – maximum number of lists per row.
- n – number of an existing section.
- Value: any number above 1.
- Number of columns is still limited by space needed. You can't go higher than flexbox allows.
Span n – how many columns should the list span.
- n – number of an existing list.
- Value: any number between 0 and corresponding Per row n

Lists

List n – single row with a list of links
- n – any positive integer
Group n – heading of a list
- n – number of an existing list or sublist

Sublists will appear as sub entries of the group with same n.

List n.m – single row with a list of links
- n and m – any positive integers
Group n.m – heading of a sublist
- n and m – numbers of an existing sublist

Styling

Navbox class and Navbox style – applied to the main navbox element
Title class and Title style – applied to the title bar
Base class and Base style – applied to all groups, subgroups, headers, above and below fields
Above class and Above style – applied to the above field
Below class and Below style – applied to the below field
Image class and Image style – applied to all image fields
Left image class and Left image style – applied to the main left image field
Right image class and Right image style – applied to the main right image field
Header class and Header style – applied to all headers
Header n class and Header n style – applied to the header specified with n
Left image n class and Left image n style – applied to the left image field in the section specified with n
Right image n class and Right image n style – applied to the right image field in the section specified with n
Group class and Group style – applied to all groups
Subgroup class and Subgroup style – applied to all subgroups
Group n class and Group n style – applied to the group specified with n
Group n.m class and Group n.m style – applied to the subgroup specified with n and m
List class and List style – applied to all lists
List n class and List n style – applied to the list specified with n
List n.m class and List n.m style – applied to the list specified with n and m

Customizing parameters

When importing the module. Copy this and fill in yours

return require('Dev:NavboxBuilder').changeParameters{
    -- Settings
    links = 'Links',
    state = 'State',
 
    -- Fields
    title = 'Title',
    above = 'Above',
    below = 'Below',
    limage = 'Left image',
    rimage = 'Right image',
 
    -- Sections
    header_n = 'Header #',
    layout_n = 'Layout #',
    state_n = 'State #',
    header_state = 'Header state',
 
    -- Table layout
    limage_n = 'Left image #',
    rimage_n = 'Right image #',
 
    -- Horizontal layout
    perrow_n = 'Per row #',
    span_n = 'Span #',
 
    -- Groups
    group_n = 'Group #',
    group_n_m = 'Group #.#',
    list_n = 'List #',
    list_n_m = 'List #.#',
 
    -- CSS
    navbox_class = 'Navbox class',
    navbox_style = 'Navbox style',
    title_class = 'Title class',
    title_style = 'Title style',
    base_class = 'Base class',
    base_style = 'Base style',
    above_class = 'Above class',
    above_style = 'Above style',
    below_class = 'Below class',
    below_style = 'Below style',
    image_class = 'Image class',
    image_style = 'Image style',
    limage_class = 'Left image class',
    limage_style = 'Left image style',
    rimage_class = 'Right image class',
    rimage_style = 'Right image style',
    header_class = 'Header class',
    header_style = 'Header style',
    header_n_class = 'Header # class',
    header_n_style = 'Header # style',
    limage_n_class = 'Left image # class',
    limage_n_style = 'Left image # style',
    rimage_n_class = 'Right image # class',
    rimage_n_style = 'Right image # style',
    group_class = 'Group class',
    group_style = 'Group style',
    subgroup_class = 'Subgroup class',
    subgroup_style = 'Subgroup style',
    group_n_class = 'Group # class',
    group_n_style = 'Group # style',
    group_n_m_class = 'Group #.# class',
    group_n_m_style = 'Group #.# style',
    list_class = 'List class',
    list_style = 'List style',
    list_n_class = 'List # class',
    list_n_style = 'List # style',
    list_n_m_class = 'List #.# class',
    list_n_m_style = 'List #.# style',
 
    -- Values
    value_expanded = 'expanded',
    value_collapsed = 'collapsed',
    value_table_layout = 'table',
    value_horizontal_layout = 'horizontal',
}

Examples

Here are a few examples to show what the module is capable of and how to achieve that.

Note: examples below use {{NavboxBuilder}} for styling.

Title and few rows

{{Navbox
| Title = Lorem ipsum

| Group 1 = Dolor
| List 1 = Consectetur · adipiscing · elit

| Group 2 = Sit
| List 2 = Sed · commodo · quam · sed · orci · varius · bibendum
}}

Collapsible navbox

{{Navbox
| Title = Lorem ipsum
| State = collapsed
...
}}

Template links

{{Navbox
| Title = Lorem ipsum
| Links = [[Template:NavboxBuilder|v]] · [[Template talk:NavboxBuilder|d]]
...
}}

Title and groups aren't required

{{Navbox
| Group 1 = Dolor
| List 1 = Consectetur · adipiscing · elit

| List 2 = Sed · commodo · quam · sed · orci · varius · bibendum
}}

Above and below

{{Navbox
...
| Above = In pellentesque sapien justo
| Below = Vel accumsan justo pulvinar non
...
}}

Sections

{{Navbox
...
| Group 1 = Dolor
| List 1 = Consectetur · adipiscing · elit

| Header 2 = Mauris scelerisque
| Group 2 = Sit
| List 2 = Sed · commodo · quam · sed · orci · varius · bibendum

| Header 10 = Duis ornare aliquet
| Group 11 = Curabitur sem ex
| List 11 = faucibus · eu maximus · sit · amet

| Group 12 = Vestibulum
| List 12 = Cras · laoreet · ex · at · efficitur · auctor
}}

Collapsible sections

{{Navbox
...
| Header 1 = Mauris scelerisque
| State 1 = expanded
| Group 1 = Sit
| List 1 = Sed · commodo · quam · sed · orci · varius · bibendum

| Header 2 = Duis ornare aliquet
| State 2 = collapsed
| Group 2 = Curabitur sem ex
| List 2 = faucibus · eu maximus · sit · amet

| Group 3 = Vestibulum
| List 3 = Cras · laoreet · ex · at · efficitur · auctor
}}

Images

{{Navbox
...
| Left image = [[File:Example.jpg|x166px]]
...
| Header 2 = Mauris scelerisque
| Right image 2 = [[File:Example.jpg|x25px]]
...
| Header 10 = Duis ornare aliquet
| Right image 10 = [[File:Example.jpg|x53px]]
...
}}

Subgroups

{{Navbox
| Title = Lorem ipsum

| Group 1 = Dolor
| Group 1.1 = Sit
| List 1.1 = Consectetur · adipiscing · elit
| Group 1.2 = Amet
| List 1.2 = Sed · commodo · quam · sed · orci · varius · bibendum

| Group 2 = Quisque
| List 2.1 = Mauris · facilisis · condimentum · pretium
| List 2.2 = Proin · dictum · dui · felis
}}

Horizontal layout

{{Navbox
...
| Group 1 = Dolor
| List 1 = Consectetur · adipiscing · elit

| Header 2 = Mauris scelerisque
| Layout 2 = horizontal
| Group 2 = Sit
| List 2 = Sed · commodo · quam · sed · orci · varius · bibendum

| Header 10 = Duis ornare aliquet
| Layout 10 = horizontal
| Group 11 = Curabitur sem ex
| List 11 = faucibus<br />eu maximus<br />sit<br />amet

| Group 12 = Vestibulum
| List 12 = Cras<br />laoreet<br />ex<br />at<br />efficitur<br />auctor
}}

Styling

{{Navbox
...
| Title class = neutral
| Group style = color: red;
| List style = color: blue;
| List 12 style = color: green;
}}

Bit of everything

{{Navbox
| Title = Lorem ipsum
| State = collapsed
| Links = [[Template:NavboxBuilder|v]] · [[Template talk:NavboxBuilder|d]]
| Above = Cras laoreet, ex at efficitur auctor
| Below = Nunc vel condimentum tellus

| Group 1 = Dolor
| List 1 = Consectetur · adipiscing · elit

| Group 2 = Sit
| List 2 = Sed · commodo · quam · sed · orci · varius · bibendum

| Header 10 = Bibendum
| State 10 = expanded
| Right image 10 = [[File:Example.jpg|x43px]]
| Group 10 = Curabitur 
| Group 10.1 = Dolor
| List 10.1 = Consectetur · adipiscing · elit
| Group 10.2 = Sit
| List 10.2 = Sed · commodo · quam · sed · orci · varius · bibendum

| Header 20 = Aenean est lectus
| State 20 = collapsed
| List 20 = Vestibulum · ante · ipsum · primis in faucibus · orci · luctus · et ultrices · posuere · cubilia · Curae

| Group style = width: 75px
| Base style = color: navy
}}

Additional settings

These settings require you to alter how the module is imported to:

local NBB = require('Dev:NavboxBuilder')

Put your settings here

return NBB

N's and M's

If you want to change how they appear in the documentation, just change it like so:

NBB.n = "your N replacement"
NBB.m = "your M replacement"

Note: Only basic wikisyntax, like italics and html tags.

Horizontal and vertical lists

Depending on the layout, there will be a different class used for layouts with horizontal and vertical lists. By default it's hlist and vlist respectively. You can set your own classes with:

NBB.hlist = "class for horizontal lists"
NBB.vlist = "class for vertical lists"

Or disable by setting to nil

NBB.hlist = nil
NBB.vlist = nil

Design

If you want to customize the look of your navbox, you have few options. One of it is by using parameters, preferably by passing them to #invoke as defaults. There are few classes that adhere to wiki's theme that are perfect for this, like color1, accent. In the default skin, you can achieve the look like this:

With as little as this in your Navbox template:

{{#invoke:NavboxBuilder|create
| Navbox class = toc
| Title class = color1
| Base class = accent
| List class = color2
}}

The other way is styling it in your Common.css or Wikia.css. You can find a guide to classes below.

Main navbox element
- .navbox
- .mw-collapsible – when collapsing is enabled
- .mw-collapsed – when it's collapsed
Title bar
- .navbox-title
- .mw-collapsible-toggle – when the navbox is collapsible
- .mw-collapsible-toggle-expanded – when the navbox is expanded
- .mw-collapsible-toggle-collapsed – when the navbox is collapsed
Above and below
- .navbox-above and .navbox-below
Left and right images (both main and sections)
- .navbox-image
Section header
- .navbox-header
- .mw-collapsible-toggle – when the section is collapsible
- .mw-collapsible-toggle-expanded – when the section is expanded
- .mw-collapsible-toggle-collapsed – when the section is collapsed
Rows
- .navbox-odd – for odd numbered rows
- .navbox-even – for even numbered rows
Groups
- .navbox-group
Subgroups
- .navbox-subgroup
Lists
- .navbox-list
- .navbox-nogroup – when there's no group for this row
Shared classes
- .navbox-padding – a way to customize padding of cells. Applies to all lists, groups, subgroups and above/below fields. But not to headers and the title.
- .navbox-base – a way to highlight headings. Applies to all groups, subgroups, header and above/below fields.

Spacing

If you want to change the size of spaces between cells, here's what you have to change:

.navbox-table-wrapper,
.navbox-table-layout {
  margin-left: -3px;
  margin-right: -3px;
  margin-bottom: -3px;
}
.navbox-table-wrapper:first-child,
.navbox-section-wrapper:first-child {
  margin-top: -3px;
}
.navbox-table {
  border-spacing: 3px;
}
.navbox-section {
  margin: 3px 0;
}
.navbox-horizontal-layout {
  margin-right: -3px;
}
.navbox-col {
  margin-top: 3px;
}
.navbox-col .navbox-group {
  margin-bottom: 3px;
  margin-right: 3px;
}
.navbox-col .navbox-list {
  margin-right: 3px;
}

Global Lua Modules/NavboxBuilder

Contents

Features

How to install

Module

CSS

Template

Parameters

Main

Sections

Table layout (`table`)

Horizontal layout (`horizontal`)

Lists

Styling

Customizing parameters

Examples

Title and few rows

Collapsible navbox

Template links

Title and groups aren't required

Above and below

Sections

Collapsible sections

Images

Subgroups

Horizontal layout

Styling

Bit of everything

Additional settings

N's and M's

Horizontal and vertical lists

Design

Spacing

Fan Feed

Global Lua Modules/NavboxBuilder

Features

How to install

Module

CSS

Template

Parameters

Main

Sections

Table layout (table)

Horizontal layout (horizontal)

Lists

Styling

Customizing parameters

Examples

Title and few rows

Collapsible navbox

Template links

Title and groups aren't required

Above and below

Sections

Collapsible sections

Images

Subgroups

Horizontal layout

Styling

Bit of everything

Additional settings

N's and M's

Horizontal and vertical lists

Design

Spacing

Fan Feed

Table layout (`table`)

Horizontal layout (`horizontal`)