Template:Badge display: Difference between revisions

From Unofficial Homecoming Wiki
Jump to navigation Jump to search
(Created page with "<div role="figure" style="display: table; margin-top: 1em; max-width: 70ch;"> {{#ifexpr:{{#len:{{{icon 2|}}}{{{icon 3|}}}}} and {{#len:{{{title 2|}}}{{{description 2|}}}{{{t...")
 
m (override vector padding and border on blockquote)
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div role="figure" style="display: table; margin-top: 1em; max-width: 70ch;">
<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|}}}{{{icon 3|}}}}} and {{#len:{{{title 2|}}}{{{description 2|}}}{{{title 3|}}}{{{description 3|}}}}}
  {{#ifexpr:{{#len:{{{icon 2|}}}}} and {{#len:{{{description 2|}}}}}
   |
   |
     <!--
     <!-- two icons and two descriptions -->
      more than one icon, and
     <div style="float: left; position: relative; margin-right: 1em; padding-left: {{#expr:{{{icon width|48}}}+32}}px; max-width: 48ch;">
      more than one title or description
       <div style="position: absolute; left: 1em; width: {{{icon width|48}}}px;"><!--
    -->
    -->[[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 style="display: table-row;">
       <div style="display: table-cell;">
        [[File:{{{icon}}}|link=|alt=]]<br>[[Media:{{{icon}}}|{{{condition}}} icon]]{{#set:Image={{{icon}}}}}
       </div>
       </div>
      <div style="display: table-cell;">
        <div>'''{{{title}}}''' ({{{condition}}})</div>


        <blockquote style="margin: 0;">
      <div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}|&#32;({{{condition}}})}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title}}}}}}}</div>
          {{{description}}}
      {{#if:{{{title alternate|}}}|
         </blockquote>
         <div style="margin-bottom: -0.75em;">'''{{{title alternate}}}''' ({{{condition alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title alternate}}}}}}}</div>
       </div>
      }}<!--
 
  --><blockquote style="margin: 0; border: 0; padding: 1em 0;">
        {{{description}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description}}}}}}}}}
       </blockquote>
     </div>
     </div>
     <div style="display: table-row;">
     <div style="float: left; position: relative; margin-right: 1em; padding-left: {{#expr:{{{icon width|48}}}+32}}px; max-width: 48ch;">
       <div style="display: table-cell;">
       <div style="position: absolute; left: 1em; width: {{{icon width|48}}}px;"><!--
        {{#if:{{{icon 2|}}}|
    -->[[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}}}}}}}
          [[File:{{{icon 2}}}|link=|alt=]]<br>[[Media:{{{icon 2}}}|{{{condition 2}}} icon]]{{#set:Image={{{icon 2}}}}}
        }}
       </div>
       </div>
      <div style="display: table-cell;">
        {{#if:{{{title 2|}}}|
          <div>'''{{{title 2}}}''' ({{{condition 2}}})</div>
        }}


        {{#if:{{{description 2|}}}|
      {{#if:{{{title 2|}}}|
          <blockquote style="margin: 0;">
        <div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">'''{{{title 2}}}''' ({{{condition 2}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2}}}}}}}</div>
            {{{description 2}}}
      }}
          </blockquote>
      {{#if:{{{title 2 alternate|}}}|
         }}
        <div style="margin-bottom: -0.75em;">'''{{{title 2 alternate}}}''' ({{{condition 2 alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2 alternate}}}}}}}</div>
       </div>
      }}<!--
 
  --><blockquote style="margin: 0; border: 0; padding: 1em 0;">
         {{{description 2}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description 2}}}}}}}}}
       </blockquote>
     </div>
     </div>
    {{#if:{{{icon 3|}}}{{{title 3|}}}{{{description 3|}}}|
      <div style="display: table-row;">
        <div style="display: table-cell;">
          {{#if:{{{icon 3|}}}|
            [[File:{{{icon 3}}}|link=|alt=]]<br>[[Media:{{{icon 3}}}|{{{condition 3}}} icon]]{{#set:Image={{{icon 3}}}}}
          }}
        </div>
        <div style="display: table-cell;">
          {{#if:{{{title 3|}}}|
            <div>'''{{{title 3}}}''' ({{{condition 3}}})</div>
          }}
          {{#if:{{{description 3|}}}|
            <blockquote style="margin: 0;">
              {{{description 3}}}
            </blockquote>
          }}
        </div>
      </div>
    }}
   |
   |
     <!--
     <!-- one icon (any number of descriptions), or one description (any number of icons) -->
      only one icon (any number of titles and descriptions), or
     <div style="display: flow-root; position: relative; padding-left: {{#expr:{{{icon width|48}}}+32}}px;">
      only one title and one description (any number of icons)
       <div style="position: absolute; left: 1em; width: {{{icon width|48}}}px;"><!--
    -->
     -->{{#if:{{{icon alternate|}}}{{{icon 2|}}}
     <div style="display: table-row;">
       <div style="display: table-cell;"><!--
     -->{{#if:{{{icon 2|}}}{{{icon 3|}}}
         |
         |
           <!-- more than one icon -->
           <!-- two icons -->
          <span style="display: inline-block;">
             [[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}}}|link=|alt=]]<br>[[Media:{{{icon}}}|{{{condition}}} icon]]{{#set:Image={{{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>
          {{#if:{{{icon 2|}}}
          |
            <span style="display: inline-block;">
              [[File:{{{icon 2}}}|link=|alt=]]<br>[[Media:{{{icon 2}}}|{{{condition 2}}} icon]]{{#set:Image={{{icon 2}}}}}
            </span>
          |
            <span style="display: inline-block;">
              [[File:{{{icon 3}}}|link=|alt=]]<br>[[Media:{{{icon 3}}}|{{{condition 3}}} icon]]{{#set:Image={{{icon 3}}}}}
            </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="display: table-cell;">
        <div>'''{{{title}}}''' {{#if:{{{condition|}}}|({{{condition}}})}}</div>


         <blockquote style="margin: 0;">
      <div style="float: left; margin-right: 1em; max-width: 48ch;">
          {{{description}}}
         <div style="margin-top: {{#if:{{{title alternate|}}}|0.2em|1em}};">'''{{{title}}}'''{{#if:{{{title alternate|}}}{{{title 2|}}}|&#32;({{{condition}}})}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title}}}}}}}</div>
        </blockquote><!--


    -->{{#if:{{{title 2|}}}|
        {{#if:{{{title alternate|}}}|
           <div>'''{{{title 2}}}''' ({{{condition 2}}})</div>
           <div style="margin-bottom: -0.75em;">'''{{{title alternate}}}''' ({{{condition alternate}}}){{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title alternate}}}}}}}</div>
         }}<!--
         }}<!--


     -->{{#if:{{{description 2|}}}|
     --><blockquote style="margin: 0; border: 0; padding: 1em 0;">
           <blockquote style="margin: 0;">
          {{{description}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description}}}}}}}}}
            {{{description 2|{{{description}}}}}}
        </blockquote>
          </blockquote>
      </div>
        }}<!--
 
      {{#if:{{{title 2|}}}{{{description 2|}}}|
        <div style="float: left; margin-right: 1em; max-width: 48ch;">
           {{#if:{{{condition 2|}}}|
            <div style="margin-top: {{#if:{{{title 2 alternate|}}}|0.2em|1em}};">{{#if:{{{title 2|}}}|'''{{{title 2}}}'''&#32;{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has title={{{title 2}}}}}}}}}({{{condition 2}}})</div>
          }}<!--


    -->{{#if:{{{title 3|}}}|
      -->{{#if:{{{title 2 alternate|}}}|
          <div>'''{{{title 3}}}''' ({{{condition 3}}})</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 3|}}}|
      -->{{#if:{{{description 2|}}}|
          <blockquote style="margin: 0;">
            <blockquote style="margin: 0; border: 0; padding: 1em 0;">
            {{{description 3|{{{description}}}}}}
              {{{description 2}}}{{#ifeq:{{NAMESPACENUMBER}}|0|{{#set:Has description={{delink|{{{description 2}}}}}}}}}
          </blockquote>
            </blockquote>
        }}
          }}
      </div>
        </div>
      }}
     </div>
     </div>
   }}
   }}
</div><noinclude>{{documentation}}</noinclude>
</div></includeonly><noinclude>{{documentation}}</noinclude>

Latest revision as of 01:36, 8 October 2022

[edit] [purge] Documentation

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.
}}
icon
Top Dog

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.
}}
icon
Mystic King (male or huge)
Mystic Queen (female)

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.
}}
hero or vigilante iconvillain or rogue icon
Thrill Seeker

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.
}}
icon
Predator

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.

(villain or rogue)

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.
}}
icon
Shop Keeper (hero or vigilante)

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.

Price Gouger (villain or rogue)

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.
}}
hero or vigilante icon
Adamant (hero or vigilante)

You have endured one million points of damage.

villain or rogue icon
Ironman (male or huge villain or rogue)
Ironwoman (female villain or rogue)

Never let 'em see you bleed. That's a cool million points of damage.

See also