Difference between revisions of "Template:Navbox"
From Nookipedia, the Animal Crossing wiki
Dorsal Axe (talk | contribs) |
Dorsal Axe (talk | contribs) (Add navgroups to mobile template, fixes to mobile headers) |
||
| Line 135: | Line 135: | ||
{{{!}} class{{=}}"collapsible collapsed" colspan="12" width=100% align="center" style="{{roundybottom|9px}} | {{{!}} class{{=}}"collapsible collapsed" colspan="12" width=100% align="center" style="{{roundybottom|9px}} | ||
{{!-}} | {{!-}} | ||
| − | {{!}} style="display: grid; grid-template-columns: repeat(auto-fill, {{{ | + | {{!}} style="display: grid; grid-template-columns: repeat(auto-fill, {{{NavWidth|125px}}}); grid-row-gap: 3px; grid-column-gap: 15px; justify-content: center;" {{!}} {{{NavList|}}} |
{{!}}} }} | {{!}}} }} | ||
}} | }} | ||
| Line 148: | Line 148: | ||
{{{!}} class{{=}}"collapsible collapsed" colspan="12" width=100% align="center" style="{{roundybottom|9px}} | {{{!}} class{{=}}"collapsible collapsed" colspan="12" width=100% align="center" style="{{roundybottom|9px}} | ||
{{!-}} | {{!-}} | ||
| − | {{!}} style="display: grid; grid-template-columns: repeat(auto-fill, {{{ | + | {{!}} style="display: grid; grid-template-columns: repeat(auto-fill, {{{NavWidth2|130px}}}); grid-row-gap: 3px; grid-column-gap: 15px; justify-content: center;" {{!}} {{{NavList2|}}} |
{{!}}} }} | {{!}}} }} | ||
}} | }} | ||
| Line 179: | Line 179: | ||
|- {{#if:{{{Above|}}}| | |- {{#if:{{{Above|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{AboveLink|}}} | [[{{{AboveLink|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above|}}}</span>]] | {{{Above|}}} }}''' |
}} | }} | ||
<!-- GROUP 1 --> | <!-- GROUP 1 --> | ||
| Line 191: | Line 191: | ||
|- {{#if:{{{Above2|}}}| | |- {{#if:{{{Above2|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above2Link|}}} | [[{{{Above2Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above2|}}}</span>]] | {{{Above2|}}} }}''' |
}} | }} | ||
<!-- GROUP 2 --> | <!-- GROUP 2 --> | ||
| Line 203: | Line 203: | ||
|- {{#if:{{{Above3|}}}| | |- {{#if:{{{Above3|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above3Link|}}} | [[{{{Above3Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above3|}}}</span>]] | {{{Above3|}}} }}''' |
}} | }} | ||
<!-- GROUP 3 --> | <!-- GROUP 3 --> | ||
| Line 215: | Line 215: | ||
|- {{#if:{{{Above4|}}}| | |- {{#if:{{{Above4|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above4Link|}}} | [[{{{Above4Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above4|}}}</span>]] | {{{Above4|}}} }}''' |
}} | }} | ||
<!-- GROUP 4 --> | <!-- GROUP 4 --> | ||
| Line 227: | Line 227: | ||
|- {{#if:{{{Above5|}}}| | |- {{#if:{{{Above5|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above5Link|}}} | [[{{{Above5Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above5|}}}</span>]] | {{{Above5|}}} }}''' |
}} | }} | ||
<!-- GROUP 5 --> | <!-- GROUP 5 --> | ||
| Line 239: | Line 239: | ||
|- {{#if:{{{Above6|}}}| | |- {{#if:{{{Above6|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above6Link|}}} | [[{{{Above6Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above6|}}}</span>]] | {{{Above6|}}} }}''' |
}} | }} | ||
<!-- GROUP 6 --> | <!-- GROUP 6 --> | ||
| Line 251: | Line 251: | ||
|- {{#if:{{{Above7|}}}| | |- {{#if:{{{Above7|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above7Link|}}} | [[{{{Above7Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above7|}}}</span>]] | {{{Above7|}}} }}''' |
}} | }} | ||
<!-- GROUP 7 --> | <!-- GROUP 7 --> | ||
| Line 263: | Line 263: | ||
|- {{#if:{{{Above8|}}}| | |- {{#if:{{{Above8|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above8Link|}}} | [[{{{Above8Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above8|}}}</span>]] | {{{Above8|}}} }}''' |
}} | }} | ||
<!-- GROUP 8 --> | <!-- GROUP 8 --> | ||
| Line 275: | Line 275: | ||
|- {{#if:{{{Above9|}}}| | |- {{#if:{{{Above9|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above9Link|}}} | [[{{{Above9Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above9|}}}</span>]] | {{{Above9|}}} }}''' |
}} | }} | ||
<!-- GROUP 9 --> | <!-- GROUP 9 --> | ||
| Line 287: | Line 287: | ||
|- {{#if:{{{Above10|}}}| | |- {{#if:{{{Above10|}}}| | ||
{{!-}} | {{!-}} | ||
| − | {{!}} | + | {{!}} style="background: hsl({{{PrimaryColor|0 0}}}% {{#if:{{{OverridePrimary|}}}|{{{OverridePrimary}}}|70%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});" width=12% align="center" {{!}} '''{{#if: {{{Above10Link|}}} | [[{{{Above10Link|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{Above10|}}}</span>]] | {{{Above10|}}} }}''' |
}} | }} | ||
<!-- GROUP 10 --> | <!-- GROUP 10 --> | ||
| Line 295: | Line 295: | ||
{{!-}} | {{!-}} | ||
{{!}} style="background: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideRow|}}}|{{{OverrideRow}}}|90%}});" align="center" {{!}} <font size="2">{{{List10|}}}</font> | {{!}} style="background: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideRow|}}}|{{{OverrideRow}}}|90%}});" align="center" {{!}} <font size="2">{{{List10|}}}</font> | ||
| + | }} | ||
| + | <!-- NAVGROUP --> | ||
| + | |- {{#if:{{{NavGroup|}}}| | ||
| + | {{!-}} | ||
| + | {{!}} style="background: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideGroup|}}}|{{{OverrideGroup}}}|80%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}}); {{roundy|9px}}" align="center" {{!}} {{#if: {{{NavGroupLink|}}} | [[{{{NavGroupLink|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{NavGroup|}}}</span>]] | {{{NavGroup|}}} }} | ||
| + | <!-- NAVLIST --> | ||
| + | {{#if:{{{NavList|}}}| | ||
| + | {{!-}} | ||
| + | {{!}} | ||
| + | {{{!}} class{{=}}"collapsible collapsed" colspan="12" width=100% align="center" style="{{roundybottom|9px}} | ||
| + | {{!-}} | ||
| + | {{!}} style="display: grid; grid-template-columns: repeat(auto-fill, {{{NavWidth|125px}}}); grid-row-gap: 3px; grid-column-gap: 15px; justify-content: center;" {{!}} {{{NavList|}}} | ||
| + | {{!}}} }} | ||
| + | }} | ||
| + | <!-- NAVGROUP2 --> | ||
| + | |- {{#if:{{{NavGroup2|}}}| | ||
| + | {{!-}} | ||
| + | {{!}} style="background: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideGroup|}}}|{{{OverrideGroup}}}|80%}}); font-family: Coustard; font-weight: normal; color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}}); {{roundy|9px}}" align="center" {{!}} {{#if: {{{NavGroupLink|}}} | [[{{{NavGroupLink|}}}|<span style="color: hsl({{#if:{{{SecondaryColor|}}}|{{{SecondaryColor|}}}|{{{PrimaryColor|0 0}}}}}% {{#if:{{{OverrideText|}}}|{{{OverrideText}}}|30%}});">{{{NavGroup|}}}</span>]] | {{{NavGroup2|}}} }} | ||
| + | <!-- NAVLIST2 --> | ||
| + | {{#if:{{{NavList2|}}}| | ||
| + | {{!-}} | ||
| + | {{!}} | ||
| + | {{{!}} class{{=}}"collapsible collapsed" colspan="12" width=100% align="center" style="{{roundybottom|9px}} | ||
| + | {{!-}} | ||
| + | {{!}} style="display: grid; grid-template-columns: repeat(auto-fill, {{{NavWidth2|130px}}}); grid-row-gap: 3px; grid-column-gap: 15px; justify-content: center;" {{!}} {{{NavList2|}}} | ||
| + | {{!}}} }} | ||
}} | }} | ||
<!-- BELOW --> | <!-- BELOW --> | ||
Revision as of 13:16, July 9, 2020
Template documentation (view)
This template is complex or is transcluded on a large number of pages.
Due to the sensitive nature of this template, caution is advised before editing. Any changes should first be tested in a sandbox. Please consider discussing planned changes on the talk page or with staff members before implementing them.
This template is complex or is transcluded on a large number of pages.
Due to the sensitive nature of this template, caution is advised before editing. Any changes should first be tested in a sandbox. Please consider discussing planned changes on the talk page or with staff members before implementing them.
Usage
{{Navbox
| Title =
| Link =
| Icon =
| IconSize =
| Image =
| PrimaryColor =
| SecondaryColor =
| Width =
| Above =
| Group =
| GroupLink =
| List =
| Below =
| BelowLink =
}}
This template is intended to be used for all navboxes, as it allows them to be easily created and maintained and gives them a consistent visual style and functionality. It is very complex, and has been designed to adapt to the many different needs of various navboxes across the wiki. This template is mobile-friendly and will appear with repositioned elements on mobile devices.
The following parameters primarily set the visual style of the template:
Titlesets the displayed heading of the navbox.Linksets a linked page for the navbox title.Iconis an optional parameter that allows an image or text to appear in the upper-left corner of the navbox.IconSizeis an optional parameter that allows a custom size for the icon to be specified.Imagesets the image file to be displayed on the right side of the navbox.
PrimaryColorsets the display colors of the infobox. Requires hue and saturation values in in HSL format, as other colors on the template are adjusted dynamically based on these values.SecondaryColorallows a complimentary color to be specified. Requires hue and saturation values in in HSL format, as other colors on the template are adjusted dynamically based on these values.Widthallows a custom width to be specified for the navbox (for style reasons this parameter should normally not be used)
The following parameters primarily set the content of the template:
Abovesets a text heading to be displayed above the group and list.Groupsets a text heading for the group, which appears to the left of the list.GroupLinksets sets a linked page for the group heading text.Listsets the content that appears in the list. This should always be wikilinks to articles, and each link should be separated with a bullet (•) symbol.
The following parameters set the content of the navbox footer. This should be used to link to the topic's category, project page or relevant image category. It can also be used for broad topic links that don't fit into any of the groups in the navbox.
Belowsets the text of a link that will appear in the footer.BelowLinksets the linked page for the specified text.
The infobox template supports up to 10 groups with lists and 5 footer links. When adding more than one, you must append the sequential number to the names of the parameters like so. Failing to this will result in display errors.
| Above2 = | Group2 = | Group2Link = | List2 = | Below2 = | Below2Link =
Example
{{Navbox
| Title = Fashion
| Icon = Tops NH Icon cropped.png
| Image = [[File:Gracie NLWa.png|40px|link=]]
| PrimaryColor = 322 49
| Group = Clothing
| List = [[Clothes]] • [[Accessories]] • [[Bottoms]] • [[Dress|Dresses]] • [[Headgear]] • [[Shoes]] • [[Socks]] • [[Tops]] • [[Umbrellas]] • [[Wigs]]
| Group2 = Concepts
| List2 = [[Design]]s • [[Look]] • [[Hairstyle]] • [[Mii mask]]
| Group3 = Merchants
| List3 = [[Able Sisters]] • [[GracieGrace]] • [[Kicks (shop)|Kicks]] • [[Shampoodle]]
| Group4 = Designers
| List4 = [[Gracie]] • [[Harriet]] • [[Kicks]] • [[Label]] • [[Mabel]] • [[Sable]]
| Below = Category
| BelowLink = :Category:Furniture
| Below2 = Project
| Below2Link = Nookipedia:Project Fashion
}}
