How to Create a Navbox
Navboxes are nothing more than a table saved as a template. Navboxes are usually at the bottom of the article and usually only contain links to topics or locations. See the example at the bottom of this article.
Again an Navbox is a table. If you know how to create tables in Wikitext or HTML, it is not difficult. If you do not know Wikitext or HTLM, you will probably need someone who does to help you. If you would like to learn these two programs, see Wikitext or HTML Programming. Neither of these programming languages are difficult.
Step One - Create the table
- We are going to assume you know a little Wikitext and HTML in this tutorial. We will begin by creating a simple table. The coding will be displayed in both Wikitext and HTML side by side so can see the difference.
- Since navboxes usually extend from one side to the other, we have set the width for our navbox to 100%.
- It is recommended that you create infobox tables in HTML as there fewer problems as you will see.
- We will be creating a navbox as shown below.
<table="border:1px solid black; width:100%; ">
<table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; ">
<tr>
<td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles
</td>
</tr>
<tr>
{{#if:{{Ifempty|{{{group title1|}}}}}|
<td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}
{{#if:{{Ifempty|{{{group title1-item1|}}}}}|
<td style="text-align:left; background-color:{{{right column background color}}}; ">
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}}
<table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; ">
<tr>
{{#if:{{Ifempty|{{{group title1|}}}}}|
<td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles
</td>
</tr>
<tr>
<td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</td>
{{#if:{{Ifempty|{{{group title1-item1|}}}}}|
<td style="text-align:left; background-color:{{{right column background color}}}; ">
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} {{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} {{#if:{{{group title1-item3|}}}{{·}}|{{{group title1-item3}}}{{·}}|}} {{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} {{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}}|}}</td>
</tr>
</table>
- Now pay close attention to the table tags. You should notice this coding: class="infobox" in the table tag . This code tells the browser that a infobox is being created and to place it on the right hand side of the article.
- Since the name of the organization and the image will extend over the two columns which contain the information about the organization we will install colspan="2" in the organization and image coding.
- When you save your infobox be sure include the word "infobox" in the title so people will know what kind of template it is for example: {{template:infobox sample}}.
Step Two - Create the template
| Wikitext | HTML |
|
{{Navbox name |
{{Navbox name |