How to Create a Navbox: Difference between revisions
| Line 26: | Line 26: | ||
====Here is the coding in HTML and Wikitext for the above Navbox:==== | ====Here is the coding in HTML and Wikitext for the above Navbox:==== | ||
*First step is to create the table: | *First step is to create the table: | ||
<!---- | <!----first table illustrating creating table------------------------------> | ||
<table style="border:1px solid black; width:100%; "> | <table style="border:1px solid black; width:100%; "> | ||
<tr> | <tr> | ||
| Line 50: | Line 35: | ||
<tr> | <tr> | ||
<td style="border:1px solid black; "> | <td style="border:1px solid black; "> | ||
<nowiki>{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "</nowiki><br><br> | <font color="red"><nowiki>{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "</nowiki></font color><br><br> | ||
<nowiki>{{!}}-</nowiki><br> | <nowiki>{{!}}-</nowiki><br> | ||
<nowiki>{{!}} colspan="2" style="text-align:center; background-color:{{{title background color}}};{{!}} "Links to {{{name}}} - related articles</nowiki><br><br><br> | <nowiki>{{!}} colspan="2" style="text-align:center; background-color:{{{title background color}}};{{!}} "Links to {{{name}}} - related articles</nowiki><br><br><br> | ||
| Line 59: | Line 44: | ||
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}}; "> | <nowiki>{{!}} 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}}}{{·}}|}}|}}</nowiki><br><br> | {{#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}}}{{·}}|}}|}}</nowiki><br><br> | ||
<nowiki>|}</nowiki><br> | <font color="red"><nowiki>|}</nowiki></font color><br> | ||
</td> | </td> | ||
<td style="border:1px solid black; "> | <td style="border:1px solid black; "> | ||
<nowiki><table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "></nowiki><br> | <font color="red"><nowiki><table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "></nowiki></font color><br> | ||
<nowiki><tr></nowiki><br> | <nowiki><tr></nowiki><br> | ||
<nowiki><td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles</nowiki><br> | <nowiki><td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles</nowiki><br> | ||
| Line 75: | Line 60: | ||
{{#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></nowiki><br> | {{#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></nowiki><br> | ||
<nowiki></tr></nowiki><br> | <nowiki></tr></nowiki><br> | ||
<nowiki></table></nowiki><br> | <font color="red"><nowiki></table></nowiki></font color><br> | ||
</td></tr></table> | </td></tr></table> | ||
Revision as of 09:52, 7 October 2014
[edit | edit source]
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.
[edit | edit source]
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[edit | edit source]
- 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.
- 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. User:Ccsmith/sandbox/navbox
| Links to {{{name}}} - related articles | |
- It does not look like much because you still have fill it in with the links or other information that you may want to display for your readers.
[edit | edit source]
- First step is to create the table:
| Wikitext | HTML |
|
{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " |
<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> |
| Wikitext | HTML |
|
{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " |
<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> |
| Wikitext | HTML |
|
{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " |
<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> |
| Wikitext | HTML |
|
{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; " |
<table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "> |
Meaning of each line of the code[edit | edit source]
- Since navboxes usually extend from one side to the other, we have set the width for our navbox to 100%.
- We have installed a 1 pixel solid blue line around our navbox.
- "border-collaspe:separate; border-spacing:5px means we are placing a 5 pixel space between the boxes in the template. See Cell Separation for more details.
- The title of the navbox has to extend both columns of the navbox so that is coded with the colspan="2" code.
- When you save your navbox be sure include the word "navbox" in the title so people will know what kind of template it is for example: {{template:infobox sample}}.
Step Two - Create the template[edit | edit source]
- Since there is only one way to create a template in the Wiki, we will only show the Wikitext coding:
|
{{Navbox name |