Help:Navbox

Navbox

Part of a series of tutorials for the Refuge Wiki
Tutorial Navigation
Demo Pages
Demo Article · Demo Nation · Demo Navbox Demo Character · Demo Item

Templates within MediaWiki function by calling on elements defined in the CSS file, in the JavaScript file, or just by using raw html. Templates exist to allow users to navigate this code without rewriting it countless times or by using elements that are too complicated to easily be understood. The Template:Infobox functions by using elements defined in the CSS file, while the Template:Navbox calls on the table forming mechanics of CSS. Since they're both templates within this wiki, knowledge about how either system works is unnecessary to fill one out.

This page will show you have to fill out the navbox template for use on your pages. See Help:Templates for help on creating your own template from scratch.

The Nav Box

Nav boxes are placed at the bottom of related pages, such as all of the pages within a single RP, so that you can easily travel from one to the other, especially pages that aren't linked within the article you're looking at. We're going to create a version of the tutorial navigation box on the side of this article as one such navbox for the Demo Article and Demo Nation to simulate what they would normally look like in an RP.

We can begin by navigating to the page that we want to create. In this example, it's going to be called {{tdp}}, because the acronym of the pages it represents is also usually shorthand for how it's remembered. If you want the template to be called tdp for "Tutorial-Demo Pages", the template must be located at Template:tdp. In any page or article on this wiki, the capitalisation of a word will be represented as you type it, except for the first letter, which will always be shown as capital in the title and can be represented either way in the template.

This can be displayed using this example:

Calls Template:Tdp	Calls Template:tDp
{{tdp}} {{Tdp}}	{{tDp}} {{TDp}}

In Template:tdp, we'll start by writing {{navbox. Two units of { indicate that we're calling a template that already exists, in this case, it's Template:Navbox.

{{navbox

Name

The next line we'll add is |name = tdp This is how the name is going to be defined for your organisational purposes, so it should mirror the location that the template is written. Each instance of | indicates an input slot that was designated in the template we're working in. So "name|" is registered as an input in Template:Navbox that means we can put something there.

{{navbox
|name       = tdp

Title

Let's also add a title to the navbox with |title. This will display in a slightly larger and bold font in the centre of the panel. This title can also serve as a link to a main page of the series. So, we'll call it "Help Pages" and link to Help:Contents since it's the landing page for help. As shown in Help:Links, we can set a different display text with a vertical pipe.

{{navbox
|name       = tdp
|title      = [[Help:Contents|Help Pages]]

Image

Next, we'll add |image = [[File:Wiki.png|80px]]. In the premade Navbox template, this will add an image in the centre middle part of the panel which will feature a relevant image to the theme. In some RPs, this is the world map. It can also be the RP's logo or whatever you come up with. Since this navbox is for a demo article, we'll just use the Wiki's logo. Remember that you can define how big an image is scaled by using a vertical pipe and specifying the number of pixels wide you'd like it to display.

{{navbox
|name       = tdp
|title      = [[Help:Contents|Help Pages]]
|image      = [[File:Wiki.png|80px]]

Notice how there is abundant whitespace in between the variables and what we've input for them. When the code is run, all of this is reduced to a single white space. Therefore, you may use as many spaces as you would like to organise your template and make it easier for you and everyone else to read.

Above

The next line is |above = . this will add another bar underneath the title of the nav box. In this example, we have no need for this, so we can either enter the line without data, in case we wish to add something there at a later point, or just leave it out of the template.

Style

The next four lines of wiki code refer to the style that the box takes. basestyle', oddstyle, and evenstyle can be used to define the colour scheme by using the background argument. Select some colours that are either monochromatic or work well together and play around with the settings until you find something you like. Basestyle, oddstyle, and evenstyle can also be used to define the dimensions of the navbox and the elements within it. Ordinarily, the navbox will take the full size of the page, as it does in the A Voice From the Storm RP nav. It can also take the shape of an infobox if it's nested inside that template, such as the sidebar of this page.

If you do not wish for it to automatically size itself, you can manually set dimensions, for example, by using width:23em; to set an element to 23 ermarian units. In this example, full width is intended, but we want to make sure that the labels have enough space and aren't edged out by the link spaces, so we'll define both the colour as well as setting the labels to take 10% of the space, and the data to take 90% of the space.

{{navbox
|name       = tdp
|title      = [[Help:Contents|Help Pages]]
|image      = [[File:Wiki.png|80px]]
|basestyle  = background:#7be6ff;
|oddstyle   = background:#e6ffff; width:10%;
|evenstyle  = background:#bdffff; width:90%;

Navbar

|navbar = can be used to define the style of the text that's displayed in this template. In most cases, this will not change from the default plain style so that it's standardised to the wiki and universally easier to read.

Now we can begin defining groups.

{{navbox
|name       = tdp
|title      = [[Help:Contents|Help Pages]]
|image      = [[File:Wiki.png|80px]]
|basestyle  = background:#7be6ff;
|oddstyle   = background:#e6ffff; width:10%;
|evenstyle  = background:#bdffff; width:90%;

|group1     = 
|list1      = 

Groups and Lists

These items form the parts of the navbox that are actually used to navigate. |group1 = Displays text for the groups in this category. |list1 = displays the actual links we'll be using. For organisational purposes, we can separate these by using bullet points. Since bullets aren't a standard keyboards, {{dot}} has been set up to insert one for us.

{{navbox
|name       = tdp
|title      = [[Help:Contents|Help Pages]]
|image      = [[File:Wiki.png|80px]]
|basestyle  = background:#7be6ff;
|oddstyle   = background:#e6ffff; width:10%;
|evenstyle  = background:#bdffff; width:90%;

|group1     = Reading
|list1      = [[Help:Navigation|Navigation]] {{dot}} [[Help:Tracking_changes|Tracking Changes]] {{dot}} [[Help:Watchlist|Watchlist]]

|group2     = Editing
|list2      = [[Help:Starting_a_new_page|Starting a New Page]] {{dot}} [[Help:Formatting|Formatting]] {{dot}} [[Help:Links|Links]] {{dot}} [[Help:Talk_pages|Talk Pages]] {{dot}} [[Help:Redirects|Redirects]] {{dot}} [[Help:Images|Images]]

|group3     = Advanced Editing
|list3      = [[Help:Moving_a_page|Moving Pages]] {{dot}} [[Help:Tables|Tables]] {{dot}} [[Help:Categories|Categories]] {{dot}} [[Help:Subpages|Subpages]] {{dot}} [[Help:Managing_files|Managing Files]] {{dot}} [[Help:Magic_words|Magic Words]] {{dot}} [[Help:Deleting_a_page|Deleting Pages]] {{dot}} [[Help:Templates|Templates]] {{dot}} [[Help:Namespaces|Namespaces]]

You can define up to twenty groups and lists in this section. You can also use lists with or without groups to customize the navbox to your own needs.

Below

Beyond the groups section is a data spot called |below which functions like |above in case you have any other articles at this point that do not fit anywhere else. We'll use that now to link to the demo pages that I've written, because those are on a different vein than the other advice from MediaWiki.

{{navbox
|name       = tdp
|title      = [[Help:Contents|Help Pages]]
|image      = [[File:Wiki.png|80px]]
|basestyle  = background:#7be6ff;
|oddstyle   = background:#e6ffff; width:10%;
|evenstyle  = background:#bdffff; width:90%;

|group1     = Reading
|list1      = [[Help:Navigation|Navigation]] {{dot}} [[Help:Tracking_changes|Tracking Changes]] {{dot}} [[Help:Watchlist|Watchlist]]

|group2     = Editing
|list2      = [[Help:Starting_a_new_page|Starting a New Page]] {{dot}} [[Help:Formatting|Formatting]] {{dot}} [[Help:Links|Links]] {{dot}} [[Help:Talk_pages|Talk Pages]] {{dot}} [[Help:Redirects|Redirects]] {{dot}} [[Help:Images|Images]]

|group3     = Advanced Editing
|list3      = [[Help:Moving_a_page|Moving Pages]] {{dot}} [[Help:Tables|Tables]] {{dot}} [[Help:Categories|Categories]] {{dot}} [[Help:Subpages|Subpages]] {{dot}} [[Help:Managing_files|Managing Files]] {{dot}} [[Help:Magic_words|Magic Words]] {{dot}} [[Help:Deleting_a_page|Deleting Pages]] {{dot}} [[Help:Templates|Templates]] {{dot}} [[Help:Namespaces|Namespaces]]

|below      = [[Help:Article|Demo Article]] {{dot}} [[Help:Nation|Demo Nation]] {{dot}} [[Help:Navbox|Demo Navbox]] {{dot}} [[Help:Character]] {{dot}} [[Help:Item|Demo Item]]
}}

Don't forget to end your template with the last two }}. This closes out the template that you began back at the beginning with {{navbox.

The final result of this template will look like this:

Base Template

The complete interface for this template is below. Copy this template to your template page and feel free to delete or leave the parts blank that you do not need to use. For space-saving purposes, only give groups are defined, but remember that you can define up to twenty within the confines of the base navbox template.

{{navbox
|name       = 
|title      = 
|image      =
|basestyle  =
|oddstyle   = 
|evenstyle  = 

|group1     = 
|list1      = 

|group2     = 
|list2      = 

|group3     = 
|list3      = 

|group4     = 
|list4      = 

|group5     = 
|list5      = 

|below      =
}}