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

13,981 bytes added ,  7 December 2022
m
Text replacement - "\{\{[\s_]+([^•].)" to "{{$1"
VisualWikitext
m (Text replacement - "\{\{[\s_]+([^•].)" to "{{$1")
 
(51 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}}
{{User:ccsmith/sandbox/navbox1
<table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; ">
|name=
<tr>
<!----select colors for background of box, title, right and left columns------------>
<td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles
|navbox background color=#ffffff
</td>
|title background color=#fcca2a
</tr>
|left column background color=#fff75e
<tr>
|right column background color=#fffba4
{{#if:{{Ifempty|{{{group title1|}}}}}|
 
<td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}
<!----Group titles can be Topics, Counties, Migration Routes, anything that is a list of items to be posted in the navbox---------------------->
</td>
<!----if you need more items in a group, copy and paste a line and then put the correct sequential number after the word "item" for additional items added---->
{{#if:{{Ifempty|{{{group title1-item1|}}}}}|
<!----in addition you need to add more items you need to the navbox template to add more lines.  go to User:Ccsmith/sandbox/navbox1 for instructions---->
<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>
|group title1=
</tr>
|group title1-item1=
</table>
|group title1-item2=
*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.
|group title1-item3=
====Here is the coding in HTML and Wikitext for the above Navbox:====
|group title1-item5=
|group title1-item6=
|group title1-item7=
|group title1-item8=
|group title1-item9=
|group title1-item10=
|group title1-item11=
|group title1-item12=
|group title1-item13=
|group title1-item14=
|group title1-item15=
|group title1-item16=
|group title1-item17=
|group title1-item18=
|group title1-item19=
|group title1-item20=
<!----to add more title-items copy and past one of the group title-item lines and add the correct numbers---->
 
<!----second row with subject of line and links for the subject---------------------->
|group title2=
|group title2-item1=
|group title2-item2=
|group title2-item3=
|group title2-item4=
|group title2-item5=
|group title2-item6=
|group title2-item7=
|group title2-item8=
|group title2-item9=
|group title2-item10=
|group title2-item11=
|group title2-item12=
|group title2-item13=
|group title2-item14=
|group title2-item15=
|group title2-item16=
|group title2-item17=
|group title2-item18=
|group title2-item19=
|group title2-item20=
<!----to add more title-items copy and past one of the group title-item lines and add the correct numbers---->
<!----thrid row with subject of line and links for the subject---------------------->
|group title3=
|group title3-item1=
|group title3-item2=
|group title3-item3=
|group title3-item4=
|group title3-item5=
|group title3-item6=
|group title3-item7=
|group title3-item8=
|group title3-item9=
|group title3-item10=
|group title3-item11=
|group title3-item12=
|group title3-item13=
|group title3-item14=
|group title3-item15=
|group title3-item16=
|group title3-item17=
|group title3-item18=
|group title3-item19=
|group title3-item20=
<!----to add more title-items copy and past one of the group title-item lines and add the correct numbers---->
<!----fourth row with subject of line and links for the subject---------------------->
|group title4=
|group title4-item1=
|group title4-item2=
|group title4-item3=
|group title4-item4=
|group title4-item5=
|group title4-item6=
|group title4-item7=
|group title4-item8=
|group title4-item9=
|group title4-item10=
|group title4-item11=
|group title4-item12=
|group title4-item13=
|group title4-item14=
|group title4-item15=
|group title4-item16=
|group title4-item17=
|group title4-item18=
|group title4-item19=
|group title4-item20=
<!----to add more title-items copy and past one of the group title-item lines and add the correct numbers---->
<!----fifth row with subject of line and links for the subject---------------------->
|group title5=
|group title5-item1=
|group title5-item2=
|group title5-item3=
|group title5-item4=
|group title5-item5=
|group title5-item6=
|group title5-item7=
|group title5-item8=
|group title5-item9=
|group title5-item10=
|group title5-item11=
|group title5-item12=
|group title5-item13=
|group title5-item14=
|group title5-item15=
|group title5-item16=
|group title5-item17=
|group title5-item18=
|group title5-item19=
|group title5-item20=
<!----to add more title-items copy and past one of the group title-item lines and add the correct numbers---->
 
<!----If you need more group titles and items, just copy and paste another set of group title and group title-items----->
 
}}
*Here is the coding in HTML and Wikitext for the above Navbox:
 
<table style="border:1px solid black; width:100%; ">
<table style="border:1px solid black; width:100%; ">
<tr>
<tr>
Line 149: Line 32:
<tr>
<tr>
<td style="border:1px solid black; ">
<td style="border:1px solid black; ">
<nowiki>{| 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>{{!}}-</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>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{!}}-</nowiki><br>
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}|</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>{{!}} 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>{{#if:{{Ifempty|{{{group title1-item1|}}}}}|</nowiki><br>
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}}; ">
<nowiki>{{!}} style="text-align:left; background-color:{{{right column background color}}}; ">
Line 161: Line 44:
</td>
</td>
<td style="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><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 176: Line 59:
<nowiki></table></nowiki><br>
<nowiki></table></nowiki><br>
</td></tr></table>
</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>
<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>
<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></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>{{#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>
<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. 
</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 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===
====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>
</table>


<td style="border:1px solid blue; ">
====Coding for items====
<nowiki>{{Navbox name</nowiki><br>
<table style="border:1px solid black; width:100%; ">
<nowiki>|group title</nowiki><br>
<tr>
<nowiki>|item1</nowiki><br>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">Wikitext</td>
<nowiki>|item2</nowiki><br>
<td style="text-align:center; font-size:16pt; color:blue; width:50%; ">HTML</td>
<nowiki>|item3</nowiki><br>
</tr>
<nowiki>|item4</nowiki><br>
<!----1st row------------------------------------------------------>
<nowiki>|item5</nowiki><br>
<tr>
<nowiki>}}</nowiki>
<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/1862174...5060497"