FANDOM


Template:Infobox Lua NavboxBuider is a module that makes creating navboxes a breeze.

Features Edit

  • Unlimited amount of rows and sections.
  • Collapsible navbox and sections.
  • Possibility to customize/localize parameter names.
  • Parameter documentation stored on Dev Wiki and tailored to custom parameter names

Installation Edit

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

Module Edit

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('Module:NavboxBuilder')

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

CSS Edit

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 "http://dev.wikia.com/load.php?mode=articles&articles=NavboxBuilder/code.css&only=styles";

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

Template Edit

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

{{#invoke:NavboxBuilder|create}}

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. Good for default styling etc.

You can also insert parameter documentation on your wiki with

{{invoke:NavboxBuilder|documentation}}

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

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

Parameters Edit

Script error

Customizing parameters Edit

When importing the module. Copy this and fill in yours

return require('Module:NavboxBuilder').changeParameters{
    -- Settings
    tpllinks = 'Links',
    state = 'State',
 
    -- Fields
    title = 'Title',
    above = 'Above',
    below = 'Below',
    limage = 'Left image',
    rimage = 'Right image',
 
    -- Sections
    header_n = 'Header #',
    limage_n = 'Left image #',
    rimage_n = 'Right image #',
    state_n = 'State #',
 
    -- 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',
    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',
}

Examples Edit

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

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

Title and few rows Edit

Script error

{{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 Edit

Script error

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

Template links Edit

Script error

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

Title and groups aren't required Edit

Script error

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

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

Above and below Edit

Script error

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

Sections Edit

Script error

{{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 Edit

Script error

{{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 Edit

Script error

{{Navbox
...
| Left image = [[File:Example.jpg|x138px]]
...
| Header 2 = Mauris scelerisque
| Right image 2 = [[File:Example.jpg|x20px]]
...
| Header 10 = Duis ornare aliquet
| Right image 10 = [[File:Example.jpg|x43px]]
...
}}

Subgroups Edit

Script error

{{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
}}

Styling Edit

Script error

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

Bit of everything Edit

Script error

{{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 Edit

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

local NBB = require('Module:NavboxBuilder')
 
Put your settings here
 
return NBB

Horizontal lists Edit

If you use horizontal lists on your wiki, just set this to true. This will add the hlist class to all lists without worrying for them being overwritten when put in the parameter.

NBB.hlist = true

Note: If you use a different class name, you can specify it as a string.

N's and M's Edit

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: Templates, parser functions etc won't be parsed thou. Only basic wikisyntax, like italics and html tags.

Design Edit

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. You can achieve the look like this: Script error 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 Edit

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

.navbox-table {
    border-spacing: 3px;
}
.navbox-table-wrapper {
    margin: 0 -3px -3px;
}
.navbox > .navbox-table-wrapper:first-child,
.navbox-section > .navbox-table-wrapper:first-child {
    margin-top: -3px;
}
.navbox-section {
    margin-top: 3px;
}