Template:Badge display: Difference between revisions
(inner floats to go side by side on wide screen) |
m (override vector padding and border on blockquote) |
||
(23 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<div role="figure" style="display: flow-root; background-color: #f8f9fa; padding: 1em 0 0.5em; max-width: max-content;"> | <includeonly><div role="figure" style="display: flow-root; background-color: #f8f9fa; padding: 1em 0 {{#if:{{{title alternate|}}}{{{title 2 alternate|}}}|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 --> | <!-- two icons and two descriptions --> | ||
<div style="float: left; position: relative; margin-right: 1em; padding-left: | <div style="float: left; position: relative; margin-right: 1em; padding-left: {{#expr:{{{icon width|48}}}+32}}px; max-width: 48ch;"> | ||
<div style="position: absolute; left: 1em; width: | <div style="position: absolute; left: 1em; width: {{{icon width|48}}}px;"><!-- | ||
-->[[File:{{{icon}}}|alt={{#if:{{#pos:{{{condition}}}|hero}}|hero or vigilante|villain or rogue}} icon]] | -->[[File:{{{icon}}}|{{{icon width|48}}}px|alt={{#if:{{#pos:{{{condition}}}|hero}}|hero or vigilante|villain or rogue}} icon]]{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has image=File:{{{icon}}}}}}} | ||
</div> | </div> | ||
<div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}''' ({{{condition}}})</div> | <div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}| ({{{condition}}})}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title}}}}}}}</div> | ||
{{#if:{{{title alternate|}}}| | {{#if:{{{title alternate|}}}| | ||
<div>'''{{{title alternate}}}''' ({{{condition alternate}}})</div> | <div style="margin-bottom: -0.75em;">'''{{{title alternate}}}''' ({{{condition alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title alternate}}}}}}}</div> | ||
}}<!-- | }}<!-- | ||
--><blockquote style="margin: 0;"> | --><blockquote style="margin: 0; border: 0; padding: 1em 0;"> | ||
{{{description}}} | {{{description}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description}}}}}}}}} | ||
</blockquote> | </blockquote> | ||
</div> | </div> | ||
<div style="float: left; position: relative; margin-right: 1em; padding-left: | <div style="float: left; position: relative; margin-right: 1em; padding-left: {{#expr:{{{icon width|48}}}+32}}px; max-width: 48ch;"> | ||
<div style="position: absolute; left: 1em; width: | <div style="position: absolute; left: 1em; width: {{{icon width|48}}}px;"><!-- | ||
-->[[File:{{{icon 2}}}|alt={{#if:{{#pos:{{{condition 2}}}|hero}}|hero or vigilante|villain or rogue}} icon]] | -->[[File:{{{icon 2}}}|{{{icon width|48}}}px|alt={{#if:{{#pos:{{{condition 2}}}|hero}}|hero or vigilante|villain or rogue}} icon]]{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has image=File:{{{icon 2}}}}}}} | ||
</div> | </div> | ||
{{#if:{{{title 2|}}}| | {{#if:{{{title 2|}}}| | ||
<div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">'''{{{title 2}}}''' ({{{condition 2}}})</div> | <div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">'''{{{title 2}}}''' ({{{condition 2}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2}}}}}}}</div> | ||
}} | }} | ||
{{#if:{{{title 2 alternate|}}}| | {{#if:{{{title 2 alternate|}}}| | ||
<div>'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}})</div> | <div style="margin-bottom: -0.75em;">'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2 alternate}}}}}}}</div> | ||
}}<!-- | }}<!-- | ||
--><blockquote style="margin: 0;"> | --><blockquote style="margin: 0; border: 0; padding: 1em 0;"> | ||
{{{description 2}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description 2}}}}}}}}} | |||
</blockquote> | </blockquote> | ||
</div> | </div> | ||
| | | | ||
<!-- one icon (any number of descriptions), or one description (any number of icons) --> | <!-- one icon (any number of descriptions), or one description (any number of icons) --> | ||
<div style="display: flow-root; position: relative; padding-left: {{# | <div style="display: flow-root; position: relative; padding-left: {{#expr:{{{icon width|48}}}+32}}px;"> | ||
<div style="position: absolute; left: 1em; width | <div style="position: absolute; left: 1em; width: {{{icon width|48}}}px;"><!-- | ||
-->{{#if:{{{icon 2|}}} | -->{{#if:{{{icon alternate|}}}{{{icon 2|}}} | ||
| | | | ||
<!-- two icons --> | <!-- two icons --> | ||
[[File:{{{icon}}}|alt={{#if:{{#pos:{{{condition}}}|hero}}|hero or vigilante|villain or rogue}} icon]] | [[File:{{{icon}}}|{{{icon width|48}}}px|alt={{#if:{{#pos:{{{condition}}}|hero}}|hero or vigilante|villain or rogue}} icon]]{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has image=File:{{{icon}}}}}}}<!-- | ||
-->[[File:{{{icon 2}}}|alt={{#if:{{#pos:{{{condition 2}}}|hero}}|hero or vigilante|villain or rogue}} icon]] | -->[[File:{{{icon alternate|}}}{{{icon 2|}}}|{{{icon width|48}}}px|alt={{#if:{{#pos:{{{condition alternate|}}}{{{condition 2|}}}|hero}}|hero or vigilante|villain or rogue}} icon]]{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has image=File:{{{icon alternate|}}}{{{icon 2|}}}}}}}<!-- | ||
--></span> | --></span> | ||
| | | | ||
<!-- only one icon --> | <!-- only one icon --> | ||
[[File:{{{icon}}}|alt=icon]] | [[File:{{{icon}}}|alt=icon]]{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has image=File:{{{icon}}}}}}} | ||
}} | }} | ||
</div> | </div> | ||
<div style="float: left; margin-right: 1em; max-width: | <div style="float: left; margin-right: 1em; max-width: 48ch;"> | ||
<div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}| ({{{condition}}})}}</div> | <div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}| ({{{condition}}})}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title}}}}}}}</div> | ||
{{#if:{{{title alternate|}}}| | {{#if:{{{title alternate|}}}| | ||
<div>'''{{{title alternate}}}''' ({{{condition alternate}}})</div> | <div style="margin-bottom: -0.75em;">'''{{{title alternate}}}''' ({{{condition alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title alternate}}}}}}}</div> | ||
}}<!-- | }}<!-- | ||
--><blockquote style="margin: 0;"> | --><blockquote style="margin: 0; border: 0; padding: 1em 0;"> | ||
{{{description}}} | {{{description}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description}}}}}}}}} | ||
</blockquote> | </blockquote> | ||
</div> | </div> | ||
{{#if:{{{title 2|}}}{{{description 2|}}}| | {{#if:{{{title 2|}}}{{{description 2|}}}| | ||
<div style="float: left; margin-right: 1em; max-width: | <div style="float: left; margin-right: 1em; max-width: 48ch;"> | ||
{{#if:{{{ | {{#if:{{{condition 2|}}}| | ||
<div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">'''{{{title 2}}}''' ({{{condition 2}}})</div> | <div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">{{#if:{{{title 2|}}}|'''{{{title 2}}}''' {{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2}}}}}}}}}({{{condition 2}}})</div> | ||
}}<!-- | }}<!-- | ||
-->{{#if:{{{title 2 alternate|}}}| | -->{{#if:{{{title 2 alternate|}}}| | ||
<div>'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}})</div> | <div style="margin-bottom: -0.75em;">'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2 alternate}}}}}}}</div> | ||
}}<!-- | }}<!-- | ||
-->{{#if:{{{description 2|}}}| | -->{{#if:{{{description 2|}}}| | ||
<blockquote style="margin: 0;"> | <blockquote style="margin: 0; border: 0; padding: 1em 0;"> | ||
{{{description 2|{{{description}}}}}} | {{{description 2}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description 2}}}}}}}}} | ||
</blockquote> | </blockquote> | ||
}} | }} | ||
Line 80: | Line 80: | ||
</div> | </div> | ||
}} | }} | ||
</div><noinclude>{{documentation}}</noinclude> | </div></includeonly><noinclude>{{documentation}}</noinclude> |
Latest revision as of 01:36, 8 October 2022
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