Toggle search
Toggle menu
58
161
6
1.3K
SpiritVale Wiki
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
More actions
← Older edit
VisualWikitext
 
(9 intermediate revisions by the same user not shown)
Line 3: Line 3:
Used as a base template for other boxes. Rows must be manually added or removed.
Used as a base template for other boxes. Rows must be manually added or removed.


{| class="infobox" style="width:275px; font-size:90%; border:2px solid #372b54; background:#f7f7fa; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.25);"
{| class="infobox custom-table"
|-
|-
! colspan="2" style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! colspan="2" |
'''{{{name|Example Infobox}}}'''<br />
'''{{{name|Example Infobox}}}'''<br />
{{#if:{{{image|}}}|[[File:{{{image}}}|100px]]}}
{{#if:{{{image|}}}|[[File:{{{image}}}|100px]]}}
|-
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | {{{row1_label|}}}
| style="border-right:1px solid #555;" | {{{row1_label|}}}
| style="background:#ffffff;" | {{{row1_value|}}}
| {{{row1_value|}}}
|-
|-
| style="background:#e6e3f0; font-weight:bold;" | {{{row2_label|}}}
| style="border-right:1px solid #555;" | {{{row2_label|}}}
| style="background:#ffffff;" | {{{row2_value|}}}
| {{{row2_value|}}}
|-
|-
| style="background:#e6e3f0; font-weight:bold;" | {{{row3_label|}}}
| style="border-right:1px solid #555;" | {{{row3_label|}}}
| style="background:#ffffff;" | {{{row3_value|}}}
| {{{row3_value|}}}
|}
|}


=== Example ===
=== Example 1 ===


{| class="infobox" style="width:275px; font-size:90%; border:2px solid #372b54; background:#f7f7fa; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.25);"
{| class="infobox custom-table"
|-
|-
! colspan="2" style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:6px; font-size:110%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! colspan="2" |
'''Player'''<br />
'''Player'''<br />
[[File:SpiritValeLogo.png|100px]]<br />
[[File:SpiritValeLogo.png|100px]]<br />
|-
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Character
| style="border-right:1px solid #555;" | Character
| style="background:#ffffff;" | Eviand
| Eviand
|-
| style="background:#e6e3f0; font-weight:bold;" | Class
| style="background:#ffffff;" | Acolyte
|-
| style="background:#e6e3f0; font-weight:bold;" | Role
| style="background:#ffffff;" | Support
|}
 
== Main Page Box ==
 
Used on the main page for holding content.
 
{| class="infobox" style="width:250px; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px;"
|-
! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
'''{{{title|Main Page Box}}}'''
|-
| style="padding:8px; text-align:center; line-height:1.4;" |
{{{content|''No content provided.''}}}
|}
 
=== Example ===
 
{| class="infobox" style="width:250px; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px;"
|-
! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
'''Game Systems'''
|-
|-
| style="padding:8px; text-align:center; line-height:1.4;" |
| style="border-right:1px solid #555;" | Class
[[File:Icon1.png|20px]] [[Refinement]]<br />
| Acolyte
[[File:Icon2.png|20px]] [[Card]]<br />
[[File:Icon3.png|20px]] [[Storage]]<br />
[[File:Icon4.png|20px]] [[NPC]]
|}
 
<br>
 
<div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
 
<!-- Box 1 -->
<div style="flex:0 0 23%; margin:1%;">
{| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
|-
|-
! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| style="border-right:1px solid #555;" | Role
'''Main Box 1'''
| Support
|-
| style="padding:8px; text-align:center; line-height:1.4;" |
[[File:Icon1.png|20px]] [[Page 1]]<br />
[[File:Icon2.png|20px]] [[Page 2]]
|}
|}
</div>


<!-- Box 2 -->
=== Example 2 ===
<div style="flex:0 0 23%; margin:1%;">
{| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
|-
! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
'''Main Box 2'''
|-
| style="padding:8px; text-align:center; line-height:1.4;" |
[[File:Icon3.png|20px]] [[Page 3]]<br />
[[File:Icon4.png|20px]] [[Page 4]]
|}
</div>


<!-- Box 3 -->
This one is much more appropriate, and feels a lot easier to use. Will be for classes only.
<div style="flex:0 0 23%; margin:1%;">
<nowiki>
{| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
{| class="infobox custom-table"
|-
|-
! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
! colspan="2" |
'''Main Box 3'''
'''Class Overview'''<br />
|-
|-
| style="padding:8px; text-align:center; line-height:1.4;" |
| style="border-right:1px solid #555;" | Role
[[File:Icon5.png|20px]] [[Page 5]]<br />
| {{{Role}}}
[[File:Icon6.png|20px]] [[Page 6]]
|}
</div>
 
<!-- Box 4 -->
<div style="flex:0 0 23%; margin:1%;">
{| class="infobox" style="width:100%; font-size:95%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3);"
|-
|-
! style="background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:8px; font-size:120%; border-top-left-radius:12px; border-top-right-radius:12px;" |
| style="border-right:1px solid #555;" | Primary Stats
'''Main Box 4'''
| {{{Stats}}}
|-
|-
| style="padding:8px; text-align:center; line-height:1.4;" |
| style="border-right:1px solid #555;" | Weapons
[[File:Icon7.png|20px]] [[Page 7]]<br />
| {{{Weapons}}}
[[File:Icon8.png|20px]] [[Page 8]]
|}
|}
</div>
</nowiki>
 
</div>


==Fun Class Template Idea==
== Fun Class Template Idea ==


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


{| class="infobox" style="width:100%; font-size:100%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px 0;"
{| class="infobox custom-table"
|-
|-
| style="padding:20px; background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; border-top-left-radius:14px; border-top-right-radius:14px; text-align:center; font-size:200%;" |
! |
[[File:SpiritValeLogo.png|100px]]<br />
[[File:SpiritValeLogo.png|100px]]<br />
'''{{{Class}}}'''
'''{{{Class}}}'''
|-
|-
| style="padding:15px; line-height:1.6; font-size:100%;" |
| {{{ClassDescription}}}


<div style="display:flex; gap:20px; align-items:flex-start; margin-top:20px; font-size:100%;">
<div style="flex:2; line-height:1.6;">
{{{ClassDescription}}}
</div>
<div style="flex:1; align-self:flex-start;">
{| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
|-
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! | '''Class Information'''
'''Class Information'''
|-
|
{| class="infobox custom-table"
|-
|-
| style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
! colspan="2" | '''Class Information'''
{| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
|-
|-
| style="padding:6px; font-weight:bold;" | Role
| style="border-right:1px solid #555;" | Role
| style="padding:6px;" | {{{Role}}}
| {{{Role}}}
|-
|-
| style="padding:6px; font-weight:bold;" | Primary Stats
| style="border-right:1px solid #555;" | Primary Stats
| style="padding:6px;" | {{{Stats}}}
| {{{Stats}}}
|-
|-
| style="padding:6px; font-weight:bold;" | Weapon Type(s)
| style="border-right:1px solid #555;" | Weapon Type(s)
| style="padding:6px;" | {{{Weapons}}}
| {{{Weapons}}}
|}
|}
|}
</div>
</div>


{| style="width:100%; border:2px solid #5a4e7c; background:#eef0f6; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2); padding:0; margin-top:20px;"
|-
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! | '''Skills'''
'''Skills'''
|-
|-
| style="padding:12px; text-align:center; font-size:100%;" |
|  
 
{| class="infobox custom-table" style="width:100%; text-align:center;"
{| class="wikitable" style="width:100%; text-align:center; border:1px solid #ccc; border-collapse:collapse;"
|-
|-
! style="width:16%;" | {{{Skill1}}}
| style="width:16%;" | {{{Skill1}}}
! style="width:16%;" | {{{Skill2}}}
| style="width:16%;" | {{{Skill2}}}
! style="width:16%;" | {{{Skill3}}}
| style="width:16%;" | {{{Skill3}}}
! style="width:16%;" | {{{Skill4}}}
| style="width:16%;" | {{{Skill4}}}
! style="width:16%;" | {{{Skill5}}}
| style="width:16%;" | {{{Skill5}}}
! style="width:16%;" | {{{Skill6}}}
| style="width:16%;" | {{{Skill6}}}
|-
|-
| {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br>{{{SkillDescription1}}}
| {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br />{{{SkillDescription1}}}
| {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br>{{{SkillDescription2}}}
| {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br />{{{SkillDescription2}}}
| {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br>{{{SkillDescription3}}}
| {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br />{{{SkillDescription3}}}
| {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br>{{{SkillDescription4}}}
| {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br />{{{SkillDescription4}}}
| {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br>{{{SkillDescription5}}}
| {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br />{{{SkillDescription5}}}
| {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br>{{{SkillDescription6}}}
| {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br />{{{SkillDescription6}}}
|-
|-
! style="width:16%;" | {{{Skill7}}}
| style="width:16%;" | {{{Skill7}}}
! style="width:16%;" | {{{Skill8}}}
| style="width:16%;" | {{{Skill8}}}
! style="width:16%;" | {{{Skill9}}}
| style="width:16%;" | {{{Skill9}}}
! style="width:16%;" | {{{Skill10}}}
| style="width:16%;" | {{{Skill10}}}
! style="width:16%;" | {{{Skill11}}}
| style="width:16%;" | {{{Skill11}}}
! style="width:16%;" | {{{Skill12}}}
| style="width:16%;" | {{{Skill12}}}
|-
|-
| {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br>{{{SkillDescription7}}}
| {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br />{{{SkillDescription7}}}
| {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br>{{{SkillDescription8}}}
| {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br />{{{SkillDescription8}}}
| {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br>{{{SkillDescription9}}}
| {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br />{{{SkillDescription9}}}
| {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br>{{{SkillDescription10}}}
| {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br />{{{SkillDescription10}}}
| {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br>{{{SkillDescription11}}}
| {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br />{{{SkillDescription11}}}
| {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br>{{{SkillDescription12}}}
| {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br />{{{SkillDescription12}}}
|-
|-
! style="width:16%;" | {{{Skill13}}}
| style="width:16%;" | {{{Skill13}}}
! style="width:16%;" | {{{Skill14}}}
| style="width:16%;" | {{{Skill14}}}
! style="width:16%;" | {{{Skill15}}}
| style="width:16%;" | {{{Skill15}}}
! style="width:16%;" | {{{Skill16}}}
| style="width:16%;" | {{{Skill16}}}
! style="width:16%;" | {{{Skill17}}}
| style="width:16%;" | {{{Skill17}}}
! style="width:16%;" | {{{Skill18}}}
| style="width:16%;" | {{{Skill18}}}
|-
|-
| {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br>{{{SkillDescription13}}}
| {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br />{{{SkillDescription13}}}
| {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br>{{{SkillDescription14}}}
| {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br />{{{SkillDescription14}}}
| {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br>{{{SkillDescription15}}}
| {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br />{{{SkillDescription15}}}
| {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br>{{{SkillDescription16}}}
| {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br />{{{SkillDescription16}}}
| {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br>{{{SkillDescription17}}}
| {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br />{{{SkillDescription17}}}
| {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br>{{{SkillDescription18}}}
| {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br />{{{SkillDescription18}}}
|-
|-
! style="width:16%;" | {{{Skill19}}}
| style="width:16%;" | {{{Skill19}}}
! style="width:16%;" | {{{Skill20}}}
| style="width:16%;" | {{{Skill20}}}
! style="width:16%;" | {{{Skill21}}}
| style="width:16%;" | {{{Skill21}}}
! style="width:16%;" | {{{Skill22}}}
| style="width:16%;" | {{{Skill22}}}
! style="width:16%;" | {{{Skill23}}}
| style="width:16%;" | {{{Skill23}}}
! style="width:16%;" | {{{Skill24}}}
| style="width:16%;" | {{{Skill24}}}
|-
|-
| {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br>{{{SkillDescription19}}}
| {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br />{{{SkillDescription19}}}
| {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br>{{{SkillDescription20}}}
| {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br />{{{SkillDescription20}}}
| {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br>{{{SkillDescription21}}}
| {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br />{{{SkillDescription21}}}
| {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br>{{{SkillDescription22}}}
| {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br />{{{SkillDescription22}}}
| {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br>{{{SkillDescription23}}}
| {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br />{{{SkillDescription23}}}
| {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br>{{{SkillDescription24}}}
| {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br />{{{SkillDescription24}}}
|}
|}
|}
{| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
|-
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! | '''Advanced Classes'''
'''Advanced Classes'''
|-
|-
|
|  
 
<div style="display:flex; gap:20px;">
<div style="display:flex; justify-content:space-between; gap:20px; padding:12px; font-size:100%;">
  <div style="flex:1;">
 
  {| class="infobox custom-table"
{| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
  |-
  ! colspan="2" | '''{{{AdvancedClass1}}}'''<br />[[File:{{{AdvancedClassImage1}}}|100px]]
  |-
  | style="border-right:1px solid #555;" | Role
  | {{{AdvancedClassRole1}}}
  |-
  | style="border-right:1px solid #555;" | Description
  | {{{AdvancedClassDescription1}}}
  |}
  </div>
  <div style="flex:1;">
  {| class="infobox custom-table"
  |-
  ! colspan="2" | '''{{{AdvancedClass2}}}'''<br />[[File:{{{AdvancedClassImage2}}}|100px]]
  |-
  | style="border-right:1px solid #555;" | Role
  | {{{AdvancedClassRole2}}}
  |-
  | style="border-right:1px solid #555;" | Description
  | {{{AdvancedClassDescription2}}}
  |}
  </div>
</div>
|-
|-
! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! | '''Advice & Guides'''
'''{{{AdvancedClass1}}}'''<br />
[[File:{{{AdvancedClassImage1}}}|100px]]
|-
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| {{{Advice|}}}
| style="background:#ffffff;" | {{{AdvancedClassRole1}}}
|-
| style="background:#e6e3f0; font-weight:bold;" | Description
| style="background:#ffffff;" | {{{AdvancedClassDescription1}}}
|}
|}


== 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.


{| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
{| class="infobox custom-table" style="float:{{{float|right}}}; width:100%; max-width:260px; font-size:95%;"
|-
|-
! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
! colspan="2" |
'''{{{AdvancedClass2}}}'''<br />
'''{{{BoxName}}}'''
[[File:{{{AdvancedClassImage2}}}|100px]]
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| style="background:#ffffff;" | {{{AdvancedClassRole2}}}
|-
| style="background:#e6e3f0; font-weight:bold;" | Description
| style="background:#ffffff;" | {{{AdvancedClassDescription2}}}
|}


 
{{#if:{{{A1|}}}|
</div>
|}
 
 
{| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
|-
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A1}}}
'''Advice & Guides'''
| {{{B1}}}
|-
}}
| style="padding:12px; line-height:1.6;" |


|}
{{#if:{{{A2|}}}|
|}
 
===Example===
 
{| class="infobox" style="width:100%; font-size:100%; border:2px solid #372b54; background:#f7f7fa; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,0.3); margin:10px 0;"
|-
|-
| style="padding:20px; background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; border-top-left-radius:14px; border-top-right-radius:14px; text-align:center; font-size:200%;" |
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A2}}}
[[File:SpiritValeLogo.png|100px]]<br />
| {{{B2}}}
'''Class Template'''
}}
|-
| style="padding:15px; line-height:1.6; font-size:100%;" |


<div style="display:flex; gap:20px; align-items:flex-start; margin-top:20px; font-size:100%;">
{{#if:{{{A3|}}}|
 
<div style="flex:2; line-height:1.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div style="flex:1; align-self:flex-start;">
{| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
'''Class Information'''
|-
| style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
{| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
|-
| style="padding:6px; font-weight:bold;" | Role
| style="padding:6px;" | [Role Placeholder]
|-
| style="padding:6px; font-weight:bold;" | Primary Stats
| style="padding:6px;" | [Stat Placeholder]
|-
|-
| style="padding:6px; font-weight:bold;" | Weapon Type(s)
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A3}}}
| style="padding:6px;" | [Weapon Placeholder]
| {{{B3}}}
|}
}}
|}
</div>
</div>


{| style="width:100%; border:2px solid #5a4e7c; background:#eef0f6; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2); padding:0; margin-top:20px;"
{{#if:{{{A4|}}}|
|-
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A4}}}
'''Skills'''
| {{{B4}}}
|-
}}
| style="padding:12px; text-align:center; font-size:100%;" |


{| class="wikitable" style="width:100%; text-align:center; border:1px solid #ccc; border-collapse:collapse;"
{{#if:{{{A5|}}}|
|-
|-
! style="width:16%;" | Skill 1
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A5}}}
! style="width:16%;" | Skill 2
| {{{B5}}}
! style="width:16%;" | Skill 3
}}
! style="width:16%;" | Skill 4
! style="width:16%;" | Skill 5
! style="width:16%;" | Skill 6
|-
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
|-
! style="width:16%;" | Skill 7
! style="width:16%;" | Skill 8
! style="width:16%;" | Skill 9
! style="width:16%;" | Skill 10
! style="width:16%;" | Skill 11
! style="width:16%;" | Skill 12
|-
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
|-
! style="width:16%;" | Skill 13
! style="width:16%;" | Skill 14
! style="width:16%;" | Skill 15
! style="width:16%;" | Skill 16
! style="width:16%;" | Skill 17
! style="width:16%;" | Skill 18
|-
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
|-
! style="width:16%;" | Skill 19
! style="width:16%;" | Skill 20
! style="width:16%;" | Skill 21
! style="width:16%;" | Skill 22
! style="width:16%;" | Skill 23
! style="width:16%;" | Skill 24
|-
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
|}
|}
 
 


{| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
{{#if:{{{A6|}}}|
|-
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A6}}}
'''Advanced Classes'''
| {{{B6}}}
|-
}}
|


<div style="display:flex; justify-content:space-between; gap:20px; padding:12px; font-size:100%;">
{{#if:{{{A7|}}}|
 
 
{| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
|-
|-
! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A7}}}
'''[Advanced Class 1]'''<br />
| {{{B7}}}
[[File:SpiritValeLogo.png|100px]]
}}
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| style="background:#ffffff;" | [Short descriptor]
|-
| style="background:#e6e3f0; font-weight:bold;" | Description
| style="background:#ffffff;" | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|}
 
 
 
{| class="infobox" style="flex:1; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.25); padding:8px;"
|-
! colspan="2" style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
'''[Advanced Class 2]'''<br />
[[File:SpiritValeLogo.png|100px]]
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| style="background:#ffffff;" | [Short descriptor]
|-
| style="background:#e6e3f0; font-weight:bold;" | Description
| style="background:#ffffff;" | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|}
 
 
</div>
|}
 
 
{| class="infobox" style="width:100%; font-size:100%; border:2px solid #5a4e7c; background:#f0f2f8; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.2);"
|-
! style="background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:8px; font-size:125%; border-top-left-radius:10px; border-top-right-radius:10px;" |
'''Advice & Guides'''
|-
| style="padding:12px; line-height:1.6;" |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|}
|}
|}
Retrieved from "https://spiritvale.info/wiki/User:Eviand/TemplateTesting"