Template:Infobox Characters: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 1: Line 1:
<includeonly>
<includeonly>
<div class="character-infobox" id="character-infobox-{{{name|}}}" style="
<div class="character-infobox" style="
     float: right !important;  
     float: right !important;  
     clear: right !important;  
     clear: right !important;  
Line 6: Line 6:
     width: 100% !important;
     width: 100% !important;
     margin: 0 0 16px 16px !important;  
     margin: 0 0 16px 16px !important;  
     border: 1px solid #e7c361 !important;  
     border: 1px solid #E4B17F !important; /* --brown-300 */
     border-radius: 10px !important;
     border-radius: 8px !important;
     background-color: rgba(255, 255, 255, 0.9) !important;
     background-color: #F6F6F6 !important; /* --gray-050 */
     font-size: 0.875em !important;
     font-size: .9em !important;
     font-family: Fredoka, sans-serif !important;
     font-family: Helvetica, Arial, sans-serif !important;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
     box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
">
">


     <div class="character-header" style="
     <div class="character-header" style="
         background: #e7c361 !important;  
         background: #E4B17F !important; /* --brown-300 */
         color: #202122 !important;  
         color: #000 !important;  
         padding: 8px 10px !important;  
         padding: 8px 10px !important;  
         border-radius: 10px 10px 0 0 !important;
         border-radius: 8px 8px 0 0 !important;
         text-align: center !important;  
         text-align: center !important;  
         font-weight: 700 !important;
         font-weight: 700 !important;
        font-size: 0.875em !important;
        line-height: 1.6 !important;
     ">
     ">
         <div class="character-title" style="font-size: 1.5em !important; margin: 0 !important; color: #202122 !important;">
         <div class="character-title" style="font-size: 1.5em !important; margin: 0 !important;">
             {{{name|Unknown Character}}}
             {{{name|Unknown Character}}}
         </div>
         </div>
Line 30: Line 28:
      
      
     {{#if: {{{image|}}} |
     {{#if: {{{image|}}} |
     <div class="character-image" style="padding: 10px !important; text-align: center !important; background: #f8f9fa !important;">
     <div class="character-image" style="padding: 10px !important; text-align: center !important; background: #F6F6F6 !important;">
         [[File:{{{image|}}}|300px|alt={{{name|}}}]]
         [[File:{{{image|}}}|300px|alt={{{name|}}}]]
     </div>
     </div>
Line 39: Line 37:
             font-size: 1.1em !important;  
             font-size: 1.1em !important;  
             font-weight: 600 !important;
             font-weight: 600 !important;
             padding: 5px 10px !important;
             padding: 8px 10px !important;
             margin-top: 10px !important;
             margin: 0 !important;
            margin-bottom: 5px !important;
             border-bottom: 1px solid #E9E5E5 !important; /* --gray-100 */
             border-bottom: 1px solid #a2a9b1 !important;
             color: #31302F !important; /* --gray-700 */
             color: #202122 !important;
             background: #F6F6F6 !important; /* --gray-050 */
             background: rgba(231, 195, 97, 0.1) !important;
         ">Quick Facts</div>
         ">Quick Facts</div>
          
          
         <div class="data-group" style="padding: 0 10px 10px 10px !important;">
         <div class="data-group" style="padding: 0 10px 10px 10px !important; background: #fff !important;">
              
              
             {{#if: {{{nickname|}}} |  
             {{#if: {{{nickname|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important; /* --gray-200 */">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Nickname:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; /* --gray-500 */ flex: 1;">Nickname:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{nickname|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{nickname|}}}</span>
             </div>  
             </div>  
             }}
             }}
              
              
             {{#if: {{{age|}}} |  
             {{#if: {{{age|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Age:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Age:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{age|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{age|}}}</span>
             </div>  
             </div>  
             }}
             }}
              
              
             {{#if: {{{race|}}} |  
             {{#if: {{{race|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Race:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Race:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{race|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{race|}}}</span>
             </div>  
             </div>  
             }}
             }}
              
              
             {{#if: {{{element|}}} |  
             {{#if: {{{element|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Element:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Element:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{element|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{element|}}}</span>
             </div>  
             </div>  
             }}
             }}


             {{#if: {{{weapon|}}} |  
             {{#if: {{{weapon|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Weapon:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Weapon:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{weapon|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{weapon|}}}</span>
             </div>  
             </div>  
             }}
             }}


             {{#if: {{{guild_status|}}} |  
             {{#if: {{{guild_status|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Guild Status:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Guild Status:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{guild_status|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{guild_status|}}}</span>
             </div>  
             </div>  
             }}
             }}


             {{#if: {{{birthday|}}} |  
             {{#if: {{{birthday|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Birthday:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Birthday:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{birthday|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{birthday|}}}</span>
             </div>  
             </div>  
             }}
             }}


             {{#if: {{{romance|}}} |  
             {{#if: {{{romance|}}} |  
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; border-bottom: 1px dotted #c8ccd1 !important;">
             <div class="data-row" style="display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; border-bottom: 1px dotted #C7C4C4 !important;">
                 <span class="data-label" style="font-weight: 500 !important; color: #54595d !important; flex: 1;">Romance:</span>  
                 <span class="data-label" style="font-weight: 500 !important; color: #545353 !important; flex: 1;">Romance:</span>  
                 <span class="data-value" style="padding-left: 10px !important; text-align: right; flex: 1;">{{{romance|}}}</span>
                 <span class="data-value" style="text-align: right; flex: 1; font-weight: 500;">{{{romance|}}}</span>
             </div>  
             </div>  
             }}
             }}
Line 109: Line 106:
      
      
     {{#if: {{{tabs|}}} |
     {{#if: {{{tabs|}}} |
     <div class="character-tabs" style="display: flex !important; justify-content: space-around !important; padding: 10px !important; background: #eaecf0 !important; border-top: 1px solid #a2a9b1 !important; border-radius: 0 0 10px 10px !important;">
     <div class="character-tabs" style="
        display: flex !important;  
        justify-content: space-around !important;  
        padding: 8px !important;  
        background: #E9E5E5 !important; /* --gray-100 */
        border-top: 1px solid #E4B17F !important;  
        border-radius: 0 0 8px 8px !important;
    ">
         <button class="tab-button active" data-tab="tab-stats" style="
         <button class="tab-button active" data-tab="tab-stats" style="
             background-color: #e7c361 !important;
             background-color: #E4B17F !important; /* --brown-300 */
             color: #202122 !important;
             color: #000 !important;
             border: 1px solid #e7c361 !important;
             border: 1px solid #E4B17F !important;
             border-radius: 2px !important;
             border-radius: 4px !important;
             padding: 5px 10px !important;
             padding: 6px 12px !important;
             font-family: inherit !important;
             font-family: inherit !important;
             font-size: 0.8125em !important;
             font-size: 0.85em !important;
             font-weight: bold !important;
             font-weight: bold !important;
             cursor: pointer !important;
             cursor: pointer !important;
            transition: background-color 100ms !important;
         ">Stats</button>
         ">Stats</button>
         <button class="tab-button" data-tab="tab-abilities" style="
         <button class="tab-button" data-tab="tab-abilities" style="
             background-color: #f8f9fa !important;
             background-color: #F6F6F6 !important; /* --gray-050 */
             color: #202122 !important;
             color: #545353 !important; /* --gray-500 */
             border: 1px solid #a2a9b1 !important;
             border: 1px solid #C7C4C4 !important; /* --gray-200 */
             border-radius: 2px !important;
             border-radius: 4px !important;
             padding: 5px 10px !important;
             padding: 6px 12px !important;
             font-family: inherit !important;
             font-family: inherit !important;
             font-size: 0.8125em !important;
             font-size: 0.85em !important;
             font-weight: bold !important;
             font-weight: bold !important;
             cursor: pointer !important;
             cursor: pointer !important;
            transition: background-color 100ms !important;
         ">Abilities</button>
         ">Abilities</button>
        <button class="tab-button" data-tab="tab-strategy" style="
            background-color: #f8f9fa !important;
            color: #202122 !important;
            border: 1px solid #a2a9b1 !important;
            border-radius: 2px !important;
            padding: 5px 10px !important;
            font-family: inherit !important;
            font-size: 0.8125em !important;
            font-weight: bold !important;
            cursor: pointer !important;
            transition: background-color 100ms !important;
        ">Strategy</button>
        <button class="tab-button" data-tab="tab-lore" style="
            background-color: #f8f9fa !important;
            color: #202122 !important;
            border: 1px solid #a2a9b1 !important;
            border-radius: 2px !important;
            padding: 5px 10px !important;
            font-family: inherit !important;
            font-size: 0.8125em !important;
            font-weight: bold !important;
            cursor: pointer !important;
            transition: background-color 100ms !important;
        ">Lore</button>
     </div>
     </div>
     }}
     }}
      
      
</div>
</div>
<style>
/* Additional styles for hover effects */
.character-tabs .tab-button:hover {
    background-color: #ffffff !important;
    border-color: #72777d !important;
}
.character-tabs .tab-button.active:hover {
    background-color: #447ff5 !important;
    border-color: #447ff5 !important;
    color: #fff !important;
}
</style>
</includeonly>
</includeonly>
<noinclude>
<noinclude>
{{Documentation}}
{{Documentation}}
</noinclude>
</noinclude>

Revision as of 08:36, 15 December 2025


Documentation icon Template documentation
Note: parts of or the entire template might not be visible without values provided.

Description

This template is used to display key statistics and identifying details for all characters in ManaBreak using the standard infobox styling.

Usage

Place this code at the very top of the character's page. Any parameter left blank or omitted will not display in the final infobox.

Syntax

{{Infobox Character
| name          = (Character's full name)
| nickname      = (Commonly used nickname, for example Seb)
| image         = (Filename of the character portrait)
| age           = (Approximate age)
| race          = (Racial classification)
| element       = (Elemental Information)
| occupation    = (Main job title)
| weapon        = (Primary weapon type)
| guild_status  = (Guild Information)
| romance       = (Romance availability)
| residency     = (Living Space, Location Info)
| birthday      = (In-game birthday)
}}

Example

The following code produces the infobox on the Sebastian page:

{{Infobox Character
| name          = Sebastian
| nickname      = Seb
| image         = Sebastian_Portrait.png
| age           = ~28
| race          = Mortal
| element       = Wind
| occupation    = Thief, Adventurer
| weapon        = Dagger
| guild_status  = Adventurer
| romance       = N / A
| residency     = Healer's Spare Room (Adventure District)
| birthday      = Summer 15
}}

</noinclude>