Difference between revisions of "Cheat Sheet"

Revision as of 10:15, 25 March 2021

This page is for Wiki-editor use. Below are various stylings that can be used on any page.

Icon Styles

A clickable icon that links the reader to a separate page that will automatically play the specified audio file.

<span class="ext-link">[[File:listen.png|frameless|link=YOUR_URL_TO_UPLOADED_AUDIO_FILE_HERE|target=_blank]]</span>

A clickable icon that links the reader to a separate page containing an image file.

<span class="ext-link">[[File:viewimage.png|frameless|link=YOUR_URL_TO_UPLOADED_IMAGE_FILE_HERE|target=_blank]]</span>

A clickable icon that links the reader to a separate page containing an image file. This is used specifically for screenshots.

<span class="ext-link">[[File:screenshot.png|frameless|link=YOUR_URL_TO_UPLOADED_SCREENSHOT_HERE|target=_blank]]</span>

A clickable icon that links the reader to a YouTube video or channel.

<span class="ext-link">[[File:vid.png|frameless|link=YOUR_URL_TO_YOUTUBE_HERE|target=_blank]]</span>

An icon users can hover over to make text appear.

{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/a/ae/Lens.png | YOUR_TEXT_HERE }}

Collapsible Conversations

Mainly used for timeline and character page purposes.

Convo - No Summary

0/0/0 - Chat with Character - Source

Text goes here.
Text from a canon entity.

<div class="transcript mw-collapsible mw-collapsed">
<p style="display:inline;">
<b>
0/0/0 - Chat with Character - Source
</b>
</p>
<div class="mw-collapsible-content"><poem>
Text goes here.
<span class="vip">Text from a canon entity.</span>
</poem>
</div>
</div>

Convo - With Summary

0/0/0 - Chat with Character - Source

Long blocks of text.
Long blocks of text form a canon entity.

Summary

Important piece of information derived from the text above.
Important piece of information derived from the text above.

<div class="transcriptsum mw-collapsible mw-collapsed">
<p style="display:inline;">
<b>
0/0/0 - Chat with Character - Source
</b>
</p>
<div class="mw-collapsible-content"><poem>
Long blocks of text.
<span class="vip">Long blocks of text form a canon entity.</span>
</poem>
</div>
</div>
<div class="summary">
<p class="fauxheader">Summary</p>
<div class="fadediv"></div>
<ul>
<li>
Important piece of information derived from the text above.
</li>
<li>
Important piece of information derived from the text above.
</li>
</ul>
</div>

Convo - With Summary and Extra Sections

0/0/0 - Chat with Character - Source

Long blocks of text.
Long blocks of text form a canon entity.

Summary

Important piece of information derived from the text above.

Updates

Extra Section

Extra Section Text

<div class="transcriptsum mw-collapsible mw-collapsed">
<p style="display:inline;">
<b>
0/0/0 - Chat with Character - Source
</b>
</p>
<div class="mw-collapsible-content"><poem>
<span class="vip">
</poem>
</div>
</div>
<div class="summary">
<p class="fauxheader">Summary</p>
<div class="fadediv"></div>
<ul>
<li>

</li>
</ul>

<p class="fauxheader">Updates</p>
<div class="fadediv"></div>
<ul>
<li>

</li>
<div class="indented">
<li>

</li>
</div>
</ul>
</div>

General Page Use

Stylings for general use on just about any page.

Disambiguation

"Must be another one..."

This is the page for ____.
You may be looking for ____.

<div class="storyquote">
<p>
<img src="http://johnisdead.withinhubris.com/images/4/4d/Anotherpage.gif" alt="" />
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
"Must be another one..."
</p>
<div class="fadediv" style="margin-left: 6em;background: linear-gradient(to right, rgba(0,74,22,1), rgba(0,74,22,1), rgba(0,74,22,0), rgba(0,74,22,0));margin-top: 3.3em;"></div>
<p style="margin-left: 7.5em; margin-top: 0px; opacity: 1;" >
<i style="opacity: 1;>This is the page for ____.<br />
You may be looking for ____.</i>
</p>
</div>

Listing / Archive

Text Title

Text
Text
Text

Text Title

Text
Text
Text

<div class="webArchive">
<p style="margin-bottom: 0.2em; margin-top: 0.2em;">
Text Title
</p>
<div class="webArchiveEntry"><poem>
Text
Text
Text
</poem></div>
<p style="margin-bottom: 0.2em; margin-top: 0.2em;">
Text Title
</p>
<div class="webArchiveEntry"><poem>
Text
Text
Text
</poem></div>
</div>

Article Images

Tyler wearing his crescent moon necklace.

Left Side

<div class="articleimg" style="float:left; margin: 1em; margin-top: 0px; margin-left:0px;"><html><a href="IMAGE_HERE_FOR_LINK" target="_blank"><img src="IMAGE_HERE_FOR_DISPLAY" alt="" /></a></html><p style="margin-bottom:0px; text-align:left;"><i>CAPTION_HERE</i></p></div>

Right Side

<div class="articleimg" style="float:right; margin: 1em; margin-top: 0px; margin-right:0px;"><html><a href="IMAGE_HERE_FOR_LINK" target="_blank"><img src="IMAGE_HERE_FOR_DISPLAY" alt="" /></a></html><p style="margin-bottom:0px; text-align:left;"><i>CAPTION_HERE</i></p></div>

Quote Box

BEN

"Lastly, thank you for taking the time to open this and open yourselves up to me by hearing my story, despite maybe not beliEving me. You didn't have to do that - really, you shouldn't have. Your support this entire time has kept me going and now I am finally free of this."

<div class="storyquote">
<p>
<img src="IMAGE_HERE" alt="" />
<p class="storyquotename" style="color:gold; margin-bottom: 0px;">
NAME_HERE
</p>
<p class="storyquotebox" style="margin-left: 2em; margin-top: 0px;" >
QUOTE_HERE
</p>
</div>

Story Page Stylings

These may be used on other pages if we want - I've mainly designed them for the Story page, though.

Chat with BEN and Tyler

Ben: "Hello."
Tyler: "Aa."
Ben: "Hello."
Tyler: "Aa."
Ben: "Hello."
Tyler: "Aa."
Ben: "Hello."
Tyler: "Aa."
Ben: "Hello."
Tyler: "Aa."
Ben: "Hello."
Tyler: "Aa."
Ben: "Hello."
Tyler: "Aa."

<div class="storyquote">
<p>
<img src="http://johnisdead.withinhubris.com/images/e/e4/BenClose.png" alt="" />
<img src="http://johnisdead.withinhubris.com/images/6/65/Tinytyler.png" alt="" style="margin-top:8em;" />
<p class="storyquotename" style="color:gold; margin-bottom: 0px;">
Chat with BEN and Tyler
</p>
<poem>
<p class="storyquotebox" style="font-style:normal; padding:0.5em 2em 0.5em 6.5em; font-size: 1.1em;">Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
Ben: "Hello."
<span class="vip">Tyler: "Aa."</span>
</p>
</poem>
</div>

Miscellaneous

Various stylings for just about any use.

Indented Text

Non-indented text.

Indented text.

Non-indented text.

<p>Non-indented text.</p>
<div class="indented">
<p>Indented text.</p>
</div>
<p>Non-indented text.</p>

Canon Text

"Short canon string of text."

<span class="canquote">"Short canon string of text."</span>

Supplementary Text

"Supplemental explanation text."

<span class="supple">"Supplemental explanation text."</span>

Special Use Stylings

Stylings with very specific uses - mainly in the timelines.

Pumpkinhead Gamejack Content

The following updates are a part of the "Pumpkinhead Gamejack".
The characters that the players Jos and Circlehunter portrayed are not canon to Johnisdead and much of the information revealed by Pumpkinhead himself is false.
Despite this, the "Pumpkinhead Gamejack" itself is still a canon event within the story of Johnisdead.

Test

<div class="transcript mw-collapsible mw-collapsed" style="background-color:black; border:none; margin-top: 2em; margin-bottom: 2em;">
<p style="display:inline;"><b style="color:orange; font-size:0.875em; font-family:Arial;">Pumpkinhead Gamejack Content</b><div class="fadediv" style="margin-left:1em; background: linear-gradient(to right, rgba(191,124,0,1), rgba(191,124,0,0), rgba(191,124,0,0), rgba(191,124,0,0));"></div></p>
<div class="mw-collapsible-content" style="background: linear-gradient(to right, rgba(56,36,0,0), rgba(56,36,0,0.2), rgba(56,36,0,0.8), rgba(56,36,0,1)); border-radius: 5px; border:none; border-left: 5px ridge orange; padding-top: 0.8em; padding-left: 0.5em; margin-left: 1em; font-family:Arial; font-size: 0.875em;">
<p style="margin-left: 2em;"><b style="font-weight: normal; color: #ffc356; font-style: italic; opacity: 0.7;">The following updates are a part of the "Pumpkinhead Gamejack".<br />
The characters that the players Jos and Circlehunter portrayed are not canon to Johnisdead and much of the information revealed by Pumpkinhead himself is false.<br />
Despite this, the "Pumpkinhead Gamejack" itself is still a canon event within the story of Johnisdead.</b></p>
</div>
</div>

Johnisdead Path Pages

Test

Summary

Important piece of information derived from the text above.
Important piece of information derived from the text above.

<div class="transcriptsum mw-collapsible mw-collapsed" style="background-color:black; border:none; margin-top: 2em; margin-bottom: 0px;">
<p style="display:inline;"><b style="color:green; font-size:0.875em; font-family:Arial;">Johnisdead Path Pages</b><div class="fadediv" style="margin-left:1em; background: linear-gradient(to right, rgba(0,74,22,1), rgba(0,74,22,0), rgba(0,74,22,0), rgba(0,74,22,0));"></div></p>
<div class="mw-collapsible-content" style="border-radius: 5px; border:none; border-left: 5px ridge #1b3d00; border-bottom: 2px solid #0e1f00; padding-top: 0.8em; padding-left: 0.5em; margin-left: 1em; font-family:Arial; font-size: 0.875em; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
<ul>
<li>
Test
</li>
</ul>
</div>
</div>
<div class="summary" style="margin-bottom: 0px; margin-right: 0px; border-bottom: 0px; border-right: 0px; background: linear-gradient(to right, rgba(0,13,2,1), rgba(0,13,2,0.5), rgba(0,13,2,0), rgba(0,13,2,0));">
<p class="fauxheader">Summary</p>
<div class="fadediv"></div>
<ul>
<li>
Important piece of information derived from the text above.
</li>
<li>
Important piece of information derived from the text above.
</li>
</ul>
</div>

Entries omitted by Pumpkinhead.

<div class="ph"><span style="float:right;">{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/6/64/Pumpkin.png | This was originally omitted from the Timeline by Wolfcat.}}</span>
Text
</div>

A clickable icon that will display another image already loaded on the page. This will not open a new window.

!!IMPORTANT!! The file linked with this method MUST be loaded on the page somewhere. A way of doing this without having to visually have the image appearing in the article is to place a hidden paragraph element somewhere in your article that contains all of the files that are to be linked. Example:

[[File:viewimage.png|frameless|link={{fullurl:{{PAGENAME}}}}#/media/File:file1.png]]
[[File:viewimage.png|frameless|link={{fullurl:{{PAGENAME}}}}#/media/File:file2.png]]
[[File:viewimage.png|frameless|link={{fullurl:{{PAGENAME}}}}#/media/File:file3.png]]

<p style="display:none;">
[[File:file1.png]]
[[File:file2.png]]
[[File:file3.png]]
</p>

@@ Line 194: / Line 194: @@
 Stylings for general use on just about any page.
 <h3>Disambiguation</h3>
+<div class="cheatSheet">
 <div class="storyquote">
 <p>
@@ Line 220: / Line 221: @@
 </div>
 </pre>
+</div>
 <h3>Listing / Archive</h3>
+<div class="cheatSheet">
 <div class="webArchive">
 <p style="margin-bottom: 0.2em; margin-top: 0.2em;">
@@ Line 259: / Line 262: @@
 </div>
 </pre>
-<h3>Article Images</h3>>
+</div>
+<h3>Article Images</h3>
+<div class="cheatSheet">
 <div class="articleimg" style="margin: 1em; margin-top: 0px; margin-left:0px;"><html><a href="http://johnisdead.withinhubris.com/images/8/8b/Tyler.jpg" target="_blank"><img src="http://johnisdead.withinhubris.com/images/8/8b/Tyler.jpg" alt="" /></a></html><p style="margin-bottom:0px;"><i>Tyler wearing his crescent moon necklace.</i></p></div>
 <pre>
@@ Line 270: / Line 275: @@
 <div class="articleimg" style="float:right; margin: 1em; margin-top: 0px; margin-right:0px;"><html><a href="IMAGE_HERE_FOR_LINK" target="_blank"><img src="IMAGE_HERE_FOR_DISPLAY" alt="" /></a></html><p style="margin-bottom:0px; text-align:left;"><i>CAPTION_HERE</i></p></div>
 </pre>
+</div>
 <h3>Quote Box</h3>
+<div class="cheatSheet">
 <div class="storyquote">
 <p>
@@ Line 294: / Line 301: @@
 </div>
 </pre>
+</div>
 <h2>Story Page Stylings</h2>
 These may be used on other pages if we want - I've mainly designed them for the Story page, though.
-Story Quote Convo
+<div class="cheatSheet">
 <div class="storyquote">
 <p>
@@ Line 351: / Line 359: @@
 </div>
 </pre>
+</div>
 <h2>Miscellaneous</h2>
 Various stylings for just about any use.
 <h3>Indented Text</h3>
+<div class="cheatSheet">
 <p>Non-indented text.</p>
 <div class="indented">
@@ Line 366: / Line 376: @@
 <p>Non-indented text.</p>
 </pre>
+</div>
 <h3>Canon Text</h3>
+<div class="cheatSheet">
 <span class="canquote">"Short canon string of text."</span>
 <pre>
 <span class="canquote">"Short canon string of text."</span>
 </pre>
+</div>
 <h3>Supplementary Text</h3>
+<div class="cheatSheet">
 <span class="supple">"Supplemental explanation text."</span>
 <pre>
 <span class="supple">"Supplemental explanation text."</span>
 </pre>
-</h3>
+</div>
 <h2>Special Use Stylings</h2>
 Stylings with very specific uses - mainly in the timelines.
+<div class="cheatSheet">
 <div class="transcript mw-collapsible mw-collapsed" style="background-color:black; border:none; margin-top: 2em; margin-bottom: 2em;">
 <p style="display:inline;"><b style="color:orange; font-size:0.875em; font-family:Arial;">Pumpkinhead Gamejack Content</b><div class="fadediv" style="margin-left:1em; background: linear-gradient(to right, rgba(191,124,0,1), rgba(191,124,0,0), rgba(191,124,0,0), rgba(191,124,0,0));"></div></p>
@@ Line 402: / Line 417: @@
 </div>
 </pre>
+</div>
+<div class="cheatSheet">
 <div class="transcriptsum mw-collapsible mw-collapsed" style="background-color:black; border:none; margin-top: 2em; margin-bottom: 0px;">
 <p style="display:inline;"><b style="color:green; font-size:0.875em; font-family:Arial;">Johnisdead Path Pages</b><div class="fadediv" style="margin-left:1em; background: linear-gradient(to right, rgba(0,74,22,1), rgba(0,74,22,0), rgba(0,74,22,0), rgba(0,74,22,0));"></div></p>
@@ Line 448: / Line 465: @@
 </div>
 </pre>
+</div>
+<div class="cheatSheet">
 <div class="ph"><span style="float:right;">{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/6/64/Pumpkin.png | This was originally omitted from the Timeline by Wolfcat.}}</span>
 Entries omitted by Pumpkinhead.
@@ Line 456: / Line 475: @@
 </div>
 </pre>
+</div>
+<div class="cheatSheet">
 A clickable icon that will display another image already loaded on the page. This will not open a new window. [[File:viewimage.png|frameless|link={{fullurl:{{PAGENAME}}}}#/media/File:Soon.png]]
@@ Line 474: / Line 495: @@
 </p>
 </pre>
+</div>
 <p style="display:none;">
 [[File:soon.png]]
 </p>

Difference between revisions of "Cheat Sheet"

Revision as of 10:15, 25 March 2021

Contents

Icon Styles

Collapsible Conversations

Convo - No Summary

Convo - With Summary

Convo - With Summary and Extra Sections

General Page Use

Disambiguation

Listing / Archive

Article Images

Quote Box

Story Page Stylings

Miscellaneous

Indented Text

Canon Text

Supplementary Text

Special Use Stylings

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Contents

Timelines

Other

Tools