FamilySearch Wiki

How to Create a Navbox: Difference between revisions

Page Talk

How to Create a Navbox (view source)

Revision as of 15:54, 7 December 2022

18,004 bytes added ,  7 December 2022
m
Text replacement - "\{\{[\s_]+([^•].)" to "{{$1"
VisualWikitext
m (Text replacement - "\{\{[\s_]+([^•].)" to "{{$1")
 
(63 intermediate revisions by one other user not shown)
Line 7: Line 7:
===Step One - Create the table===
===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.   
*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.
*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.  
*We will be creating a navbox as shown below. {{User:Ccsmith/sandbox/navbox}}
<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}}}'''|}}
</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>
*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.
====Here is the coding in HTML and Wikitext for the above Navbox:====
<table style="border:1px solid black; width:100%; ">
<tr>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">Wikitext</td>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">HTML</td>
</tr>
<tr>
<tr>
<td style="width:50%; border:1px solid black; ">
<td style="border:1px solid black; ">
<nowiki><table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; "></nowiki><br>
<nowiki>{| style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "</nowiki><br><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>{{!}}-</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="text-align:right; width:15%; background-color:{{{left column background color}}};{{!}} "'''{{{group title1}}}'''|}}</nowiki><br><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<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>
<nowiki>|}</nowiki><br>
</td>
<td style="border:1px solid black; ">
<nowiki><table style="width:100%; border:1px solid blue; border-collaspe:separate; border-spacing:5px; "></nowiki><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 19: Line 50:
<nowiki></tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</nowiki><br>
<nowiki><td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki>
<nowiki></td></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki><td style="text-align:left; background-color:{{{right column background color}}}; ">
<nowiki><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}}}{{·}}|}}|}}</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></table></nowiki><br>
</td></tr></table>
====Create the table====
<p>
*The coding is scrunched up so let us spread it out a bit and break down the table coding. 
*First step is to create the table that will become part of the template: </p>
 
<!----first table illustrating creating table------------------------------>
<table style="border:1px solid black; width:100%; ">
 
<tr>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">Wikitext</td>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">HTML</td>
</tr>
<!----1st row------------------------------------------------------>
<tr>
<td>
<font color="red"><nowiki>{| style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "</nowiki></font color>
</td>
<td>
<font color="red"><nowiki><table style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "></nowiki></font color>
</td></tr>
<!----2nd row-------------------------------------------------------->
<tr><td>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{!}} colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}};</nowiki><br><nowiki>
{{!}} "Links to {{{name}}} - related articles</nowiki>
</td>
<td><nowiki><tr></nowiki><br>
<nowiki><td colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}}; </nowiki><br><nowiki>
">Links to {{{name}}} - related articles</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki>
</td></tr>
<!----3rd row-------------------------------------------------->
<tr><td>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}};</nowiki><br><nowiki>
{{!}} "'''{{{group title1}}}'''|}}</nowiki>
</td>
</td>
<td style="width:50%; border:1px solid black; ">
<td>
<nowiki><table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; "></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki><td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles</nowiki><br>
<nowiki><td style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}}; "></nowiki><br><nowiki>
'''{{{group title1}}}'''|}}</nowiki><br>
<nowiki></td></nowiki>
</td>
</tr>
<!----4th row---------------------------------------------------->
<tr>
<td><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki>
</td>
<td>
<nowiki><td></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki><td style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki>
</td>
</tr>
<!----5th row------------------------------------------------------>
<tr>
<td>
<font color="red"><nowiki>|}</nowiki></font color="red">
</td>
<td>
<font color="red"><nowiki></table></nowiki></font color>
</td>
</tr>
 
</table>
 
<p>
*Notice the table width is set at 100%.
*Second, the code for the border.  You can make anything you want.
*Third, the "[[HTML_and_Wikitext_-_Lesson_Three#Cell_separation|border-collaspe]]" coding is for creating a 5 pixel space between the cells of the table.  Notice the two lines of code for this attribute.</p>
 
====Coding for title====
<!----second table illustrating title creation---------------------------->
<table style="border:1px solid black; width:100%; ">
 
<tr>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">Wikitext</td>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">HTML</td>
</tr>
<!----1st row------------------------------------------------------>
<tr>
<td>
<nowiki>{| style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "</nowiki>
</td>
<td>
<nowiki><table style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "></nowiki>
</td></tr>
<!----2nd row-------------------------------------------------------->
<tr><td>
<font color="red"><nowiki>{{!}}-</nowiki><br>
<nowiki>{{!}} colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}};</nowiki><br><nowiki>
{{!}} "Links to {{{name}}} - related articles</nowiki></font color>
</td>
<td><font color="red"><nowiki><tr></nowiki><br>
<nowiki><td colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}}; </nowiki><br><nowiki>
">Links to {{{name}}} - related articles</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></tr></nowiki></font color="red">
</td></tr>
<!----3rd row-------------------------------------------------->
<tr><td>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}};</nowiki><br><nowiki>
{{!}} "'''{{{group title1}}}'''|}}</nowiki>
</td>
<td>
<nowiki><tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</td></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|
<nowiki><td style="</nowiki><br><nowiki>
<td style="text-align:left; background-color:{{{right column background color}}}; ">
text-align:right; </nowiki><br><nowiki>
{{#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>
width:15%; </nowiki><br><nowiki>
<nowiki></tr></nowiki><br>
background-color:{{{left column background color}}}; "></nowiki><br><nowiki>
<nowiki></table></nowiki><br>
'''{{{group title1}}}'''|}}</nowiki><br>
</td></tr></table>
<nowiki></td></nowiki>
</td>
</tr>
<!----4th row---------------------------------------------------->
<tr>
<td><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki>
</td>
<td>
<nowiki><td></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki><td style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki>
</td>
</tr>
<!----5th row------------------------------------------------------>
<tr>
<td>
<nowiki>|}</nowiki>
</td>
<td>
<nowiki></table></nowiki>
</td>
</tr>
</table>
<p>
*This navbox has two columns.  The first is for the group name such as Topic, Counties, Repositories, etc.
*The second column is for the items under the group title.
*Therefore the title has to span the two columns, hence the "colspan="2". 
*In addition, the title is centered and given a background color.
*Here is something new that you might not be familiar with: <nowiki>{{{title background color}}}</nowiki>.  This is a parameter within the three sets of {{{}}}.
*Within the set of curly brackets {{{}}} will appear the words that you will type in the navbox template that match the text within the {{{}}}.


*Now pay close attention to the table tags.  You should notice this coding: <font color="red"><nowiki>class="infobox"</nowiki></font color> 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.
</p>
*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 <font color="red">colspan="2"</font color> 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: <font color="red"><nowiki>{{template:infobox sample}}</nowiki></font color>.
----


===Step Two - Create the template===
====Coding for group names====
[[User:Ccsmith/sandbox/navbox|User:Ccsmith/sandbox/navbox]]
<table style="border:1px solid black; width:100%; ">
<table style="border:1px solid blue; width:100%">
<tr>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">Wikitext</td>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">HTML</td>
</tr>
<!----1st row------------------------------------------------------>
<tr>
<td>
<nowiki>{| style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "</nowiki>
</td>
<td>
<nowiki><table style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "></nowiki>
</td></tr>
<!----2nd row-------------------------------------------------------->
<tr><td>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{!}} colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}};</nowiki><br><nowiki>
{{!}} "Links to {{{name}}} - related articles</nowiki>
</td>
<td><nowiki><tr></nowiki><br>
<nowiki><td colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}}; </nowiki><br><nowiki>
">Links to {{{name}}} - related articles</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki>
</td></tr>
<!----3rd row-------------------------------------------------->
<tr><td>
<font color="red"><nowiki>{{!}}-</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}};</nowiki><br><nowiki>
{{!}} "'''{{{group title1}}}'''|}}</nowiki></font color="red">
</td>
<td>
<font color="red"><nowiki><tr></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki><td style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}}; "></nowiki><br><nowiki>
'''{{{group title1}}}'''|}}</nowiki><br>
<nowiki></td></nowiki></font color="red">
</td>
</tr>
<!----4th row---------------------------------------------------->
<tr>
<tr>
<td style="border:1px solid blue; text-align:center; font-size:16pt; ">Wikitext</td>
<td><br>
<td style="border:1px solid blue; text-align:center; font-size:16pt; ">HTML</td>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki>
</td>
<td>
<nowiki><td></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki><td style="text-align:left; background-color:{{{right column background color}}};  
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki>
</td>
</tr>
</tr>
<!----5th row------------------------------------------------------>
<tr>
<tr>
<td style="border:1px solid blue; ">
<td>
<nowiki>{{Navbox name</nowiki><br>
<nowiki>|}</nowiki>
<nowiki>|group title</nowiki><br>
</td>
<nowiki>|item1</nowiki><br>
<td>
<nowiki>|item2</nowiki><br>
<nowiki></table></nowiki>
<nowiki>|item3</nowiki><br>
<nowiki>|item4</nowiki><br>
<nowiki>|item5</nowiki><br>
<nowiki>}}</nowiki>
</td>
</td>
</tr>


<td style="border:1px solid blue; ">
</table>
<nowiki>{{Navbox name</nowiki><br>
 
<nowiki>|group title</nowiki><br>
====Coding for items====
<nowiki>|item1</nowiki><br>
<table style="border:1px solid black; width:100%; ">
<nowiki>|item2</nowiki><br>
<tr>
<nowiki>|item3</nowiki><br>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">Wikitext</td>
<nowiki>|item4</nowiki><br>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">HTML</td>
<nowiki>|item5</nowiki><br>
</tr>
<nowiki>}}</nowiki>
<!----1st row------------------------------------------------------>
<tr>
<td>
<nowiki>{| style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "</nowiki>
</td>
<td>
<nowiki><table style="</nowiki><br><nowiki>
width:100%; </nowiki><br><nowiki>
border:1px solid blue; </nowiki><br><nowiki>
border-collaspe:separate; </nowiki><br><nowiki>
border-spacing:5px; "></nowiki>
</td></tr>
<!----2nd row-------------------------------------------------------->
<tr><td>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{!}} colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}};</nowiki><br><nowiki>
{{!}} "Links to {{{name}}} - related articles</nowiki>
</td>
<td><nowiki><tr></nowiki><br>
<nowiki><td colspan="2" </nowiki><br><nowiki>
style="</nowiki><br><nowiki>
text-align:center; </nowiki><br><nowiki>
background-color:{{{title background color}}}; </nowiki><br><nowiki>
">Links to {{{name}}} - related articles</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki>
</td></tr>
<!----3rd row-------------------------------------------------->
<tr><td>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}};</nowiki><br><nowiki>
{{!}} "'''{{{group title1}}}'''|}}</nowiki>
</td>
<td>
<nowiki><tr></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</nowiki><br>
<nowiki><td style="</nowiki><br><nowiki>
text-align:right; </nowiki><br><nowiki>
width:15%; </nowiki><br><nowiki>
background-color:{{{left column background color}}}; "></nowiki><br><nowiki>
'''{{{group title1}}}'''|}}</nowiki><br>
<nowiki></td></nowiki>
</td>
</tr>
<!----4th row---------------------------------------------------->
<tr>
<td><br>
<font color="red"><nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki></font color="red">
</td>
<td>
<font color="red"><nowiki><td></nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki><td style="text-align:left; background-color:{{{right column background color}}};
"></nowiki><nowiki>
{{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item2|}}}|{{{group title1-item2}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item3|}}}|{{{group title1-item3}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item4|}}}|{{{group title1-item4}}}{{·}}|}} </nowiki><br>
<nowiki>
{{#if:{{{group title1-item5|}}}|{{{group title1-item5}}}{{·}}|}} </nowiki><br>
<nowiki>
|}}</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki></font color="red">
</td>
</tr>
<!----5th row------------------------------------------------------>
<tr>
<td>
<nowiki>|}</nowiki>
</td>
<td>
<nowiki></table></nowiki>
</td>
</td>
</tr>
</tr>
</table>
</table>


====Meaning of each line of the code====
*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 [[HTML_and_Wikitext_-_Lesson_Three#Cell_separation|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: <font color="red"><nowiki>{{template:infobox sample}}</nowiki></font color>.
----


===Step Two - Create the template===
*Since there is only one way to create a template in the Wiki, we will only show the Wikitext coding:
[[User:Ccsmith/sandbox/navbox|User:Ccsmith/sandbox/navbox]]
<table style="border:1px solid black; width:100%">
<tr>
<td>
<nowiki>{{Navbox name</nowiki><br>
<nowiki>|title background color=</nowiki><br>
<nowiki>|left column background color=</nowiki><br>
<nowiki>|right column background color=</nowiki><br>
<nowiki>|name=</nowiki><br>
<nowiki>|group title=</nowiki><br>
<nowiki>|item1=</nowiki><br>
<nowiki>|item2=</nowiki><br>
<nowiki>|item3=</nowiki><br>
<nowiki>|item4=</nowiki><br>
<nowiki>|item5=</nowiki>
<nowiki>}}</nowiki></td></tr></table>
====Example of an existing Navbox====


  {{Missouri|Missouri}}
  {{Missouri|Missouri}}
[[category:Templates]]
Tegnosis
Approver, Batcheditor, Moderator, Patroller, Protector, Reviewer, Bots, Bureaucrats, editor, Interface administrators, pagecreator, pagedeleter, Page Ownership admin, Push subscription managers, Suppressors, Administrators, Upload Wizard campaign editors, Widget editors
321,763

edits

Retrieved from "https://integration-ru.familysearch.org/en/wiki/Special:MobileDiff/1859207...5060497"