Interface administrators, smwadministrator, smwcurator, smweditor
82,369
edits
How to Create a Navbox: Difference between revisions
m
→Step One - Create the table
| Line 9: | Line 9: | ||
*Since navboxes usually extend from one side to the other, we have set the width for our navbox to 100%. | *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. | ||
<table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; "> | |||
<tr> | <nowiki><table style="width:100%; border:1px solid blue; background-color:{{{navbox background color}}}; border-collaspe:separate; border-spacing:5px; "></nowiki><br> | ||
<td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles | <nowiki><tr></nowiki><br> | ||
</td> | <nowiki><td colspan="2" style="text-align:center; background-color:{{{title background color}}}; ">Links to {{{name}}} - related articles</nowiki><br> | ||
</tr> | <nowiki></td></nowiki><br> | ||
<nowiki></tr></nowiki><br> | |||
<!----ADDING GROUP NAMES AND ITEMS. Each group is equipped with 20 items. If you need more, you will have to add more items with this coding: {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}}. If you are increasing the number of items in a group, all you have to do is increase the item number for each new one added. So if you add another item say number 21, the code becomes {{#if:{{{group title1-item21|}}}|{{{group title1-item21}}}{{·}}|}}. But you have to add this new item coding between the last item and the final "|}}</td>"----> | <!----ADDING GROUP NAMES AND ITEMS. Each group is equipped with 20 items. If you need more, you will have to add more items with this coding: {{#if:{{{group title1-item1|}}}|{{{group title1-item1}}}{{·}}|}}. If you are increasing the number of items in a group, all you have to do is increase the item number for each new one added. So if you add another item say number 21, the code becomes {{#if:{{{group title1-item21|}}}|{{{group title1-item21}}}{{·}}|}}. But you have to add this new item coding between the last item and the final "|}}</td>"----> | ||
<tr> | <nowiki><tr></nowiki><br> | ||
{{#if:{{Ifempty|{{{group title1|}}}}}| | <nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}| | ||
<td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</td> | <td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</nowiki><br> | ||
{{#if:{{Ifempty|{{{group title1-item1|}}}}}| | <nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}| | ||
<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}}}{{·}}|}} {{#if:{{{group title1-item6|}}}|{{{group title1-item6}}}{{·}}|}} {{#if:{{{group title1-item7|}}}|{{{group title1-item7}}}{{·}}|}} {{#if:{{{group title1-item8|}}}|{{{group title1-item8}}}{{·}}|}} {{#if:{{{group title1-item9|}}}|{{{group title1-item9}}}{{·}}|}} {{#if:{{{group title1-item10|}}}|{{{group title1-item10}}}{{·}}|}} {{#if:{{{group title1-item11|}}}|{{{group title1-item11}}}{{·}}|}} {{#if:{{{group title1-item12|}}}|{{{group title1-item12}}}{{·}}|}} {{#if:{{{group title1-item13|}}}|{{{group title1-item13}}}{{·}}|}} {{#if:{{{group title1-item14|}}}|{{{group title1-item14}}}{{·}}|}} {{#if:{{{group title1-item15|}}}|{{{group title1-item15}}}{{·}}|}} {{#if:{{{group title1-item16|}}}|{{{group title1-item16}}}{{·}}|}} {{#if:{{{group title1-item17|}}}|{{{group title1-item17}}}{{·}}|}} {{#if:{{{group title1-item18|}}}|{{{group title1-item18}}}{{·}}|}} {{#if:{{{group title1-item19|}}}|{{{group title1-item19}}}{{·}}|}} {{#if:{{{group title1-item20|}}}|{{{group title1-item20}}}{{·}}|}}|}}</nowiki><br> | |||
<nowiki>{{#if:{{Ifempty|{{{group title1|}}}}}| | |||
<td style="text-align:right; width:15%; background-color:{{{left column background color}}}; ">'''{{{group title1}}}'''|}}</td></nowiki><br> | |||
<nowiki>{{#if:{{Ifempty|{{{group title1-item1|}}}}}| | |||
<td style="text-align:left; background-color:{{{right column background color}}}; "> | <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}}}{{·}}|}} {{#if:{{{group title1-item6|}}}|{{{group title1-item6}}}{{·}}|}} {{#if:{{{group title1-item7|}}}|{{{group title1-item7}}}{{·}}|}} {{#if:{{{group title1-item8|}}}|{{{group title1-item8}}}{{·}}|}} {{#if:{{{group title1-item9|}}}|{{{group title1-item9}}}{{·}}|}} {{#if:{{{group title1-item10|}}}|{{{group title1-item10}}}{{·}}|}} {{#if:{{{group title1-item11|}}}|{{{group title1-item11}}}{{·}}|}} {{#if:{{{group title1-item12|}}}|{{{group title1-item12}}}{{·}}|}} {{#if:{{{group title1-item13|}}}|{{{group title1-item13}}}{{·}}|}} {{#if:{{{group title1-item14|}}}|{{{group title1-item14}}}{{·}}|}} {{#if:{{{group title1-item15|}}}|{{{group title1-item15}}}{{·}}|}} {{#if:{{{group title1-item16|}}}|{{{group title1-item16}}}{{·}}|}} {{#if:{{{group title1-item17|}}}|{{{group title1-item17}}}{{·}}|}} {{#if:{{{group title1-item18|}}}|{{{group title1-item18}}}{{·}}|}} {{#if:{{{group title1-item19|}}}|{{{group title1-item19}}}{{·}}|}} {{#if:{{{group title1-item20|}}}|{{{group title1-item20}}}{{·}}|}}|}}</td> | {{#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}}}{{·}}|}} {{#if:{{{group title1-item6|}}}|{{{group title1-item6}}}{{·}}|}} {{#if:{{{group title1-item7|}}}|{{{group title1-item7}}}{{·}}|}} {{#if:{{{group title1-item8|}}}|{{{group title1-item8}}}{{·}}|}} {{#if:{{{group title1-item9|}}}|{{{group title1-item9}}}{{·}}|}} {{#if:{{{group title1-item10|}}}|{{{group title1-item10}}}{{·}}|}} {{#if:{{{group title1-item11|}}}|{{{group title1-item11}}}{{·}}|}} {{#if:{{{group title1-item12|}}}|{{{group title1-item12}}}{{·}}|}} {{#if:{{{group title1-item13|}}}|{{{group title1-item13}}}{{·}}|}} {{#if:{{{group title1-item14|}}}|{{{group title1-item14}}}{{·}}|}} {{#if:{{{group title1-item15|}}}|{{{group title1-item15}}}{{·}}|}} {{#if:{{{group title1-item16|}}}|{{{group title1-item16}}}{{·}}|}} {{#if:{{{group title1-item17|}}}|{{{group title1-item17}}}{{·}}|}} {{#if:{{{group title1-item18|}}}|{{{group title1-item18}}}{{·}}|}} {{#if:{{{group title1-item19|}}}|{{{group title1-item19}}}{{·}}|}} {{#if:{{{group title1-item20|}}}|{{{group title1-item20}}}{{·}}|}}|}}</td></nowiki><br> | ||
<nowiki></tr></nowiki><br> | |||
< | <nowiki></table></nowiki><br> | ||
< | |||
</ | |||
</table> | |||
*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. | *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. | ||