Difference between revisions of "Cheat Sheet"

From Johnisdead Wiki
Jump to navigation Jump to search
 
(105 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<div class="transcript mw-collapsible mw-collapsed" style="background-color:black; border:none;">
+
Below are various stylings that can be used on any page.
−
<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;">
+
Templates are not listed on this page. For a list of usable templates, check the [[Template List]].
−
<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 />
+
<h2>Icon Styles</h2>
−
Despite this, the "Pumpkinhead Gamejack" itself is still a canon event within the story of Johnisdead.</b></p>
+
<div class="cheatSheet">
−
<ul>
+
<p style="margin-bottom: 0.1em; margin-top: 0.1em;">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=http://johnisdead.withinhubris.com/images/a/a9/Game_over.ogg|target=_blank]]</span></p>  
−
<li>
+
<pre>
−
Test
+
<span class="ext-link">[[File:listen.png|frameless|link=YOUR_URL_TO_UPLOADED_AUDIO_FILE_HERE|target=_blank]]</span>
−
</li>
+
</pre>
−
</ul>
 
 
</div>
 
</div>
 +
<div class="cheatSheet">
 +
<p style="margin-bottom: 0.1em; margin-top: 0.1em;">A clickable icon that links the reader to a separate page containing an image file. <span class="ext-link">[[File:viewimage.png|frameless|link=http://johnisdead.withinhubris.com/images/8/8d/Patrem.jpg|target=_blank]]</span></p>
 +
<pre>
 +
<span class="ext-link">[[File:viewimage.png|frameless|link=YOUR_URL_TO_UPLOADED_IMAGE_FILE_HERE|target=_blank]]</span>
 +
</pre>
 
</div>
 
</div>
−
 
+
<div class="cheatSheet">
 +
<p style="margin-bottom: 0.1em; margin-top: 0.1em;">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=http://johnisdead.withinhubris.com/images/8/8d/Patrem.jpg|target=_blank]]</span></p>
 
<pre>
 
<pre>
−
<div class="transcript mw-collapsible mw-collapsed" style="background-color:black; border:none;">
+
<span class="ext-link">[[File:screenshot.png|frameless|link=YOUR_URL_TO_UPLOADED_SCREENSHOT_HERE|target=_blank]]</span>
−
<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>
+
</pre>
−
<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>
 +
<div class="cheatSheet">
 +
<p style="margin-bottom: 0.1em; margin-top: 0.1em;">A clickable icon that links the reader to a YouTube video or channel. <span class="ext-link">[[File:vid.png|frameless|link=https://www.youtube.com/channel/UC3gtGXxN8u87hgnT6S-5itA|target=_blank]]</span></p>
 +
<pre>
 +
<span class="ext-link">[[File:vid.png|frameless|link=YOUR_URL_TO_YOUTUBE_HERE|target=_blank]]</span>
 +
</pre>
 
</div>
 
</div>
 +
<div class="cheatSheet">
 +
<p style="margin-bottom: 0.1em; margin-top: 0.1em;">An icon users can hover over to make text appear. {{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/a/ae/Lens.png | Hidden text that appears upon hovering. }}</p>
 +
<pre>
 +
{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/a/ae/Lens.png | YOUR_TEXT_HERE }}
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h2>Collapsible Conversations</h2>
−
 
+
Mainly used for timeline and character page purposes.
−
<h2>Documented Conversations and Canon Text (Without Summary)</h2>
+
<h3>Convo - No Summary</h3>
−
 
+
<div class="cheatSheet">
 
<div class="transcript mw-collapsible mw-collapsed">
 
<div class="transcript mw-collapsible mw-collapsed">
 
<p style="display:inline;">
 
<p style="display:inline;">
Line 43: Line 50:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
+
<br />
 
<pre>
 
<pre>
 
<div class="transcript mw-collapsible mw-collapsed">
 
<div class="transcript mw-collapsible mw-collapsed">
Line 58: Line 65:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h3>Convo - With Summary</h3>
−
 
+
<div class="cheatSheet">
−
 
 
−
 
 
−
 
 
−
<h2>Documented Conversations and Canon Text (With Summary)</h2>
 
−
 
 
 
<div class="transcriptsum mw-collapsible mw-collapsed">
 
<div class="transcriptsum mw-collapsible mw-collapsed">
 
<p style="display:inline;">
 
<p style="display:inline;">
Line 90: Line 92:
 
</ul>
 
</ul>
 
</div>
 
</div>
−
 
+
<br />
 
<pre>
 
<pre>
 
<div class="transcriptsum mw-collapsible mw-collapsed">
 
<div class="transcriptsum mw-collapsible mw-collapsed">
Line 117: Line 119:
 
</div>
 
</div>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h3>Convo - With Summary and Extra Sections</h3>
−
 
+
<div class="cheatSheet">
−
 
 
−
 
 
−
<h2>Documented Conversations and Canon Text (With Summary and Updates)</h2>
 
−
 
 
 
<div class="transcriptsum mw-collapsible mw-collapsed">
 
<div class="transcriptsum mw-collapsible mw-collapsed">
 
<p style="display:inline;">
 
<p style="display:inline;">
Line 140: Line 138:
 
<div class="fadediv"></div>
 
<div class="fadediv"></div>
 
<ul>
 
<ul>
−
<li>
 
−
Important piece of information derived from the text above.
 
−
</li>
 
 
<li>
 
<li>
 
Important piece of information derived from the text above.
 
Important piece of information derived from the text above.
Line 152: Line 147:
 
<ul>
 
<ul>
 
<li>
 
<li>
−
Various pages were updated during this conversation:
+
Extra Section
−
</li>
 
−
<div class="indented">
 
−
<li>
 
−
Page update along with links to files.
 
−
</li>
 
−
<li>
 
−
Page update along with links to files.
 
−
</li>
 
−
</div>
 
−
<li>
 
−
Various files were posted during this conversation:
 
 
</li>
 
</li>
 
<div class="indented">
 
<div class="indented">
 
<li>
 
<li>
−
A link to a file.
+
Extra Section Text
−
</li>
 
−
<li>
 
−
A link to a file.
 
 
</li>
 
</li>
 
</div>
 
</div>
 
</ul>
 
</ul>
 
</div>
 
</div>
−
 
+
<br />
 
<pre>
 
<pre>
 
<div class="transcriptsum mw-collapsible mw-collapsed">
 
<div class="transcriptsum mw-collapsible mw-collapsed">
Line 184: Line 165:
 
</p>
 
</p>
 
<div class="mw-collapsible-content"><poem>
 
<div class="mw-collapsible-content"><poem>
−
Long blocks of text.
+
<span class="vip">
−
<span class="vip">Long blocks of text form a canon entity.</span>
 
 
</poem>
 
</poem>
 
</div>
 
</div>
Line 194: Line 174:
 
<ul>
 
<ul>
 
<li>
 
<li>
−
Important piece of information derived from the text above.
+
 
−
</li>
 
−
<li>
 
−
Important piece of information derived from the text above.
 
 
</li>
 
</li>
 
</ul>
 
</ul>
Line 205: Line 182:
 
<ul>
 
<ul>
 
<li>
 
<li>
−
Various pages were updated during this conversation:
+
 
 
</li>
 
</li>
 
<div class="indented">
 
<div class="indented">
 
<li>
 
<li>
−
Page update along with links to files.
+
 
−
</li>
 
−
<li>
 
−
Page update along with links to files.
 
 
</li>
 
</li>
 
</div>
 
</div>
−
<li>
+
</ul>
−
Various files were posted during this conversation:
+
</div>
−
</li>
+
</pre>
−
<div class="indented">
+
</div>
−
<li>
+
<h2>Page Notices</h2>
−
A link to a file.
+
<h3>Disambiguation</h3>
−
</li>
+
<div class="cheatSheet">
−
<li>
+
<div class="storyquote">
−
A link to a file.
+
<p>
−
</li>
+
<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>
 
</div>
−
</ul>
+
<pre>
 +
<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>
 
</div>
 
</pre>
 
</pre>
−
 
+
</div>
−
<h2>Documented Conversations and Canon Text (With Summary and Updates) (Shortened)</h2>
+
<h3>WIP Page</h3>
−
 
+
<div class="cheatSheet">
 +
<div class="storyquote">
 +
<p>
 +
<img src="https://johnisdead.withinhubris.com/images/a/aa/Wip.gif" alt="" />
 +
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
 +
"NEW SIGNAL TURN ON. 4-9-20"
 +
</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 page is still under construction.<br />Check back later for more updates.</i>
 +
</p>
 +
</div>
 
<pre>
 
<pre>
−
<div class="transcriptsum mw-collapsible mw-collapsed">
+
<div class="storyquote">
−
<p style="display:inline;">
+
<p>
−
<b>
+
<img src="https://johnisdead.withinhubris.com/images/a/aa/Wip.gif" alt="" />
−
0/0/0 - Chat with Character - Source
+
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
−
</b>
+
"NEW SIGNAL TURN ON. 4-9-20"
 +
</p>[[Category:WIP Pages]]
 +
<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 page is still under construction.<br />Check back later for more updates.</i>
 
</p>
 
</p>
−
<div class="mw-collapsible-content"><poem>
 
−
<span class="vip">
 
−
</poem>
 
 
</div>
 
</div>
 +
</pre>
 
</div>
 
</div>
−
<div class="summary">
+
<h3>Future WIP Page</h3>
−
<p class="fauxheader">Summary</p>
+
<div class="cheatSheet">
−
<div class="fadediv"></div>
+
<div class="storyquote" style="margin-bottom: 10px;">
−
<ul>
+
<p>
−
<li>
+
<img src="https://johnisdead.withinhubris.com/images/f/f7/D.gif" alt="" />
−
 
+
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
−
</li>
+
"YOU DO NOT DESERVE TO BE HANDED INFORMATION"
−
</ul>
+
</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 class="fauxheader">Updates</p>
+
<p style="margin-left: 7.5em; margin-top: 0px; opacity: 1;" >
−
<div class="fadediv"></div>
+
<i style="opacity: 1;>Not much has been revealed about this topic yet within Johnisdead.<br />Check back later for more updates.</i>
−
<ul>
+
</p>
−
<li>
 
−
 
 
−
</li>
 
−
<div class="indented">
 
−
<li>
 
−
 
 
−
</li>
 
 
</div>
 
</div>
−
</ul>
+
<pre>
 +
<div class="storyquote" style="margin-bottom: 10px;">
 +
<p>[[Category:Impending-WIP Pages]]
 +
<img src="https://johnisdead.withinhubris.com/images/f/f7/D.gif" alt="" />
 +
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
 +
"YOU DO NOT DESERVE TO BE HANDED INFORMATION"
 +
</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;>Not much has been revealed about this topic yet within Johnisdead.<br />Check back later for more updates.</i>
 +
</p>
 
</div>
 
</div>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h2>General Page Use</h2>
−
 
+
Stylings for general use on just about any page.
−
 
+
<h3>Image Gallery</h3>
−
<h2>Linking and Files</h2>
+
<div class="cheatSheet">
−
 
+
<gallery>
−
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=http://johnisdead.withinhubris.com/images/a/a9/Game_over.ogg|target=_blank]]</span>
+
File:wikimainimg.png|Caption here.
−
 
+
File:wikimainimg.png|Caption here.
 +
File:wikimainimg.png|Caption here.
 +
</gallery>
 
<pre>
 
<pre>
−
<span class="ext-link">[[File:listen.png|frameless|link=YOUR_URL_TO_UPLOADED_AUDIO_FILE_HERE|target=_blank]]</span>
+
<gallery>
 +
File:FILENAME_AND_EXTENSION|CAPTION
 +
File:FILENAME_AND_EXTENSION|CAPTION
 +
File:FILENAME_AND_EXTENSION|CAPTION
 +
</gallery>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h3>Listing / Archive</h3>
−
 
+
<div class="cheatSheet">
−
 
+
<div class="webArchive">
−
 
+
<p style="margin-bottom: 0.2em; margin-top: 0.2em;">
−
 
+
Text Title
−
A clickable icon that links the reader to a separate page containing an image file. <span class="ext-link">[[File:viewimage.png|frameless|link=http://johnisdead.withinhubris.com/images/8/8d/Patrem.jpg|target=_blank]]</span>
+
</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>
 
<pre>
 
<pre>
−
<span class="ext-link">[[File:viewimage.png|frameless|link=YOUR_URL_TO_UPLOADED_IMAGE_FILE_HERE|target=_blank]]</span>
+
<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>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h3>Listing / Archive (For Pages)</h3>
−
 
+
Alteration of the above styling. Allows for documentation of pages and page contents. This also supports different sections to be used if a page was updated consecutively .
−
 
+
<div class="cheatSheet">
−
 
+
<div class="webArchive">
−
 
+
<p style="margin-bottom: 0.2em; margin-top: 0.2em;">
−
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=http://johnisdead.withinhubris.com/images/8/8d/Patrem.jpg|target=_blank]]</span>
+
11/11/11 - "<b><nowiki>https://johnisdead.com</nowiki></b>"
−
 
+
</p>
 +
<div class="webArchiveEntry"><poem>
 +
11:11 PM - First Iteration<div class="fadediv"></div>Title:
 +
<b>John</b>
 +
Image:
 +
<b>Wiki.png</b>
 +
<span class="ext-link">[[File:Wikimainimg.png|class=pageImg|link=http://johnisdead.withinhubris.com/images/thumb/7/76/Wikimainimg.png/120px-Wikimainimg.png|target=_blank]]</span>
 +
Audio:
 +
<b>Internet_Detectives.mp3</b>
 +
[[File:Internet_Detectives.mp3]]
 +
Video:
 +
<b>Wiki.mp4</b>
 +
<youtube>https://www.youtube.com/watch?v=DBS39Jt7Vso</youtube>
 +
Text:
 +
"<span class="canquote">This is some page text.</span>"
 +
Source:
 +
"<span class="canquote">Text hidden in the source.</span>"
 +
Other:
 +
This page would redirect players.
 +
</poem></div>
 +
</div>
 
<pre>
 
<pre>
−
<span class="ext-link">[[File:screenshot.png|frameless|link=YOUR_URL_TO_UPLOADED_SCREENSHOT_HERE|target=_blank]]</span>
+
<div class="webArchive">
 +
<p style="margin-bottom: 0.2em; margin-top: 0.2em;">
 +
DATE - "URL"
 +
</p>
 +
<div class="webArchiveEntry"><poem>
 +
TIMESTAMP - ITERATION<div class="fadediv"></div>Title:
 +
<b>TITLE</b>
 +
Image:
 +
<b>IMAGE</b>
 +
<span class="ext-link">[[File:FILENAME|class=pageImg|link=URLHERE|target=_blank]]</span>
 +
Audio:
 +
<b>AUDIO</b>
 +
[[File:FILENAME]]
 +
Video:
 +
<youtube>URLHERE</youtube>
 +
Text:
 +
"<span class="canquote">PAGETEXT</span>"
 +
Source:
 +
"<span class="canquote">SOURCETEXT</span>"
 +
Other:
 +
TEXTHERE
 +
</poem></div>
 +
</div>
 
</pre>
 
</pre>
 +
</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>
 +
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>
 +
</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.
  
−
 
+
<h3>Quote Box (Old)</h3>
−
 
+
<div class="cheatSheet">
−
 
+
<div class="storyquote">
−
 
+
<p>
−
 
+
<img src="http://johnisdead.withinhubris.com/images/e/e4/BenClose.png" alt="" />
−
A clickable icon that links the reader to a YouTube video or channel. <span class="ext-link">[[File:vid.png|frameless|link=https://www.youtube.com/channel/UC3gtGXxN8u87hgnT6S-5itA|target=_blank]]</span>
+
<p class="storyquotename" style="color:gold; margin-bottom: 0px;">
 +
BEN
 +
</p>
 +
<p class="storyquotebox" style="margin-left: 2em; margin-top: 0px;" >
 +
"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."
 +
</p>
 +
</div>
  
 
<pre>
 
<pre>
−
<span class="ext-link">[[File:vid.png|frameless|link=YOUR_URL_TO_YOUTUBE_HERE|target=_blank]]</span>
+
<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>
 
</pre>
 
</pre>
 +
</div>
  
−
 
+
<h3>Quote Conversation (Old)</h3>
−
 
+
<div class="cheatSheet">
−
 
+
<div class="storyquote">
−
 
+
<p>
−
 
+
<img src="http://johnisdead.withinhubris.com/images/e/e4/BenClose.png" alt="" />
−
<h2>Other Stylings</h2>
+
<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;">
−
{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/a/ae/Lens.png | Hidden text that appears upon hovering. }}
+
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>
  
 
<pre>
 
<pre>
−
{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/a/ae/Lens.png | YOUR_TEXT_HERE }}
+
<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>
 
</pre>
 
</pre>
 +
</div>
  
−
 
+
<h3>Quote Box</h3>
−
 
+
<div class="cheatSheet">
−
 
+
<div class="quoteblock" style="margin-bottom: 60px;">
−
 
+
<div class="quotefullimg ">
−
 
+
<img src="https://johnisdead.withinhubris.com/images/9/97/Jadsmall.png" alt="" />
−
<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>
+
</div>
−
Entries omitted by Pumpkinhead.
+
<div class="quotetextholder">
 +
<div class="quotename">
 +
Character Name
 +
</div>
 +
<div class="fadediv" style="margin-left: -10px; height: 3px;"></div>
 +
<div class="quote">
 +
<p>Quoted text goes here.</p>
 +
</div>
 +
</div>
 
</div>
 
</div>
  
 
<pre>
 
<pre>
−
<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>
+
<div class="quoteblock">
−
Text
+
<div class="quotefullimg ">
 +
<img src="IMAGE_GOES_HERE" alt="" />
 +
</div>
 +
<div class="quotetextholder">
 +
<div class="quotename">
 +
NAME_GOES_HERE
 +
</div>
 +
<div class="fadediv" style="margin-left: -10px; height: 3px;"></div>
 +
<div class="quote">
 +
<p>QUOTE_GOES_HEREE</p>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
</div>
−
 
+
<h2>Miscellaneous</h2>
−
 
+
Various stylings for just about any use.
−
 
+
<h3>Indented Text</h3>
−
 
+
<div class="cheatSheet">
−
 
+
<p>Non-indented text.</p>
−
p>Non-indented text.</p>
 
 
<div class="indented">
 
<div class="indented">
 
<p>Indented text.</p>
 
<p>Indented text.</p>
 
</div>
 
</div>
 
<p>Non-indented text.</p>
 
<p>Non-indented text.</p>
−
 
 
<pre>
 
<pre>
 
<p>Non-indented text.</p>
 
<p>Non-indented text.</p>
Line 362: Line 539:
 
<p>Non-indented text.</p>
 
<p>Non-indented text.</p>
 
</pre>
 
</pre>
−
 
+
</div>
−
 
+
<h3>Canon Text</h3>
−
 
+
<div class="cheatSheet">
−
 
 
−
 
 
−
 
 
 
<span class="canquote">"Short canon string of text."</span>
 
<span class="canquote">"Short canon string of text."</span>
−
 
 
<pre>
 
<pre>
 
<span class="canquote">"Short canon string of text."</span>
 
<span class="canquote">"Short canon string of text."</span>
 
</pre>
 
</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>
 +
</div>
 +
<h2>Special Use Stylings</h2>
 +
Stylings with very specific uses - mainly in the timelines.
 +
<div class="cheatSheet">
 +
<div class="WHspoiler">Username <span style="float:right;">Jan 22 2015, 08:48 PM</span></div><div class="WHspoilertext">Text goes here</div>
  
  
 +
<pre>
 +
<div class="WHspoiler">NAME <span style="float:right;">TIME</span></div><div class="WHspoilertext">TEXT</div>
 +
</pre>
 +
</div>
  
 +
<div class="cheatSheet">
 +
<div class="WHsolved"><b>Solved:</b> Solved Cipher</div>
  
 +
<pre>
 +
<div class="WHsolved"><b>Solved:</b> Solved Cipher</div>
 +
</pre>
 +
</div>
  
 +
<div class="cheatSheet">
 +
<div class="erikaquote">
 +
<p>
 +
{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/5/5d/Erikaquote.png | This is Erika's quote regarding this character as documented on the associated Johnisdead.com/listen/to page.}}
 +
<p class="erikaquotename" style="color:gold; margin-bottom: 0px;">
 +
Name goes here
 +
</p>
 +
<div class="fadediv2" style="margin-top: 4em; margin-left: 3em; width: 100%; height: 3px;"></div>
 +
<p class="erikaquotebox" style="margin-top: 0px;" >
 +
Text goes here.
 +
</p>
 +
</div>
 +
<pre>
 +
<div class="erikaquote">
 +
<p>
 +
{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/5/5d/Erikaquote.png | This is Erika's quote regarding this character as documented on the associated Johnisdead.com/listen/to page.}}
 +
<p class="erikaquotename" style="color:gold; margin-bottom: 0px;">
 +
CHARACTERNAME
 +
</p>
 +
<div class="fadediv2" style="margin-top: 4em; margin-left: 3em; width: 100%; height: 3px;"></div>
 +
<p class="erikaquotebox" style="margin-top: 0px;" >
 +
ERIKAQUOTE
 +
</p>
 +
</div>
 +
</pre>
 +
</div>
  
−
<span class="supple">"Supplemental explanation text."</span>
+
<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>
 +
<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>
 +
<ul>
 +
<li>
 +
Test
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<pre>
 +
<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>
 +
</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>
 +
<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>
 +
<pre>
 +
<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>
 +
</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.
 +
</div>
 
<pre>
 
<pre>
−
<span class="supple">"Supplemental explanation text."</span>
+
<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>
 
</pre>
 
</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]]
 
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 406: Line 702:
 
</p>
 
</p>
 
</pre>
 
</pre>
−
 
+
</div>
 
<p style="display:none;">
 
<p style="display:none;">
 
[[File:soon.png]]
 
[[File:soon.png]]
 
</p>
 
</p>

Latest revision as of 15:07, 4 October 2024

Below are various stylings that can be used on any page.

Templates are not listed on this page. For a list of usable templates, check the Template List.

Icon Styles

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

<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. target=_blank

<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. target=_blank

<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. target=_blank

<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>

Page Notices

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>

WIP Page

"NEW SIGNAL TURN ON. 4-9-20"

This page is still under construction.
Check back later for more updates. 

<div class="storyquote">
<p>
<img src="https://johnisdead.withinhubris.com/images/a/aa/Wip.gif" alt="" />
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
"NEW SIGNAL TURN ON. 4-9-20"
</p>[[Category:WIP Pages]]
<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 page is still under construction.<br />Check back later for more updates.</i>
</p>
</div>

Future WIP Page

"YOU DO NOT DESERVE TO BE HANDED INFORMATION"

Not much has been revealed about this topic yet within Johnisdead.
Check back later for more updates. 

<div class="storyquote" style="margin-bottom: 10px;">
<p>[[Category:Impending-WIP Pages]]
<img src="https://johnisdead.withinhubris.com/images/f/f7/D.gif" alt="" />
<p class="storyquotename" style="color: lightsteelblue; margin-bottom: 0em; margin-top: 0em; text-shadow: 0px 0px 4px blue; font-style: italic;">
"YOU DO NOT DESERVE TO BE HANDED INFORMATION"
</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;>Not much has been revealed about this topic yet within Johnisdead.<br />Check back later for more updates.</i>
</p>
</div>

General Page Use

Stylings for general use on just about any page.

Image Gallery

  • Caption here.

  • Caption here.

  • Caption here. 

<gallery>
File:FILENAME_AND_EXTENSION|CAPTION
File:FILENAME_AND_EXTENSION|CAPTION
File:FILENAME_AND_EXTENSION|CAPTION
</gallery>

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>

Listing / Archive (For Pages)

Alteration of the above styling. Allows for documentation of pages and page contents. This also supports different sections to be used if a page was updated consecutively .

11/11/11 - "https://johnisdead.com"

11:11 PM - First Iteration
Title:

John
Image:
Wiki.png
target=_blank
Audio:
Internet_Detectives.mp3


Video:
Wiki.mp4

Text:
"This is some page text."
Source:
"Text hidden in the source."
Other:
This page would redirect players. 

<div class="webArchive">
<p style="margin-bottom: 0.2em; margin-top: 0.2em;">
DATE - "URL"
</p>
<div class="webArchiveEntry"><poem>
TIMESTAMP - ITERATION<div class="fadediv"></div>Title:
<b>TITLE</b>
Image:
<b>IMAGE</b> 
<span class="ext-link">[[File:FILENAME|class=pageImg|link=URLHERE|target=_blank]]</span>
Audio: 
<b>AUDIO</b>
[[File:FILENAME]]
Video:
<youtube>URLHERE</youtube>
Text:
"<span class="canquote">PAGETEXT</span>"
Source:
"<span class="canquote">SOURCETEXT</span>"
Other:
TEXTHERE
</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>

Story Page Stylings

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

Quote Box (Old)

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>

Quote Conversation (Old)

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>

Quote Box

Character Name

Quoted text goes here.

<div class="quoteblock">
<div class="quotefullimg ">
<img src="IMAGE_GOES_HERE" alt="" />
</div>
<div class="quotetextholder">
<div class="quotename">
NAME_GOES_HERE
</div>
<div class="fadediv" style="margin-left: -10px; height: 3px;"></div>
<div class="quote">
<p>QUOTE_GOES_HEREE</p>
</div>
</div>
</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.

Username Jan 22 2015, 08:48 PM
Text goes here


<div class="WHspoiler">NAME <span style="float:right;">TIME</span></div><div class="WHspoilertext">TEXT</div>
Solved: Solved Cipher
<div class="WHsolved"><b>Solved:</b> Solved Cipher</div>

Name goes here

Text goes here. 

<div class="erikaquote">
<p>
{{#simple-tooltip-img: http://johnisdead.withinhubris.com/images/5/5d/Erikaquote.png | This is Erika's quote regarding this character as documented on the associated Johnisdead.com/listen/to page.}}
<p class="erikaquotename" style="color:gold; margin-bottom: 0px;">
CHARACTERNAME
</p>
<div class="fadediv2" style="margin-top: 4em; margin-left: 3em; width: 100%; height: 3px;"></div>
<p class="erikaquotebox" style="margin-top: 0px;" >
ERIKAQUOTE
</p>
</div>

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. Viewimage.png

!!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>

Soon.png

Retrieved from "https://johnisdead.withinhubris.com/index.php?title=Cheat_Sheet&oldid=12811"