Template:Badge display: Difference between revisions
m (title fix) |
(inner floats to go side by side on wide screen) |
||
Line 1: | Line 1: | ||
<div role="figure" style="display: | <div role="figure" style="display: flow-root; background-color: #f8f9fa; padding: 1em 0 0.5em; max-width: max-content;"> | ||
{{#ifexpr:{{#len:{{{icon 2|}}}}} and {{#len:{{{description 2|}}}}} | {{#ifexpr:{{#len:{{{icon 2|}}}}} and {{#len:{{{description 2|}}}}} | ||
| | | | ||
<!-- | <!-- two icons and two descriptions --> | ||
<div style="float: left; position: relative; margin-right: 1em; padding-left: 80px; max-width: 60ch;"> | |||
<div style="position: absolute; left: 1em; width: 48px;"><!-- | |||
<div style=" | -->[[File:{{{icon}}}|alt={{#if:{{#pos:{{{condition}}}|hero}}|hero or vigilante|villain or rogue}} icon]]<includeonly>{{#set:Image={{{icon}}}}}</includeonly> | ||
</div> | </div> | ||
<div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}''' ({{{condition}}})</div> | |||
{{#if:{{{title alternate|}}}| | |||
<div>'''{{{title alternate}}}''' ({{{condition alternate}}})</div> | |||
}}<!-- | |||
--><blockquote style="margin: 0;"> | |||
{{{description}}}<includeonly>{{#set:Description={{{description}}}}}</includeonly> | |||
</blockquote> | |||
</div> | </div> | ||
<div style=" | <div style="float: left; position: relative; margin-right: 1em; padding-left: 80px; max-width: 60ch;"> | ||
<div style="position: absolute; left: 1em; width: 48px;"><!-- | |||
-->[[File:{{{icon 2}}}|alt={{#if:{{#pos:{{{condition 2}}}|hero}}|hero or vigilante|villain or rogue}} icon]]<includeonly>{{#set:Image={{{icon 2}}}}}</includeonly> | |||
</div> | </div> | ||
{{#if:{{{title 2|}}}| | |||
<div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">'''{{{title 2}}}''' ({{{condition 2}}})</div> | |||
}} | |||
{{#if:{{{title 2 alternate|}}}| | |||
<div>'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}})</div> | |||
}}<!-- | |||
--><blockquote style="margin: 0;"> | |||
{{{description 2}}} | {{{description 2}}} | ||
</blockquote> | |||
</div> | </div> | ||
| | | | ||
<!-- | <!-- one icon (any number of descriptions), or one description (any number of icons) --> | ||
<div style="display: flow-root; position: relative; padding-left: {{#if:{{{icon 2|}}}|128px|80px}};"> | |||
<div style="position: absolute; left: 1em; width: {{#if:{{{icon 2|}}}|96px|48px}};"><!-- | |||
<div style="display: | |||
<div style=" | |||
-->{{#if:{{{icon 2|}}} | -->{{#if:{{{icon 2|}}} | ||
| | | | ||
<!-- two icons --> | <!-- two icons --> | ||
[[File:{{{icon}}}|alt={{#if:{{#pos:{{{condition}}}|hero}}|hero or vigilante|villain or rogue}} icon]]<includeonly>{{#set:Image={{{icon}}}}}</includeonly><!-- | |||
-->[[File:{{{icon 2}}}|alt={{#if:{{#pos:{{{condition 2}}}|hero}}|hero or vigilante|villain or rogue}} icon]]<includeonly>{{#set:Image={{{icon 2}}}}}</includeonly><!-- | -->[[File:{{{icon 2}}}|alt={{#if:{{#pos:{{{condition 2}}}|hero}}|hero or vigilante|villain or rogue}} icon]]<includeonly>{{#set:Image={{{icon 2}}}}}</includeonly><!-- | ||
--></span> | --></span> | ||
| | | | ||
<!-- only one icon --> | <!-- only one icon --> | ||
[[File:{{{icon}}}|alt=icon]]<includeonly>{{#set:Image={{{icon}}}}}</includeonly> | |||
}} | }} | ||
</div> | </div> | ||
<div style=" | |||
<div style="margin-top: 1em;">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}| ({{{condition}}})}}</div> | <div style="float: left; margin-right: 1em; max-width: 60ch;"> | ||
<div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}| ({{{condition}}})}}</div> | |||
{{#if:{{{title alternate|}}}| | {{#if:{{{title alternate|}}}| | ||
Line 72: | Line 58: | ||
--><blockquote style="margin: 0;"> | --><blockquote style="margin: 0;"> | ||
{{{description}}}<includeonly>{{#set:Description={{{description}}}}}</includeonly> | {{{description}}}<includeonly>{{#set:Description={{{description}}}}}</includeonly> | ||
</blockquote>< | </blockquote> | ||
</div> | |||
{{#if:{{{title 2|}}}{{{description 2|}}}| | |||
<div style="float: left; margin-right: 1em; max-width: 60ch;"> | |||
{{#if:{{{title 2|}}}| | |||
<div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">'''{{{title 2}}}''' ({{{condition 2}}})</div> | |||
}}<!-- | |||
-->{{#if:{{{title 2 alternate|}}}| | |||
<div>'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}})</div> | |||
}}<!-- | |||
-->{{#if:{{{description 2|}}}| | |||
<blockquote style="margin: 0;"> | |||
{{{description 2|{{{description}}}}}} | |||
</blockquote> | |||
}} | |||
</div> | |||
}} | |||
</div> | </div> | ||
}} | }} | ||
</div><noinclude>{{documentation}}</noinclude> | </div><noinclude>{{documentation}}</noinclude> |
Revision as of 01:52, 14 May 2022
{{{description}}}
Usage
{{badge display | icon = | icon width = (default 48) | title = | condition = | title alternate = | condition alternate = | description = | icon 2 = | title 2 = | condition 2 = | title 2 alternate = | condition 2 alternate = | description 2 = }}
Examples
Single icon, title, and description
{{badge display | icon = badge_tourist_01.png | title = Top Dog | description = The top of Atlas' statue is the first place many flying heroes will go. }}
Two titles
{{badge display | icon = badge_tourist_01.png | title = Mystic King | condition = male or huge | title alternate = Mystic Queen | condition alternate = female | description = Ley Lines are powerful forces of mystical energy that crisscross the planet. Where they meet is called a nexus, and all magic is stronger for miles around. }}
Two icons
{{badge display | icon = badge_tourist_01.png | condition = hero or villain | icon 2 = v_badge_TourismBadge.png | condition 2 = villain or rogue | title = Thrill Seeker | description = You're always looking for new forms of entertainment, and it's said that the Mission Architect technology is entertainment in its purest form. }}
Two descriptions
{{badge display | icon = badge_DayJob_Griefer.png | icon width = 64 | title = Predator | condition = hero or vigilante | description = You spend your free time battling villains in PvP Zones earning you the Predator Day Job. Logging out in a PvP zone will earn you a bonus to your Recharge rate, when you log back in, for a short time. | condition 2 = villain or rogue | description 2 = You spend your free time battling heroes in PvP zones earning you the Predator Day Job. Logging out in a PvP zone will earn you a bonus to your Recharge rate, when you log back in, for a short time. }}
You spend your free time battling villains in PvP Zones earning you the Predator Day Job. Logging out in a PvP zone will earn you a bonus to your Recharge rate, when you log back in, for a short time.
You spend your free time battling heroes in PvP zones earning you the Predator Day Job. Logging out in a PvP zone will earn you a bonus to your Recharge rate, when you log back in, for a short time.
Two titles and descriptions
{{badge display | icon = badge_DayJob_ShopKeeper.png | icon width = 64 | title = Shop Keeper | condition = hero or vigilante | description = You have spent your free time running a shop in Paragon City selling various wares earning you the Shop Keeper Day Job. Logging out in a store will earn you a random enhancement, upon each mission completion, for a short time. | title 2 = Price Gouger | condition 2 = villain or rogue | description 2 = You know better than to work retail in the Rogue Isles. Logging out in a store will earn you a random enhancement, upon each mission completion, for a short time. }}
You have spent your free time running a shop in Paragon City selling various wares earning you the Shop Keeper Day Job. Logging out in a store will earn you a random enhancement, upon each mission completion, for a short time.
You know better than to work retail in the Rogue Isles. Logging out in a store will earn you a random enhancement, upon each mission completion, for a short time.
Multiple icons, titles, and descriptions
{{badge display | icon = badge_damage_recvd_01.png | title = Adamant | condition = hero or vigilante | description = You have endured one million points of damage. | icon 2 = v_badge_TakenDamageBadge.png | title 2 = Ironman | condition 2 = male or huge villain or rogue | title 2 alternate = Ironwoman | condition 2 alternate = female villain or rogue | description 2 = Never let 'em see you bleed. That's a cool million points of damage. }}
See also
- Property:Has image
- Property:Has title
- Property:Has description
- {{BadgeBox}} - displays these properties in a shorter format on another page
- {{badge data}} - sets properties for data not displayed, e.g. index