Template:Infobox character: Difference between revisions

From The Unofficial Isekai:Slow Life Wiki
Jump to navigation Jump to search
VisualWikitext
No edit summary
No edit summary
 
(97 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div class="infobox-wrapper">
<div class="container">
<div class="toc-container">__TOC__</div>
<div class="infobox-wrapper box-style">
   <div class="content">
   <div class="content">
     <!-- Bio Introduction and List of Contents go here -->
     <div class="bio-info">
      <h2>Bio - Information</h2>
      {{{bio|<p>Character Description Here</p>}}}
    </div>
    <div class="blessings top-dot">
      <h2>{{{blessings|}}} Blessings</h2>
      <div style="display: flex; flex-wrap: wrap; justify-content: center">
        <div style="margin: 0 10px">
          [[File:{{{blessing 1|Empty Blessing}}}_1r.png|center|80x80px|link={{{blessing 1|}}}]]{{#if: {{{blessing 1|}}}|[[{{{blessing 1|}}}]]|}}
        </div>
        <div style="margin: 0 10px">
          [[File:{{{blessing 2|Empty Blessing}}}_1r.png|center|80x80px|link={{{blessing 2|}}}]]{{#if: {{{blessing 2|}}}|[[{{{blessing 2|}}}]]|}}
        </div>
        <div style="margin: 0 10px">
          [[File:{{{blessing 3|Empty Blessing}}}_1r.png|center|80x80px|link={{{blessing 3|}}}]]{{#if: {{{blessing 3|}}}|[[{{{blessing 3|}}}]]|}}
        </div>
        <div style="margin: 0 10px">
          [[File:{{{blessing 4|Empty Blessing}}}_1r.png|center|80x80px|link={{{blessing 4|}}}]]{{#if: {{{blessing 4|}}}|[[{{{blessing 4|}}}]]|}}
        </div>
      </div>
    </div>
   </div>
   </div>
   <div class="infobox">
   <div>
     <div class="name-box">
     <div class="char-info">
       <h2 style="text-align: center;">{{{name|}}}</h2>
       <h2>{{{name|Name}}}</h2>
 
      <div class="charWithType">
        [[File:{{{name|}}}_1r.png|center|150x150px|link={{{name|}}}]]
        {{#if: {{{type|}}}|[[File:{{{type|}}}.png|center|40x40px|class=type|link={{{name|}}}]]|}}
        {{#if: {{{rarity|}}}|[[File:{{{rarity|}}}.png|center|40x40px|class=rarity|link={{{name|}}}]]|}}
      </div>
 
      <p>
        <hr />
        <u>'''Title:'''</u><br />{{{title|}}}<hr />
        <u>'''Race:'''</u><br />{{{race|}}}<hr />
        {{#if: {{{occupation|}}}|<u>'''Occupation:'''</u><br />{{{occupation|}}}<hr />|}}
      </p>
     </div>
     </div>
 
    '''Age:''' {{{age|}}}<br/>
    '''Gender:''' {{{gender|}}}<br/>
    '''Species:''' {{{species|}}}<br/>
    '''Residence:''' {{{residence|}}}<br/>
    '''Relatives:''' {{{relatives|}}}<br/>
    '''Status:''' {{{status|}}}<br/>
 
    '''Game Stats:''' {{{gamestats|}}}
    '''Bio Info:''' {{{bioinfo|}}}
   </div>
   </div>
</div>
</div>
<div class="categories">
  {{#if: {{{gamestats|}}} | [[Category:Pages with Game Stats]] }}
  {{#if: {{{bioinfo|}}} | [[Category:Pages with Bio Info]] }}
</div>
</div>
In this modified template:
<noinclude>
 
<templatedata>
The infobox-wrapper class is used to create a container for both the content and the infobox.
{
 
"params": {
The content class represents the left side of the screen, where you can place your Bio Introduction and List of Contents.
"bio": {
 
"label": "Bio",
The infobox class contains the infobox content, including the centered "Name" section and the other fields.
"description": "The bio for this character.",
 
"type": "string",
With this structure, the infobox will appear on the right side of the screen, and the left side will remain open for your bio introduction and list of contents. You can adjust the width and positioning of the infobox and content areas by using CSS. Here's a basic example of how you might use CSS to position the infobox on the right:
"required": true
 
},
css
"blessings": {
Copy code
"label": "Blessing (Optional)",
/* Style the infobox wrapper */
"description": "Word which shows before the \"Blessings\" text below the bio.",
.infobox-wrapper {
"example": "Family/Fellow",
  display: flex;
"type": "string",
  justify-content: flex-end; /* Position infobox to the right */
"suggestedvalues": [
  align-items: flex-start;
"Family",
}
"Fellow"
 
]
/* Style the content on the left */
},
.content {
"blessing 1": {
  flex: 1; /* Takes up remaining space on the left */
"label": "Blessing 1 (Optional)",
  padding: 10px; /* Add padding as needed */
"description": "The first blessings character name.",
}
"example": "Sadako",
 
"type": "string"
/* Style the infobox on the right */
},
.infobox {
"blessing 2": {
  width: 300px; /* Adjust the width as needed */
"label": "Blessing 2 (Optional)",
  padding: 10px; /* Add padding as needed */
"description": "The second blessings character name.",
}
"example": "Lina",
 
"type": "string"
/* Style the name-box (centered "Name" section) */
},
.name-box {
"blessing 3": {
  text-align: center;
"label": "Blessing 3 (Optional)",
"description": "The third blessings character name.",
"type": "string"
},
"blessing 4": {
"label": "Blessing 4 (Optional)",
"description": "The fourth blessings character name.",
"type": "string"
},
"name": {
"label": "Name",
"description": "The name of the character, this is used in the label / image url.",
"example": "Jewlry",
"type": "string",
"required": true
},
"type": {
"label": "Type (Optional) [Fellows Only]",
"description": "The characters type.",
"example": "Diligent",
"type": "string",
"suggestedvalues": [
"Diligent",
"Informed",
"Inspiring",
"Brave",
"Unfettered"
]
},
"rarity": {
"label": "Rarity",
"description": "The characters rarity.",
"example": "UR/SSR/SR/R/N",
"type": "string",
"suggestedvalues": [
"UR",
"SSR",
"SR",
"R",
"N"
],
"required": true
},
"title": {
"label": "Title",
"description": "The characters title.",
"type": "string",
"required": true
},
"race": {
"label": "Race",
"description": "The characters race.",
"type": "string",
"required": true
},
"occupation": {
"label": "Occupation (Optional) [Fellows Only]",
"description": "The characters occupation.",
"type": "string"
}
},
"description": "Info box for characters",
"paramOrder": [
"name",
"title",
"race",
"occupation",
"bio",
"type",
"rarity",
"blessings",
"blessing 1",
"blessing 2",
"blessing 3",
"blessing 4"
]
}
}
These CSS rules create a flexible layout where the infobox is positioned to the right, leaving the left side open for your content. Adjust the width and padding values to suit your design preferences.
</templatedata>
</noinclude>

Latest revision as of 16:17, 14 October 2023

Bio - Information

Character Description Here

Blessings

Name

File:1r.png


Title:
Race:

Info box for characters

[Edit template data]

Template parameters

ParameterDescriptionTypeStatus
Namename

The name of the character, this is used in the label / image url.

Example
Jewlry
Stringrequired
Titletitle

The characters title.

Stringrequired
Racerace

The characters race.

Stringrequired
Occupation (Optional) [Fellows Only]occupation

The characters occupation.

Stringoptional
Biobio

The bio for this character.

Stringrequired
Type (Optional) [Fellows Only]type

The characters type.

Suggested values
Diligent Informed Inspiring Brave Unfettered
Example
Diligent
Stringoptional
Rarityrarity

The characters rarity.

Suggested values
UR SSR SR R N
Example
UR/SSR/SR/R/N
Stringrequired
Blessing (Optional)blessings

Word which shows before the "Blessings" text below the bio.

Suggested values
Family Fellow
Example
Family/Fellow
Stringoptional
Blessing 1 (Optional)blessing 1

The first blessings character name.

Example
Sadako
Stringoptional
Blessing 2 (Optional)blessing 2

The second blessings character name.

Example
Lina
Stringoptional
Blessing 3 (Optional)blessing 3

The third blessings character name.

Stringoptional
Blessing 4 (Optional)blessing 4

The fourth blessings character name.

Stringoptional
Retrieved from "https://isekai.wiki/index.php?title=Template:Infobox_character&oldid=744"