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
 
(4 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 1 ===
=== Example 1 ===


Old version
{| class="infobox custom-table"
 
{| 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);"
|-
|-
! 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="border-right:1px solid #555;" | Class
| style="background:#ffffff;" | Acolyte
| Acolyte
|-
|-
| style="background:#e6e3f0; font-weight:bold;" | Role
| style="border-right:1px solid #555;" | Role
| style="background:#ffffff;" | Support
| Support
|}
|}


Line 44: Line 41:
This one is much more appropriate, and feels a lot easier to use. Will be for classes only.
This one is much more appropriate, and feels a lot easier to use. Will be for classes only.
  <nowiki>
  <nowiki>
{| class="infobox" style="float:right; 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;" |
'''Class Overview'''<br />
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| style="background:#ffffff;" | {{{Role}}}
|-
| style="background:#e6e3f0; font-weight:bold;" | Primary Stats
| style="background:#ffffff;" | {{{Stats}}}
|-
| style="background:#e6e3f0; font-weight:bold;" | Weapons
| style="background:#ffffff;" | {{{Weapons}}}
|}
</nowiki>
 
==Fun Class Template Idea==
 
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;"
|-
| 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 />
'''{{{Class}}}'''
|-
| 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%;">
 
<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'''
|-
|-
| style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
! colspan="2" |
{| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
'''Class Overview'''<br />
|-
|-
| 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;" | Weapons
| style="padding:6px;" | {{{Weapons}}}
| {{{Weapons}}}
|}
|}
|}
</nowiki>
</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;"
== Fun Class Template Idea ==
|-
! 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'''
|-
| style="padding:12px; text-align:center; font-size:100%;" |
 
{| class="wikitable" style="width:100%; text-align:center; border:1px solid #ccc; border-collapse:collapse;"
|-
! style="width:16%;" | {{{Skill1}}}
! style="width:16%;" | {{{Skill2}}}
! style="width:16%;" | {{{Skill3}}}
! style="width:16%;" | {{{Skill4}}}
! style="width:16%;" | {{{Skill5}}}
! style="width:16%;" | {{{Skill6}}}
|-
| {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br>{{{SkillDescription1}}}
| {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br>{{{SkillDescription2}}}
| {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br>{{{SkillDescription3}}}
| {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br>{{{SkillDescription4}}}
| {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br>{{{SkillDescription5}}}
| {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br>{{{SkillDescription6}}}
|-
! style="width:16%;" | {{{Skill7}}}
! style="width:16%;" | {{{Skill8}}}
! style="width:16%;" | {{{Skill9}}}
! style="width:16%;" | {{{Skill10}}}
! style="width:16%;" | {{{Skill11}}}
! style="width:16%;" | {{{Skill12}}}
|-
| {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br>{{{SkillDescription7}}}
| {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br>{{{SkillDescription8}}}
| {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br>{{{SkillDescription9}}}
| {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br>{{{SkillDescription10}}}
| {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br>{{{SkillDescription11}}}
| {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br>{{{SkillDescription12}}}
|-
! style="width:16%;" | {{{Skill13}}}
! style="width:16%;" | {{{Skill14}}}
! style="width:16%;" | {{{Skill15}}}
! style="width:16%;" | {{{Skill16}}}
! style="width:16%;" | {{{Skill17}}}
! style="width:16%;" | {{{Skill18}}}
|-
| {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br>{{{SkillDescription13}}}
| {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br>{{{SkillDescription14}}}
| {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br>{{{SkillDescription15}}}
| {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br>{{{SkillDescription16}}}
| {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br>{{{SkillDescription17}}}
| {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br>{{{SkillDescription18}}}
|-
! style="width:16%;" | {{{Skill19}}}
! style="width:16%;" | {{{Skill20}}}
! style="width:16%;" | {{{Skill21}}}
! style="width:16%;" | {{{Skill22}}}
! style="width:16%;" | {{{Skill23}}}
! style="width:16%;" | {{{Skill24}}}
|-
| {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br>{{{SkillDescription19}}}
| {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br>{{{SkillDescription20}}}
| {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br>{{{SkillDescription21}}}
| {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br>{{{SkillDescription22}}}
| {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br>{{{SkillDescription23}}}
| {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br>{{{SkillDescription24}}}
|}
|}


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


{| 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);"
{| class="infobox custom-table"
|-
|-
! 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'''
[[File:SpiritValeLogo.png|100px]]<br />
'''{{{Class}}}'''
|-
|-
|
| {{{ClassDescription}}}
 
<div style="display:flex; justify-content:space-between; gap:20px; padding:12px; font-size:100%;">


{| 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;" |
! | '''Class Information'''
'''{{{AdvancedClass1}}}'''<br />
[[File:{{{AdvancedClassImage1}}}|100px]]
|-
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
|  
| style="background:#ffffff;" | {{{AdvancedClassRole1}}}
{| class="infobox custom-table"
|-
|-
| style="background:#e6e3f0; font-weight:bold;" | Description
! colspan="2" | '''Class Information'''
| style="background:#ffffff;" | {{{AdvancedClassDescription1}}}
|}
 
 
 
{| 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;" | Role
'''{{{AdvancedClass2}}}'''<br />
| {{{Role}}}
[[File:{{{AdvancedClassImage2}}}|100px]]
|-
|-
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
| style="border-right:1px solid #555;" | Primary Stats
| style="background:#ffffff;" | {{{AdvancedClassRole2}}}
| {{{Stats}}}
|-
|-
| style="background:#e6e3f0; font-weight:bold;" | Description
| style="border-right:1px solid #555;" | Weapon Type(s)
| style="background:#ffffff;" | {{{AdvancedClassDescription2}}}
| {{{Weapons}}}
|}
|}


</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;" |
! | '''Skills'''
'''Advice & Guides'''
|-
|-
| style="padding:12px; line-height:1.6;" |
|  
 
{| class="infobox custom-table" style="width:100%; text-align:center;"
|}
|}
 
===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="width:16%;" | {{{Skill1}}}
[[File:SpiritValeLogo.png|100px]]<br />
| style="width:16%;" | {{{Skill2}}}
'''Class Template'''
| style="width:16%;" | {{{Skill3}}}
| style="width:16%;" | {{{Skill4}}}
| style="width:16%;" | {{{Skill5}}}
| style="width:16%;" | {{{Skill6}}}
|-
|-
| style="padding:15px; line-height:1.6; font-size:100%;" |
| {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br />{{{SkillDescription1}}}
 
| {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br />{{{SkillDescription2}}}
<div style="display:flex; gap:20px; align-items:flex-start; margin-top:20px; font-size:100%;">
| {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br />{{{SkillDescription3}}}
 
| {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br />{{{SkillDescription4}}}
<div style="flex:2; line-height:1.6;">
| {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br />{{{SkillDescription5}}}
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 />
| {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br />{{{SkillDescription6}}}
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;" |
| style="width:16%;" | {{{Skill7}}}
'''Class Information'''
| style="width:16%;" | {{{Skill8}}}
| style="width:16%;" | {{{Skill9}}}
| style="width:16%;" | {{{Skill10}}}
| style="width:16%;" | {{{Skill11}}}
| style="width:16%;" | {{{Skill12}}}
|-
|-
| style="padding:12px; text-align:left; line-height:1.7; font-size:100%;" |
| {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br />{{{SkillDescription7}}}
{| class="infobox" style="width:100%; font-size:100%; border:1px solid #ccc; background:#ffffff; border-radius:10px; padding:6px;"
| {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br />{{{SkillDescription8}}}
| {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br />{{{SkillDescription9}}}
| {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br />{{{SkillDescription10}}}
| {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br />{{{SkillDescription11}}}
| {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br />{{{SkillDescription12}}}
|-
|-
| style="padding:6px; font-weight:bold;" | Role
| style="width:16%;" | {{{Skill13}}}
| style="padding:6px;" | [Role Placeholder]
| style="width:16%;" | {{{Skill14}}}
| style="width:16%;" | {{{Skill15}}}
| style="width:16%;" | {{{Skill16}}}
| style="width:16%;" | {{{Skill17}}}
| style="width:16%;" | {{{Skill18}}}
|-
|-
| style="padding:6px; font-weight:bold;" | Primary Stats
| {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br />{{{SkillDescription13}}}
| style="padding:6px;" | [Stat Placeholder]
| {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br />{{{SkillDescription14}}}
| {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br />{{{SkillDescription15}}}
| {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br />{{{SkillDescription16}}}
| {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br />{{{SkillDescription17}}}
| {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br />{{{SkillDescription18}}}
|-
|-
| style="padding:6px; font-weight:bold;" | Weapon Type(s)
| style="width:16%;" | {{{Skill19}}}
| style="padding:6px;" | [Weapon Placeholder]
| style="width:16%;" | {{{Skill20}}}
|}
| style="width:16%;" | {{{Skill21}}}
|}
| style="width:16%;" | {{{Skill22}}}
</div>
| style="width:16%;" | {{{Skill23}}}
</div>
| style="width:16%;" | {{{Skill24}}}
 
{| 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'''
|-
| style="padding:12px; text-align:center; font-size:100%;" |
 
{| class="wikitable" style="width:100%; text-align:center; border:1px solid #ccc; border-collapse:collapse;"
|-
! style="width:16%;" | Skill 1
! style="width:16%;" | Skill 2
! 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]
| {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br />{{{SkillDescription19}}}
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br />{{{SkillDescription20}}}
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br />{{{SkillDescription21}}}
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br />{{{SkillDescription22}}}
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br />{{{SkillDescription23}}}
| [[File:SpiritValeLogo.png|50px]]<br>Lvl: [X]<br>[Skill description placeholder]
| {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br />{{{SkillDescription24}}}
|-
! 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);"
|-
|-
! 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]]
|-
  |-
! 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;" | Role
'''[Advanced Class 1]'''<br />
  | {{{AdvancedClassRole1}}}
[[File:SpiritValeLogo.png|100px]]
  |-
|-
  | style="border-right:1px solid #555;" | Description
| style="background:#e6e3f0; font-weight:bold; width:35%;" | Role
  | {{{AdvancedClassDescription1}}}
| style="background:#ffffff;" | [Short descriptor]
  |}
|-
  </div>
| style="background:#e6e3f0; font-weight:bold;" | Description
  <div style="flex:1;">
| 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 custom-table"
|}
  |-
 
  ! colspan="2" | '''{{{AdvancedClass2}}}'''<br />[[File:{{{AdvancedClassImage2}}}|100px]]
 
  |-
 
  | style="border-right:1px solid #555;" | Role
{| 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;"
  | {{{AdvancedClassRole2}}}
|-
  |-
! 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;" | Description
'''[Advanced Class 2]'''<br />
  | {{{AdvancedClassDescription2}}}
[[File:SpiritValeLogo.png|100px]]
  |}
|-
  </div>
| 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>
</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'''
'''Advice & Guides'''
|-
|-
| style="padding:12px; line-height:1.6;" |
| {{{Advice|}}}
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.
|}
|}
|}


==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 -->
{{#if:{{{A1|}}}|
<div style="padding:0; display:flex; flex-direction:column;">
|-
 
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A1}}}
<!-- Row 1 -->
| {{{B1}}}
{{#if: {{{A1|}}} |  
<div style="display:flex; align-items:center; flex-wrap:nowrap;">
<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>
<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>