[2023-03-21] Wikia v3 (TH) (CC)

<!------------
  WIKIA V3 (TH) (CC) by dvdexe/watergems
  Do not remove this credit comment or claim code as yours.
  Feel free to edit/franken/use as a base as much as you'd like,
  just remember to credit when necessary.

  This code uses anchors/id attributes. For information on how
  they work, or if you're having trouble editing the code on
  your own, try consulting W3Schools:
  > https://www.w3schools.com/html/html_id.asp

  Color (Custom): #C6B100
  Links: <a href="/" style="color:#C6B100">Link</a>
  ------------>

<!----- INFOBOX START ----->
<div class="float-md-right ml-md-2 mb-2" style="min-width:20rem;max-width:23rem">
<div class="card bg-faded" style="border:1px solid #C6B100;border-radius:.25rem">
<!-- CHARACTER NAME -->
<h2 class="card-header card-inverse text-center text-white" style="background:#C6B100;border-radius:.15em .15em 0 0">Character Name</h2>

<!-- IMAGE TAB SECTION // Nav buttons -->
<ul class="nav flex-wrap d-flex justify-content-center px-1 mx-auto pt-1">
<li class="nav-item px-1"><a class="nav-link btn active text-white" style="background:#C6B100" data-toggle="tab"
  href="#img1">Image 1</a></li> <!-- IMAGE 1 (DEFAULT) (Don't copy this one) -->
<li class="nav-item px-1"><a class="nav-link btn text-white" style="background:#C6B100" data-toggle="tab"
  href="#img2">Image 2</a></li> <!-- IMAGE 2 -->
  <!-- TO ADD MORE: Copy the entire <li> line above and paste it BEFORE the </ul> tag below. -->
  <!-- Remember to change the 'href="#img2"' to #img3, #img4, etc. -->
</ul>
<!-- IMAGE TAB SECTION // Images -->
<div class="tab-content text-center p-2"><div class="tab-pane width-auto active show" id="img1">
  <img src="https://cdn.discordapp.com/attachments/488764911179137042/1087802360115499048/99F0807C-DFB2-4B17-929D-555EDFF96ECD.png" /> <!-- IMAGE 1 (DEFAULT) (Don't copy this one) -->
</div>
<div class="tab-pane width-auto" id="img2">
  <img src="https://cdn.discordapp.com/attachments/488764911179137042/1087802359721246850/3E1425E1-1905-4E2F-B046-FC2811C89A07.png" /> <!-- IMAGE 2 -->
</div>
  <!-- TO ADD MORE: Copy the entire <div> line above and paste it BEFORE the </div> tag below. -->
  <!-- Remember to change the 'id="img2"' to img3, img4, etc. AND change the direct image link. -->
</div>
<!-- END IMAGE TAB SECTION -->

<!-- IMPORTANT // If you want only ONE image in your infobox, DELETE the entire image tab section above, then delete ONLY the comment (green) tags from around the code block below. Change the direct image link as you wish.
  <img src="https://cdn.discordapp.com/attachments/488764911179137042/1087802360115499048/99F0807C-DFB2-4B17-929D-555EDFF96ECD.png" class="mx-auto pt-2 px-2" />
-->
<!-- FIELDS SECTION -->
<!----- SUBHEADING ONE ----->
<h5 class="text-white text-center py-2 mb-0 pl-4" style="background:#C6B100">Subheading 1</h5>
<div class="mt-2"> <div class="row mb-2">
  <!-- Standard field/data line: -->
  <div class="col-5 pl-4 font-weight-bold">Field 1</div>
  <div class="col-7 pr-4">Lorem ipsum</div>
  <!-- If you need to add a bulleted list to the infobox: -->
  <div class="col-5 pl-4 font-weight-bold">Field 2</div>
  <div class="col-7 pr-4">
  <ul class="px-3 mb-0">
    <li>List item 1</li>
    <li>List item 2</li>
    <!-- Add more list items before </ul> -->
  </ul>
  </div>
  <!-- End bulleted list -->
  <!-- If you don't need lists, just remove and copy+paste the standard field/data code. -->
  <div class="col-5 pl-4 font-weight-bold">Field 3</div>
  <div class="col-7 pr-4">Lorem ipsum</div>
</div></div>
<!----- SUBHEADING TWO: Collapsible section ----->
<!-- If you don't want collapsible sections, remove this whole section before the "END INFOBOX" and just copy+paste the "SUBHEADING ONE" section as needed. If you need more, copy+paste this section instead. -->
<h5 class="text-white text-center py-2 mb-0 pl-4" style="background:#C6B100">Subheading 2 <a href="#sh2" data-toggle="collapse"><i class="fa-lg mt-2 pr-2 fas fa-angle-down float-right text-white" /></a></h5>
<!-- If you have multiple collapsible sections, remember to change 'a href="#sh2"' above AND 'id="sh2"' below to sh3, sh4, etc. -->
<div class="collapse mt-2" id="sh2"> <div class="row mb-2">
<!-- If you want the section to be visible/open when the page is loaded, add "show" after "collapse" in the line above. -->
  <div class="col-5 pl-4 font-weight-bold">Field 1</div>
  <div class="col-7 pr-4">Lorem ipsum</div>
  <div class="col-5 pl-4 font-weight-bold">Field 2</div>
  <div class="col-7 pr-4">Lorem ipsum</div>
  <div class="col-5 pl-4 font-weight-bold">Field 3</div>
  <div class="col-7 pr-4">Lorem ipsum</div>
</div></div>
<!------ END INFOBOX ------>
</div></div>

<!------ QUOTE ------>
<div style="min-width:20rem;max-width:30rem">
<div class="card p-2 mb-2 bg-faded card-outline-default"><span class="text-center mb-2">
<i class="fa-lg fas fa-quote-left float-left mt-1" style="color:#C6B100" />
<i class="fa-lg fas fa-quote-right float-right mt-1" style="color:#C6B100" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span><div class="text-right text-muted">
  ― Source
</div></div></div>

<!------ INTRODUCTION ------>
<p><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit.</p>

<!------ TABLE OF CONTENTS // Credit to @Pinky for toggle base code ------>
<div class="card bg-faded card-outline-default p-2 mt-2 mb-5" style="width:15rem"><a id="toc"></a>
<h6 class="p-2 mb-0 d-flex justify-content-between"><span><i class="fa-solid fa-list pr-2" />Contents</span>
<small>[<a class="px-1" data-toggle="collapse" href="#tocshow2" style="color:#C6B100">toggle</a>]</small></h6>
<ol class="collapse p-2 pt-0 pl-4 rounded-bottom mb-0" id="tocshow2">
<!----- TOC LINKS ----->
  <li><a href="#appearance" style="color:#C6B100">Appearance</a></li>
  <li><a href="#personality" style="color:#C6B100">Personality</a></li>
  <li><a href="#history" style="color:#C6B100">History</a></li>
  <li><a href="#abilities" style="color:#C6B100">Abilities</a></li>
  <li><a href="#relationships" style="color:#C6B100">Relationships</a></li>
  <!-- If you have subsections that you want to link back to the TOC, copy+paste the entire <ol> section below underneath its parent section. -->
  <ol class="pl-3">
    <li><a href="#name1" style="color:#C6B100">Name 1</a></li>
    <li><a href="#name2" style="color:#C6B100">Name 2</a></li>
  </ol>
  <li><a href="#trivia" style="color:#C6B100">Trivia</a></li>
</ol></div>

<!------ APPEARANCE ------>
<div class="profile-fields-title mt-2"><a id="appearance" /><h2>Appearance <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h2></div><div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ PERSONALITY ------>
<div class="profile-fields-title mt-2"><a id="personality" /><h2>Personality <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h2></div><div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ HISTORY ------>
<div class="profile-fields-title mt-2"><a id="history" /><h2>History <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h2></div><div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>

<!------ ABILITIES ------>
<div class="profile-fields-title mt-2"><a id="abilities" /><h2>Abilities <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h2></div><div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
<h4 class="mb-1">Skillset</h4>
<ul class="pl-4" id="trivia1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
<h4 class="mb-1">Unique Abilities</h4>
<ul class="pl-4" id="trivia1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!------ RELATIONSHIPS ------>
<div class="profile-fields-title mt-2"><a id="relationships" /><h2>Relationships <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h2></div><div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div>
<!----- NAME 1 ----->
<a id="name1" /><h4 class="mb-1">Name 1 (or @@characterID) <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h4>
<!------ QUOTE ------>
<div style="min-width:20rem;max-width:30rem">
<div class="card p-2 bg-faded card-outline-default"><span class="text-center mb-2">
<i class="fa-lg fas fa-quote-left float-left mt-1" style="color:#C6B100" />
<i class="fa-lg fas fa-quote-right float-right mt-1" style="color:#C6B100" />
  Lorem ipsum dolor sit amet
</span></div></div>
<!-- If you don't want a quote, delete the entire "QUOTE" section until this comment line. -->
<p>Subsection Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
<!----- END NAME 1 SECTION ----->
<!----- NAME 2 // To add more relationships, copy+paste this section BEFORE the Trivia section. Remember to change the 'a id="name2"' to name3, name4, etc. Be sure to add them to the TOC list too! ----->
<a id="name2" /><h4 class="mb-1">Name 2 (or @@characterID) <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h4>
<!------ QUOTE ------>
<div style="min-width:20rem;max-width:30rem">
<div class="card p-2 bg-faded card-outline-default"><span class="text-center mb-2">
<i class="fa-lg fas fa-quote-left float-left mt-1" style="color:#C6B100" />
<i class="fa-lg fas fa-quote-right float-right mt-1" style="color:#C6B100" />
  Lorem ipsum dolor sit amet
</span></div></div>
<p>Subsection Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
<!----- END NAME 2 SECTION ----->

<!----- TRIVIA ----->
<div class="profile-fields-title mt-2"><a id="trivia" /><h2>Trivia <a href="#toc" style="color:#C6B100"><i style="font-size:.75em" class="fas fa-bars" /></a></h2></div><div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div>
<ul class="pl-4" id="trivia1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>