Toggle search
Toggle menu
115
248
25
2.7K
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 editNewer edit →
VisualWikitext
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
== Generic Infobox ==
== Universal Popups v2 — Testbed ==


Used as a base template for other boxes. Rows must be manually added or removed.
<div class="sv-card" style="padding:16px; margin:16px 0;">
  <div style="display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;">


{| class="infobox custom-table"
    <!-- NOTES / INFO (small hover) -->
|-
    <div>
! colspan="2" |
      <div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Notes</div>
'''{{{name|Example Infobox}}}'''<br />
{{#if:{{{image|}}}|[[File:{{{image}}}|100px]]}}
|-
| style="border-right:1px solid #555;" | {{{row1_label|}}}
| {{{row1_value|}}}
|-
| style="border-right:1px solid #555;" | {{{row2_label|}}}
| {{{row2_value|}}}
|-
| style="border-right:1px solid #555;" | {{{row3_label|}}}
| {{{row3_value|}}}
|}


=== Example 1 ===
      <div class="sv-tip">
        <span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0"
          data-sv-toggle="1"
          aria-label="Info"
          aria-controls="sv-test-notes"
          aria-expanded="false">
          <span class="sv-ico sv-ico--info" aria-hidden="true">i</span>
        </span>


{| class="infobox custom-table"
        <div class="sv-tip-pop sv-hidden" id="sv-test-notes" role="dialog" aria-label="Info">
|-
          <div class="sv-tip-pop-head">
! colspan="2" |
            <div class="sv-tip-pop-title">Info</div>
'''Player'''<br />
            <div class="sv-tip-pop-hint">Click to close</div>
[[File:SpiritValeLogo.png|100px]]<br />
          </div>
|-
          <div class="sv-tip-pop-body">
| style="border-right:1px solid #555;" | Character
            * Hand-crafted reference page for the Skill pipeline (wikiupdate will emulate this structure).
| Eviand
          </div>
|-
        </div>
| style="border-right:1px solid #555;" | Class
      </div>
| Acolyte
    </div>
|-
| style="border-right:1px solid #555;" | Role
| Support
|}


=== Example 2 ===
    <!-- USERS / REQUIREMENTS (large click) -->
    <div>
      <div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Users</div>


This one is much more appropriate, and feels a lot easier to use. Will be for classes only.
      <div class="sv-disclose">
<nowiki>
        <span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0"
{| class="infobox custom-table"
          data-sv-toggle="1"
|-
          aria-label="Users"
! colspan="2" |
          aria-controls="sv-test-users"
'''Class Overview'''<br />
          aria-expanded="false">
|-
          <span class="sv-disclose-label">Users</span>
| style="border-right:1px solid #555;" | Role
          <span class="sv-disclose-count">(6)</span>
| {{{Role}}}
        </span>
|-
| style="border-right:1px solid #555;" | Primary Stats
| {{{Stats}}}
|-
| style="border-right:1px solid #555;" | Weapons
| {{{Weapons}}}
|}
</nowiki>


== Fun Class Template Idea ==
        <div class="sv-disclose-pop sv-hidden" id="sv-test-users" role="dialog" aria-label="Users">
          <div class="sv-disclose-pop-head">
            <div class="sv-disclose-pop-title">Users</div>
            <div class="sv-disclose-pop-hint">Click to close</div>
          </div>


Had fun creating this for testing, but will instead use a simpler template.
          <ul class="sv-disclose-list">
            <li class="sv-disclose-group-title">Classes</li>
            <li>Paladin</li>
            <li>Cleric</li>
            <li>Templar</li>


{| class="infobox custom-table"
            <li class="sv-disclose-group-title">Summons</li>
|-
            <li>Turtle Champion</li>
! |
            <li>Celestial Squire</li>
[[File:SpiritValeLogo.png|100px]]<br />
            <li>Holy Sentinel</li>
'''{{{Class}}}'''
          </ul>
|-
        </div>
| {{{ClassDescription}}}
      </div>
    </div>


|-
    <!-- DEFINITIONS (small hover, no link) -->
! | '''Class Information'''
    <div>
|-
      <div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Definition (no link)</div>
|
      <span class="sv-def"
{| class="infobox custom-table"
        data-sv-def-tip="This is a hover-only definition tooltip.\nIt uses the Popup B shell."
|-
        >Ground Cast (no link)</span>
! colspan="2" | '''Class Information'''
    </div>
|-
 
| style="border-right:1px solid #555;" | Role
    <!-- DEFINITIONS (large click, with link) -->
| {{{Role}}}
    <div>
|-
      <div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Definition (with link)</div>
| style="border-right:1px solid #555;" | Primary Stats
      <span class="sv-def"
| {{{Stats}}}
        data-sv-def-tip="This definition is click-open so the user can interact inside the popup."
|-
        data-sv-def-link="Casting"
| style="border-right:1px solid #555;" | Weapon Type(s)
        >Casting (with link)</span>
| {{{Weapons}}}
    </div>
|}


|-
! | '''Skills'''
|-
|
{| class="infobox custom-table" style="width:100%; text-align:center;"
|-
| 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}}}
|}
|-
! | '''Advanced Classes'''
|-
|
<div style="display:flex; gap:20px;">
  <div style="flex:1;">
  {| class="infobox custom-table"
  |-
  ! 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>
</div>
</div>
|-
! | '''Advice & Guides'''
|-
| {{{Advice|}}}
|}
== 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 custom-table" style="float:{{{float|right}}}; width:100%; max-width:260px; font-size:95%;"
|-
! colspan="2" |
'''{{{BoxName}}}'''
{{#if:{{{A1|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A1}}}
| {{{B1}}}
}}
{{#if:{{{A2|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A2}}}
| {{{B2}}}
}}
{{#if:{{{A3|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A3}}}
| {{{B3}}}
}}
{{#if:{{{A4|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A4}}}
| {{{B4}}}
}}
{{#if:{{{A5|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A5}}}
| {{{B5}}}
}}
{{#if:{{{A6|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A6}}}
| {{{B6}}}
}}
{{#if:{{{A7|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A7}}}
| {{{B7}}}
}}
|}

Revision as of 18:34, 26 February 2026

Universal Popups v2 — Testbed

Small (Hover) — Notes
Large (Click) — Users
       
         Users
         (6)
Small (Hover) — Definition (no link)
     Ground Cast (no link)
Large (Click) — Definition (with link)
     Casting (with link)
Retrieved from "https://spiritvale.info/wiki/index.php?title=User:Eviand/TemplateTesting&oldid=2558"
Last modified
This page was last edited on 26 February 2026, at 18:34.