Template:HeroTabs/doc: Difference between revisions

Line 1:

== Usage ==

Adds navigation ~~tabs~~ for ~~Overview, Quotes, Sounds,~~ and ~~Update History on hero pages~~.

Adds a navigation header for a character's main page and its subpages.

Place this template at the ~~very~~ top of ~~any hero page or its standard sub-~~pages.

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.

It automatically ~~uses~~ the ~~root~~ page ~~name and shows only the tabs that exist~~.

~~== Examples ==~~

== Example ==

Using the code:

<pre>

</pre>

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="padding:4px 8px;color:#~~FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black~~;">Sounds</div>

<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>

<div style="padding:4px 8px; cursor:pointer"><span style="color:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Quotes</span></div>

<div style="background-color:#FFF0D6; color:#483728; padding:4px 8px; border-radius: 4px 4px 0 0;"><span style="color:#483728;">Sounds</span></div>

<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>

Template:HeroTabs/doc: Difference between revisionsGive feedback

LVL (talk | contribs)

@@ Line 1: / Line 1: @@
 == Usage ==
-Adds navigation tabs for Overview, Quotes, Sounds, and Update History on hero pages.
+Adds a navigation header for a character's main page and its subpages.
-Place this template at the very top of any hero page or its standard sub-pages.
+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.
-It automatically uses the root page name and shows only the tabs that exist.
-== Examples ==
+== Example ==
+Using the code:
 <pre>
 {{HeroTabs}}
 </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:17px;">
+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:#FFF0D6; text-shadow: 0px 2px 2px black, 0px 0px 2px black;">Sounds</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>
-<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>