Template:Test2: Difference between revisions

From TowersWiki

No edit summary
(Blanked the page)
Tags: Blanking Manual revert
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
Based on a page design by [[User:Elizabeth]] and made into a template. Currently ready for use but still IN DEVELOPMENT. Feedback welcome.


Example of use (please check [[Kwan]] or [[Clairine]] for a actual character content):
<nowiki>{{</nowiki>ShannonTemplate
| pagename=Kwan Seong
| rightpanel=yes (can be left blank for 'no')
| logs=yes
| color1=darkslategray
| colorbg1=lightcyan
| color2=lightcyan
| colorbg2=darkslategray
| colorbginfobox=white
| photobanner=<nowiki>[[File:Dichen-Lachman-1200.jpg]]</nowiki>
| portraitimage=<nowiki>[[File:Kwan3.jpg]]</nowiki>
| portraiticon=<nowiki>[[File:Akashic-symbol.png]]</nowiki>
| bannerpic1=<nowiki>[[File:kwan-sword.jpg]]</nowiki>
| bannerpic2=<nowiki>[[File:D5.jpg]]</nowiki>
| biography=<nowiki><p>Bio paragraph 1 lorem ipsum</p>
  <p>Bio paragraph 2 lorem ipsum</p></nowiki>
| position=Holistic Coach
| apparentage=Early 30's
| demeanor=Innovator
| height=5'3"
| weight=Athletic
| hair=Light Brown
| eyes=Light Brown
| faction=The Traditions
| tradition=Akashic Brotherhood
| sub-tradition=Li-Hai / Mo-tzu Fa
| chantry=<nowiki>[[Respect_Community_Center|Respect]]</nowiki>
| divider1=yes
| divider2=yes
| rphooks=<nowiki><table class="hooks-table">
  <tr>
    <td class="hook-table-label">Hook 1:</td>
    <td>What a great hook to get us into RP!</td>
  </tr>
  </table></nowiki>
| contacts=<nowiki><table class="hooks-table">
    <tr>
      <td class="hook-table-label">[[Kwan]]:</td>
      <td>What an awesome contact!</td>
    </tr>
  </table></nowiki>
| gallery=<nowiki><ul>
    <li>[[File:Kwan11.jpg]]</li>
  </ul></nowiki>
<nowiki>}}</nowiki>
For best results, use either <b>leftpanel</b> or <b>rightpanel</b> but not both. Just set the desired field to <b><i>yes</b></i> and the info-box will appear on one side or the other.
Regular fields that can be entered include:
<ul>
  <li>pagename - Character's first or full name both work.</li>
  <li>rightpanel / leftpanel - Required: Only set ONE of these. Any value, including 'yes' is fine.</li>
  <li>logs - Optional: Set to any value to include a logs section.
  <li>color1, colorbg1, color2, colorbg2, colorbginfobox - Optional: Use HTML or CSS color values for each of the two block styles. Defaults to a black/white scheme. Example codes can be found at https://htmlcolorcodes.com/.</li>
  <li>photobanner - Required: For the large screen main photo in the top section.</li>
  <li>portraitimage - Required: For the top infobox portrait image.</li>
  <li>portraiticon - Optional: Icon image below the infobox</li>
  <li>bannerpic1 - Optional: For the first main banner pic below the Biography section</li>
  <li>bannerpic2 - Optional: For the second main banner pic below the logs section</li>
  <li>biography - Required: General biography / info section in top section.</li>
</ul>
<b>Info Box</b> fields that can be entered include:
<ul>
  <li>position</li>
  <li>demeanor</li>
  <li>apparentage</li>
  <li>hometown</li>
  <li>height</li>
  <li>weight</li>
  <li>hair</li>
  <li>eyes</li>
  <li>faction</li>
  <li>tradition (for Mages)</li>
  <li>sub-tradition (for Mages)</li>
  <li>chantry (for Mages)</li>
  <li>seeming (for Changeling)</li>
  <li>legacy (for Changelings)</li>
  <li>kith (for Changeling)</li>
  <li>court (for Changeling)</li>
  <li>motley (for Changeling</li>
  <li>sect (for Vampires)</li>
  <li>clan (for Vampires)</li>
  <li>coterie (for Vampires)</li>
  <li>breed (for Shifters)</li>
  <li>auspice (for Shifters)</li>
  <li>tribe (for Shifters)</li>
  <li>pack (for Shifters)</li>
  <li>totem (for Shifters)</li>
  <li>type (optional, for Fera perhaps?)</li>
  <li>aka (for aliases, ritenames, and the like)</li>
  <li>divider1 (for linebreak1)</li>
  <li>divider2 (for linebreak2)<li>
</ul>
<b>To Do</b>:
<ul>
  <li>Add fields for Wraith.</li>
  <li>Add ability to add generic titled content boxes, as well.</li>
  <li>Mobile Responsiveness</li>
</ul>
If you have any suggestions for the To Do list above, @mail Ceres in-game!
</noinclude>
<includeonly>
{{#css:
#main-container {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
display: flex;
flex-direction: column;
justify-content: center;
height: auto;
margin: auto;
color: {{{color1|#333333}}};
background-color: {{{colorbg1|#efefef}}};
}
#top-section {
display: flex;
}
#center-panel {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
}
.side-panel {
width: 30%;
height: auto;
background-color: {{{colorbginfobox|white}}};
border: 11px;
border-style: solid;
border-color: {{{colorbg2|#333333}}};
font-size: 0.9em;
border-bottom-style: hidden;
}
#header-container {
width: 100%;
display: flex;
justify-content: center;
padding: 2em 0;
}
#biography-container {
width: 94%;
padding: 1em 3%;
}
#logs-content {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
.bg-dark {
background-color: {{{colorbg2|#333333}}};
color: {{{color2|#efefef}}};
border-color: {{{color2|#efefef}}};
}
.bg-light {
background-color: {{{colorbg1|#efefef}}};
color: {{{color1|#333333}}};
border-color: {{{color1|#333333}}};
}
.header-title {
  width: 94%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 25px;
  letter-spacing: 2px;
  word-spacing: 2px;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
}
.center {
  text-align: center;
}
.underline {
  border-bottom-style: solid;
  border-bottom-width: 0.1em;
  padding-bottom: 0.5em;
}
.label {
  margin: 0.2em 0;
  font-size: 1.4em;
  font-weight: 600;
  font-style: italic;
}
.photo-banner {
  width: 100%;
  height: auto;
}
.photo-banner img {
  width: 100%;
  height: 100%;
}
.portrait-image {
  width: 100%;
  margin-bottom: 1em;
}
.portrait-image img {
  width: 100%;
}
.info-table {
  margin: auto;
  width: 100%;
  padding: 0 1em;
}
.info-table-label {
  font-weight: 600;
  width: 50%;
}
.icon {
  display: flex;
  justify-content: center;
  padding: 1em 0 1.5em 0;
}
.icon a {
  display: flex;
  justify-content: center;
}
.icon img {
  width: 50%;
}
.hooks-container, .contacts-container, .gallery-container, .logs-container {
  width: 94%;
  padding: 1em 3%;
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
}
.hooks-content {
  width: 100%;
  display: flex;
}
.hooks-content td img {
  width: 33%;
}
.hooks-table {
  width: 900px;
}
.hook-table-label {
  width: 20%;
  font-weight: 600;
  padding-left: 0.5em;
}
.hook-table-label a {
  color: {{{colorbg1|#efefef}}};
}
.hook-table-label a:visited {
  color: {{{colorbg1|#efefef}}};
}
.hooks-table a {
color: {{{color2|#efefef}}};
}
.hooks-table a:visited {
color: {{{color2|#efefef}}};
}
.gallery-content ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: center;
}
.gallery-content#gallery img {
  height: 240px;
  max-width: 260px !important;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin: 10px;
  -moz-box-shadow: 10px 10px 20px rgba(0,0,0,0.75);
  webkit-box-shadow: 10px 10px 20px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 20px rgba(0,0,0,0.75);
}
.gallery-content img:hover {
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -o-transform: scale(1.6);
  -ms-transform: scale(1.6);
  transform: scale(1.6);
  cursor: pointer;
}
}}
<div id="main-container">
  <div id="top-section">
    {{#if: {{{leftpanel|}}} |
    <div id="left-panel" class="side-panel">
    <div class="portrait-image">{{{portraitimage|&nbsp;}}}</div>
      <table class="info-table">
        <tr>
          <td class="info-table-label">Full Name:</td>
          <td>{{{pagename|&nbsp;}}}</td>
        </tr>
        {{#if: {{{aka|}}} |
        <tr>
          <td class="info-table-label">AKA:</td>
          <td>{{{aka|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{position|}}} |
        <tr>
          <td class="info-table-label">Position:</td>
          <td>{{{position|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{demeanor|}}} |
        <tr>
          <td class="info-table-label">Demeanor:</td>
          <td>{{{demeanor|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{apparentage|}}} |
        <tr>
          <td class="info-table-label">Apparent Age:</td>
          <td>{{{apparentage|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{hometown|}}} |
        <tr>
          <td class="info-table-label">Hometown:</td>
          <td>{{{hometown|&nbsp;}}}</td>
        </tr>
        }}
      </table>
      {{#if: {{{divider1|}}} |
        <hr style="width: 90%" />
      }}
      <table class="info-table">
        {{#if: {{{height|}}} |
        <tr>
          <td class="info-table-label">Height:</td>
          <td>{{{height|}}}</td>
        </tr>
        }}
        {{#if: {{{weight|}}} |
        <tr>
          <td class="info-table-label">Weight:</td>
          <td>{{{weight|}}}</td>
        </tr>
        }}
        {{#if: {{{hair|}}} |
        <tr>
          <td class="info-table-label">Hair:</td>
          <td>{{{hair|}}}</td>
        </tr>
        }}
        {{#if: {{{eyes|}}} |
        <tr>
          <td class="info-table-label">Eyes:</td>
          <td>{{{eyes|}}}</td>
        </tr>
        }}
      </table>
      {{#if: {{{divider2|}}} |
        <hr style="width: 90%" />
      }}
      <table class="info-table">
        {{#if: {{{faction|}}} |
        <tr>
          <td class="info-table-label">Faction:</td>
          <td>{{{faction|}}}</td>
        </tr>
        }}
        {{#if: {{{type|}}} |
        <tr>
          <td class="info-table-label">Type:</td>
          <td>{{{type|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{tradition|}}} |
        <tr>
          <td class="info-table-label">Tradition:</td>
          <td>{{{tradition|}}}</td>
        </tr>
        }}
        {{#if: {{{sub-tradition|}}} |
        <tr>
          <td class="info-table-label">Sub-Faction:</td>
          <td>{{{sub-tradition|}}}</td>
        </tr>
        }}
        {{#if: {{{chantry|}}} |
        <tr>
          <td class="info-table-label">Chantry:</td>
          <td>{{{chantry|}}}</td>
        </tr>
        }}
        {{#if: {{{seeming|}}} |
        <tr>
          <td class="info-table-label">Seeming:</td>
          <td>{{{seeming|}}}</td>
        </tr>
        }}
        {{#if: {{{kith|}}} |
        <tr>
          <td class="info-table-label">Kith:</td>
          <td>{{{kith|}}}</td>
        </tr>
        }}
        {{#if: {{{court|}}} |
        <tr>
          <td class="info-table-label">Court:</td>
          <td>{{{court|}}}</td>
        </tr>
        }}
        {{#if: {{{legacy|}}} |
        <tr>
          <td class="info-table-label">Legacy:</td>
          <td>{{{legacy|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{motley|}}} |
        <tr>
          <td class="info-table-label">Motley:</td>
          <td>{{{motley|}}}</td>
        </tr>
        }}
        {{#if: {{{sect|}}} |
        <tr>
          <td class="info-table-label">Sect:</td>
          <td>{{{sect|}}}</td>
        </tr>
        }}
        {{#if: {{{clan|}}} |
        <tr>
          <td class="info-table-label">Clan:</td>
          <td>{{{clan|}}}</td>
        </tr>
        }}
        {{#if: {{{coterie|}}} |
        <tr>
          <td class="info-table-label">Coterie:</td>
          <td>{{{coterie|}}}</td>
        </tr>
        }}
        {{#if: {{{breed|}}} |
        <tr>
          <td class="info-table-label">Breed:</td>
          <td>{{{breed|}}}</td>
        </tr>
        }}
        {{#if: {{{auspice|}}} |
        <tr>
          <td class="info-table-label">Auspice:</td>
          <td>{{{auspice|}}}</td>
        </tr>
        }}
        {{#if: {{{tribe|}}} |
        <tr>
          <td class="info-table-label">Tribe:</td>
          <td>{{{tribe|}}}</td>
        </tr>
        }}
        {{#if: {{{pack|}}} |
        <tr>
          <td class="info-table-label">Pack:</td>
          <td>{{{pack|}}}</td>
        </tr>
        }}
        {{#if: {{{totem|}}} |
        <tr>
          <td class="info-table-label">Totem:</td>
          <td>{{{totem|}}}</td>
        </tr>
        }}
      </table>
      <hr style="width: 90%" />
      {{#if: {{{portraiticon|}}} |
      <div class="icon">{{{portraiticon}}}</div>
      }}
    </div>
    }}
    <div id="center-panel">
      <div id="header-container">
        <div class="header-title center underline">{{{pagename|&nbsp;}}}</div>
      </div>
      <div class="photo-banner">{{{photobanner|&nbsp;}}}</div>
      {{#if: {{{biography|}}} |
      <div id="biography-container">
        <div class="label center underline">Biography</div>
          <div>{{{biography}}}</div>
      </div>
      }}
    </div>
    {{#if: {{{rightpanel|}}} |
    <div id="right-panel" class="side-panel">
    <div class="portrait-image">{{{portraitimage|&nbsp;}}}</div>
      <table class="info-table">
        <tr>
          <td class="info-table-label">Full Name:</td>
          <td>{{{pagename|&nbsp;}}}</td>
        </tr>
        {{#if: {{{aka|}}} |
        <tr>
          <td class="info-table-label">AKA:</td>
          <td>{{{aka|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{position|}}} |
        <tr>
          <td class="info-table-label">Position:</td>
          <td>{{{position|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{demeanor|}}} |
        <tr>
          <td class="info-table-label">Demeanor:</td>
          <td>{{{demeanor|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{apparentage|}}} |
        <tr>
          <td class="info-table-label">Apparent Age:</td>
          <td>{{{apparentage|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{hometown|}}} |
        <tr>
          <td class="info-table-label">Hometown:</td>
          <td>{{{hometown|&nbsp;}}}</td>
        </tr>
        }}
      </table>
      {{#if: {{{divider1|}}} |
        <hr style="width: 90%" />
      }}
      <table class="info-table">
        {{#if: {{{height|}}} |
        <tr>
          <td class="info-table-label">Height:</td>
          <td>{{{height|}}}</td>
        </tr>
        }}
        {{#if: {{{weight|}}} |
        <tr>
          <td class="info-table-label">Weight:</td>
          <td>{{{weight|}}}</td>
        </tr>
        }}
        {{#if: {{{hair|}}} |
        <tr>
          <td class="info-table-label">Hair:</td>
          <td>{{{hair|}}}</td>
        </tr>
        }}
        {{#if: {{{eyes|}}} |
        <tr>
          <td class="info-table-label">Eyes:</td>
          <td>{{{eyes|}}}</td>
        </tr>
        }}
      </table>
      {{#if: {{{divider2|}}} |
        <hr style="width: 90%" />
      }}
      <table class="info-table">
        {{#if: {{{faction|}}} |
        <tr>
          <td class="info-table-label">Faction:</td>
          <td>{{{faction|}}}</td>
        </tr>
        }}
        {{#if: {{{type|}}} |
        <tr>
          <td class="info-table-label">Type:</td>
          <td>{{{type|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{tradition|}}} |
        <tr>
          <td class="info-table-label">Tradition:</td>
          <td>{{{tradition|}}}</td>
        </tr>
        }}
        {{#if: {{{sub-tradition|}}} |
        <tr>
          <td class="info-table-label">Sub-Faction:</td>
          <td>{{{sub-tradition|}}}</td>
        </tr>
        }}
        {{#if: {{{chantry|}}} |
        <tr>
          <td class="info-table-label">Chantry:</td>
          <td>{{{chantry|}}}</td>
        </tr>
        }}
        {{#if: {{{seeming|}}} |
        <tr>
          <td class="info-table-label">Seeming:</td>
          <td>{{{seeming|}}}</td>
        </tr>
        }}
        {{#if: {{{kith|}}} |
        <tr>
          <td class="info-table-label">Kith:</td>
          <td>{{{kith|}}}</td>
        </tr>
        }}
        {{#if: {{{court|}}} |
        <tr>
          <td class="info-table-label">Court:</td>
          <td>{{{court|}}}</td>
        </tr>
        }}
        {{#if: {{{legacy|}}} |
        <tr>
          <td class="info-table-label">Legacy:</td>
          <td>{{{legacy|&nbsp;}}}</td>
        </tr>
        }}
        {{#if: {{{motley|}}} |
        <tr>
          <td class="info-table-label">Motley:</td>
          <td>{{{motley|}}}</td>
        </tr>
        }}
        {{#if: {{{sect|}}} |
        <tr>
          <td class="info-table-label">Sect:</td>
          <td>{{{sect|}}}</td>
        </tr>
        }}
        {{#if: {{{clan|}}} |
        <tr>
          <td class="info-table-label">Clan:</td>
          <td>{{{clan|}}}</td>
        </tr>
        }}
        {{#if: {{{coterie|}}} |
        <tr>
          <td class="info-table-label">Coterie:</td>
          <td>{{{coterie|}}}</td>
        </tr>
        }}
        {{#if: {{{breed|}}} |
        <tr>
          <td class="info-table-label">Breed:</td>
          <td>{{{breed|}}}</td>
        </tr>
        }}
        {{#if: {{{auspice|}}} |
        <tr>
          <td class="info-table-label">Auspic:</td>
          <td>{{{auspice|}}}</td>
        </tr>
        }}
        {{#if: {{{tribe|}}} |
        <tr>
          <td class="info-table-label">Tribe:</td>
          <td>{{{tribe|}}}</td>
        </tr>
        }}
        {{#if: {{{pack|}}} |
        <tr>
          <td class="info-table-label">Pack:</td>
          <td>{{{pack|}}}</td>
        </tr>
        }}
        {{#if: {{{totem|}}} |
        <tr>
          <td class="info-table-label">Totem:</td>
          <td>{{{totem|}}}</td>
        </tr>
        }}
      </table>
      <hr style="width: 90%" />
      {{#if: {{{portraiticon|}}} |
      <div class="icon">{{{portraiticon}}}</div>
      }}
    </div>
    }}
  </div>
  {{#if: {{{rphooks|}}} |
    <div class="hooks-container bg-dark">
      <div class="label center underline">Roleplay Hooks</div>
      <div class="hooks-content">
        <div>{{{rphooks}}}</div>
      </div>
    </div>
  }}
 
  {{#if: {{{bannerpic1|}}} |
    <div class="photo-banner mid-banner">{{{bannerpic1}}}</div>
  }}
  {{#if: {{{contacts|}}} |
    <div class="hooks-container bg-dark">
      <div class="label center underline">Contacts</div>
      <div class="hooks-content">
        <div>{{{contacts}}}</div>
      </div>
    </div>
  }}
  {{#if: {{{logs|}}} | <div class="logs-container bg-light">
    <div class="label center underline">Logs</div>
    <div id="logs-content">{{#dpl:
      |linksto={{PAGENAME}}
      |category=Logs
      |columns=3
      |noresultsheader=<i>No logs have been posted yet.</i>
    }}</div>
  </div>
  }}
  {{#if: {{{bannerpic2|}}} |
    <div class="photo-banner mid-banner">{{{bannerpic2}}}</div>
  }}
  {{#if: {{{gallery|}}} |
    <div class="hooks-container bg-dark">
      <div class="label center underline">Gallery</div>
      <div class="hooks-content">
        <div class="gallery-content" id="gallery">{{{gallery}}}</div>
      </div>
    </div>
  }}
</div>
</includeonly>

Latest revision as of 02:05, 10 March 2024

Retrieved from "https://towersmux.net/w/index.php?title=Template:Test2&oldid=228"