Template:HeroTabs/doc: Difference between revisionsGive feedback
Jump to navigation
Jump to search
Created page with "== Usage == Adds navigation tabs for Overview, Quotes, Sounds, and Update History on hero pages. Place this template at the very top of any hero page or its standard sub-pages. It automatically uses the root page name and shows only the tabs that exist. == Examples == <pre> {{HeroTabs}} </pre> <div style="background:rgba(0,0,0,.25); display:flex; flex-wrap:wrap; justify-content:center; gap:1em; padding:6px 0; font-family:'Retail Demo','Radiance',sans-serif; text-tran..." |
Gammaton32 (talk | contribs) |
||
| (9 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{TS}} | |||
== Usage == | == Usage == | ||
Adds navigation | 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 | 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 == | |||
Using the code: | |||
<pre> | <pre> | ||
{{HeroTabs}} | {{HeroTabs}} | ||
</pre> | </pre> | ||
<div style=" | Will render the navigation bar. The example below shows how it appears on the "Sounds" page, with that tab highlighted as active. | ||
<div style="padding:4px 8px;">Overview</div> | |||
<div style="padding:4px 8px;"> | <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 style="padding:4px 8px;"> | <!--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> | ||
<div style="padding:4px 8px;"> | <!--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> | |||
<!--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> | ||
| Line 21: | Line 26: | ||
[[Category:Navigation templates]] | [[Category:Navigation templates]] | ||
</includeonly> | </includeonly> | ||
<noinclude> | |||
[[Category:Template documentation]] | |||
</noinclude> | |||
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.