User:Morris the Mata Nui Cow/Sandbox: Difference between revisions

This article is the Featured Chronicle
This article has the current Featured Quote
external image
From BIONICLEsector01
→‎Page status indicators: Switching gen icons to locally hosted SVGs, fixing dropdown button heights
Line 81: Line 81:


====Gen 1====
====Gen 1====
<indicator name="era-g1"><img>http://www.brickshelf.com/gallery/Infra-Red/BS01/g1_noarrow.svg</img><div id="era-g1-button" class="fade-trigger" data-target="era-g1-dropdown" style="display:inline-block;width:1.25em;vertical-align:middle;color:#fff;text-align:center;height:2.5em;background:#056b7d;line-height:2.5em;">▾</div></indicator>
<indicator name="era-g1">[[File:Gen1.svg|x30px]]<div id="era-g1-button" class="fade-trigger" data-target="era-g1-dropdown" style="display:inline-block;width:1.25em;vertical-align:middle;color:#fff;text-align:center;height:30px;line-height:30px;background:#056b7d;">▾</div></indicator>


<div id="era-g1-dropdown" class="dropdown fadable faded" data-button="era-g1-button" data-tray="era-g1-dropdown-tray" data-arrow="era-g1-dropdown-arrow">
<div id="era-g1-dropdown" class="dropdown fadable faded" data-button="era-g1-button" data-tray="era-g1-dropdown-tray" data-arrow="era-g1-dropdown-arrow">
Line 103: Line 103:


====Gen 2====
====Gen 2====
<indicator name="era-g2"><img>http://www.brickshelf.com/gallery/Infra-Red/BS01/g2_noarrow.svg</img><div id="era-g2-button" class="fade-trigger" data-target="era-g2-dropdown" style="display:inline-block;width:1.25em;vertical-align:middle;color:#fff;text-align:center;height:2.5em;background:#056b7d;line-height:2.5em;">▾</div></indicator>
<indicator name="era-g2">[[File:Gen2.svg|x30px]]<div id="era-g2-button" class="fade-trigger" data-target="era-g2-dropdown" style="display:inline-block;width:1.25em;vertical-align:middle;color:#fff;text-align:center;height:30px;line-height:30px;background:#056b7d;">▾</div></indicator>





Revision as of 01:02, 4 May 2017

Documentation

This template produces parent page buttons.

Parameter Function
(first parameter) The parent page.
(second parameter) The background color of the button.
width (optional) The width of the button (be sure to include units). Defaults to 103px.
height (optional) The height of the button (be sure to include units). Defaults to 40px.
dark (optional) If this parameter is included and set to any value at all, the text will be black instead of white.

Page status indicators

Era

Try resizing the window or deleting the indicators in the "Other" section to see how the dropdown adapts when it gets too close to the edge of the container.

Gen 1


Gen 2


Other