Template:HeroTabs/doc: Difference between revisionsGive feedback
Jump to navigation
Jump to search
Gammaton32 (talk | contribs) color |
Updated to reflect new active tab styling. |
||
| Line 1: | Line 1: | ||
== Usage == | == Usage == | ||
Adds navigation | Adds a navigation header for a character's main page and its 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="border-radius: 8px;background-image: linear-gradient(#987556, #483728); 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: | 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;color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Overview</div> | |||
<div style="padding:4px 8px;color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Quotes</div> | <div style="border-radius: 8px;background-image: linear-gradient(#987556, #483728); 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;color:# | <!--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;color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Update History</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> | |||
<!--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> | |||
</div> | </div> | ||
Revision as of 15:16, 27 July 2025
Usage
Adds a navigation header for a character's main page and its 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
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.
Overview
Quotes
Sounds
Update History