Template:HeroTabs/doc: Difference between revisionsGive feedback
Jump to navigation
Jump to search
Gammaton32 (talk | contribs) |
Gammaton32 (talk | contribs) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{TS}} | {{TS}} | ||
== Usage == | == Usage == | ||
Adds a navigation header for a | Adds a navigation header for a main page and its subpages. Mainly used for heroes but also works for other pages if it has the same subpages. | ||
Place this template at the top of the relevant pages. The template automatically detects which subpages exist and highlights the current (active) page's tab. | Place this template at the top of the relevant pages. The template automatically detects which subpages exist and highlights the current (active) page's tab. | ||
| Line 15: | Line 15: | ||
<div class=navbox-title style="border-radius: 8px; color:#FFF5E8; margin:0 auto 1em; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:1em; padding:0px; font-family:'Retail Demo','Radiance',sans-serif; text-transform:uppercase; font-weight:bold; font-size:15px;"> | <div class=navbox-title style="border-radius: 8px; color:#FFF5E8; margin:0 auto 1em; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:1em; padding:0px; font-family:'Retail Demo','Radiance',sans-serif; text-transform:uppercase; font-weight:bold; font-size:15px;"> | ||
<!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Overview</span></div> | <!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Overview</span></div> | ||
<!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Update History</span></div> | |||
<!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Strategy</span></div> | |||
<!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Movement</span></div> | |||
<!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Lore</span></div> | |||
<!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Quotes</span></div> | <!--Inactive Tab--><div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Quotes</span></div> | ||
<!--Active Tab--><div style="background-color:#FFF0D6; color:#483728; padding:4px 8px; border-radius: 4px 4px 0 0;"><span style="color:#483728;">Sounds</span></div> | <!--Active Tab--><div style="background-color:#FFF0D6; color:#483728; padding:4px 8px; border-radius: 4px 4px 0 0;"><span style="color:#483728;">Sounds</span></div> | ||
</div> | </div> | ||
Latest revision as of 23:41, 7 July 2026
This template uses CSS found at HeroTabs/styles.css.
Usage
[edit source]Adds a navigation header for a main page and its subpages. Mainly used for heroes but also works for other pages if it has the same subpages.
Place this template at the top of the relevant pages. The template automatically detects which subpages exist and highlights the current (active) page's tab.
Example
[edit source]Using the code:
{{HeroTabs}}
Will render the navigation bar. The example below shows how it appears on the "Sounds" page, with that tab highlighted as active.