Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

User:Eviand/TemplateTesting: Difference between revisions

From SpiritVale Wiki
Line 187: Line 187:
|}
|}


==Template Box==
== Template Box ==


Had this super fun template idea, but I couldn't get it to work on mobile. Going to shelve it for now as it might be useful for later.
Had this super fun template idea, but I couldn't get it to work on mobile. Going to shelve it for now as it might be useful for later.


<!-- Compact Infobox Template with Shrinking Rows, Equal Height Columns, Word Wrapping, and Mobile-Safe Display -->
{| class="infobox custom-table" style="float:{{{float|right}}}; width:100%; max-width:260px; font-size:95%;"
 
|-
<div style="display:inline-block; width:100%; max-width:260px; margin:0 0 1em 1em; float:{{{float|right}}}; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2); font-size:95%; overflow:hidden; box-sizing:border-box;">
! colspan="2" |
 
<!-- Header Section -->
<div style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:4px 6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;">
'''{{{BoxName}}}'''
'''{{{BoxName}}}'''
</div>
<!-- Content Section -->
<div style="padding:0; display:flex; flex-direction:column;">


<!-- Row 1 -->
{{#if:{{{A1|}}}|
{{#if: {{{A1|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A1}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A1}}}</div>
| {{{B1}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B1}}}</div>
</div>
}}
}}


<!-- Row 2 -->
{{#if:{{{A2|}}}|
{{#if: {{{A2|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A2}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A2}}}</div>
| {{{B2}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B2}}}</div>
</div>
}}
}}


<!-- Row 3 -->
{{#if:{{{A3|}}}|
{{#if: {{{A3|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A3}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A3}}}</div>
| {{{B3}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B3}}}</div>
</div>
}}
}}


<!-- Row 4 -->
{{#if:{{{A4|}}}|
{{#if: {{{A4|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A4}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A4}}}</div>
| {{{B4}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B4}}}</div>
</div>
}}
}}


<!-- Row 5 -->
{{#if:{{{A5|}}}|
{{#if: {{{A5|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A5}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A5}}}</div>
| {{{B5}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B5}}}</div>
</div>
}}
}}


<!-- Row 6 -->
{{#if:{{{A6|}}}|
{{#if: {{{A6|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A6}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #f7f7f7;">{{{A6}}}</div>
| {{{B6}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal; border-bottom:1px solid #ccc;">{{{B6}}}</div>
</div>
}}
}}


<!-- Row 7 -->
{{#if:{{{A7|}}}|
{{#if: {{{A7|}}} |  
|-
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A7}}}
<div style="flex:0 0 {{{Col1Width|35%}}}; display:flex; align-items:center; background:#e6e3f0; font-weight:bold; padding:4px; word-break:break-word; white-space:normal;">{{{A7}}}</div>
| {{{B7}}}
<div style="flex:1; max-width:48ch; display:flex; align-items:center; background:#ffffff; padding:4px; word-break:break-word; white-space:normal;">{{{B7}}}</div>
</div>
}}
}}
 
|}
</div>
</div>

Revision as of 18:05, 20 September 2025

Generic Infobox

Used as a base template for other boxes. Rows must be manually added or removed.

Example Infobox

Example 1

Player

Character Eviand
Class Acolyte
Role Support

Example 2

This one is much more appropriate, and feels a lot easier to use. Will be for classes only.

{| class="infobox custom-table"
|-
! colspan="2" |
'''Class Overview'''<br />
|-
| style="border-right:1px solid #555;" | Role
| {{{Role}}}
|-
| style="border-right:1px solid #555;" | Primary Stats
| {{{Stats}}}
|-
| style="border-right:1px solid #555;" | Weapons
| {{{Weapons}}}
|}
 

Fun Class Template Idea

Had fun creating this for testing, but will instead use a simpler template.


{{{Class}}}

{{{ClassDescription}}}
Class Information
Class Information
Role {{{Role}}}
Primary Stats {{{Stats}}}
Weapon Type(s) {{{Weapons}}}
Skills
{{{Skill1}}} {{{Skill2}}} {{{Skill3}}} {{{Skill4}}} {{{Skill5}}} {{{Skill6}}}

{{{SkillDescription1}}}

{{{SkillDescription2}}}

{{{SkillDescription3}}}

{{{SkillDescription4}}}

{{{SkillDescription5}}}

{{{SkillDescription6}}}
{{{Skill7}}} {{{Skill8}}} {{{Skill9}}} {{{Skill10}}} {{{Skill11}}} {{{Skill12}}}

{{{SkillDescription7}}}

{{{SkillDescription8}}}

{{{SkillDescription9}}}

{{{SkillDescription10}}}

{{{SkillDescription11}}}

{{{SkillDescription12}}}
{{{Skill13}}} {{{Skill14}}} {{{Skill15}}} {{{Skill16}}} {{{Skill17}}} {{{Skill18}}}

{{{SkillDescription13}}}

{{{SkillDescription14}}}

{{{SkillDescription15}}}

{{{SkillDescription16}}}

{{{SkillDescription17}}}

{{{SkillDescription18}}}
{{{Skill19}}} {{{Skill20}}} {{{Skill21}}} {{{Skill22}}} {{{Skill23}}} {{{Skill24}}}

{{{SkillDescription19}}}

{{{SkillDescription20}}}

{{{SkillDescription21}}}

{{{SkillDescription22}}}

{{{SkillDescription23}}}

{{{SkillDescription24}}}
Advanced Classes
{{{AdvancedClass1}}}
[[File:{{{AdvancedClassImage1}}}|100px]]
Role {{{AdvancedClassRole1}}}
Description {{{AdvancedClassDescription1}}}
{{{AdvancedClass2}}}
[[File:{{{AdvancedClassImage2}}}|100px]]
Role {{{AdvancedClassRole2}}}
Description {{{AdvancedClassDescription2}}}
Advice & Guides

Template Box

Had this super fun template idea, but I couldn't get it to work on mobile. Going to shelve it for now as it might be useful for later.

{{{BoxName}}}

-

-

-

-

-

-

-