Help:Navboxes

This is a ShoutWiki help page, hosted at ShoutWiki Hub. If you want to suggest changes, leave a message on its talk page. If you want to replace this page with a custom help page for your wiki, click the create button above.

A guide to help you create basic navboxes for your wiki.

The start code

This code will be used to help you create your navbox. Copy it to the template page you want to create. We will be creating Template:People. This may look quite complex code but that's only because I left the code for the borders in so each cell is identifiable - really this is just a table.

{| class="navbox" style="border: 1px solid #000; width: 100%;"
! colspan="2" style="border-bottom: 1px solid #000;" | <span style="font-size: larger;">{{{title}}}</span>
|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | {{{topic1}}}
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | {{{pages1}}}
|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | {{{topic2}}}
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | {{{pages2}}}
|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | {{{topic3}}}
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | {{{pages3}}}
|-
| style="border-right: 1px solid #000;" | {{{topic4}}}
| style="border-left: 1px solid #000;" | {{{pages4}}}
|}

Customizing the code

The code above can be transformed into any navbox you want. The most important part of it to understand and customize is this:

|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | {{{topic1}}}
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | {{{pages1}}}

Here {{{topic1}}} should be replaced by the name of this group, for example in our People template we shall have Presidents as a group. The {{{pages1}}} will feature a list of pages in this group, for example Presidents will have people like President Obama, President Washington and President Kennedy.

Completing the People Navbox

You can add as many groups as you want to your navbox, but for simplicities sake we will stick to the four in the original code.

Below is a "full" People navbox. I say "full" in quotes as navboxes are very dependant on what you want in there based on the pages on your site. Here I've just put some random people into random categories. Also, you'll want to change {{{title}}} to the name of your navbox. This code below

{| class="navbox" style="border: 1px solid #000; width: 100%;"
! colspan="2" style="border-bottom: 1px solid #000;" | <span style="font-size: larger;">People</span>
|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | Presidents
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | [[President Obama]] '''•''' [[President Washington]] '''•''' [[President Kennedy]]
|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | [[ShoutWiki Staff]]
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | [[User:Cook879|Cook879]] '''•''' [[User:Isarra|Isarra]] '''•''' [[User:Jack Phoenix|Jack Phoenix]] '''•''' [[User:Jedimca0|Jedimca0]] '''•''' [[User:Lcawte|Lcawte]] '''•''' [[User:Lynton|Lynton]] '''•''' [[User:Nicmavr|Nicmavr]] '''•''' [[User:Pinky|Pinky]] '''•''' [[User:Solar Dragon|Solar Dragon]]
|- 
| style="border-bottom: 1px solid #000; border-right: 1px solid #000;" | Pirates
| style="border-bottom: 1px solid #000; border-left: 1px solid #000;" | [[Blackbeard]] '''•''' [[Bluebeard]] '''•''' [[Redbeard]] '''•''' [[Greenbeard]]
|-
| style="border-right: 1px solid #000;" | Cartoon characters
| style="border-left: 1px solid #000;" | [[Bart Simpson]] '''•''' [[Mickey Mouse]] '''•''' [[Scoobey Doo]] '''•''' [[Bugs Bunny]]
|}

To add this on the page, type {{People}}.

produces (not to induce a load of red links, some of the links below have been directed to Wikipedia):

Style

It's possible to do all sort of things to your navbox to change the style using CSS. CSS, however, falls out of the scope of this page.