WRITING - SCP Style Resource (EN)

Hello and welcome!

This is meant to be an ease-of-access, quick 'copy-paste' resource for alternative logs and formats for SCP files, in the same vein as Group-of-Interest Style guides for their individual formats. If you're looking for basic Wikidot formatting, go check out Wiki Syntax. For more advanced coding, check out the Advanced Formatting guide.

For the purposes of accruing multiple format bits, this will remain open for collaboration. Be sure to follow the presentation format here.

Note: This is not intended to be an exhaustive list. These templates do not have to be adhered to. Users are encouraged to branch out and experiment with any set-up they're most comfortable with.

Note: CSS Modules are only applied to a page after the page is refreshed. Previewing a page does not refresh the page. To see the effect of any modifications to a CSS Module, you must save the page.

Basic Article Template

[[>]]
[[module Rate]]
[[/>]]

**Item #:** SCP-XXXX

**Object Class:** Safe/Euclid/Keter (indicate which class)

**Special Containment Procedures:** [Paragraphs explaining the procedures]

**Description:** [Paragraphs explaining the description]

**Addendum:** [Optional additional paragraphs]

Interview Template

> **Interviewed:** [The person, persons, or SCP being interviewed]
> 
> **Interviewer:** [Interviewer, can be blocked out using █]
> 
> **Foreword:** [Small passage describing the interview]
> 
> **<Begin Log, [optional time info]>**
> 
> **Interviewer:** [speech]
> 
> **Person:** [speech]
> 
> [Repeat as necessary]
> 
> **<End Log, [optional time info]>**
> 
> **Closing Statement:** [Small summary and passage on what transpired afterward]

Note: When inserting block quotes with the > symbol, make sure you add a space after each > you use— otherwise your text won't show up as a block quote.

Test Log formats:

Option 1¹

What it looks like:

TEST TITLE STUFF
Subject	DATA HERE
Protocol	DATA HERE
Results	DATA HERE

What to copy:

+ show block

[[table  style="border-collapse:collapse; max-width: 600px;"]]
[[row]]
[[cell style="font-weight:bold;padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver; width: 20%;"]]
TEST TITLE STUFF
[[/cell]]
[[cell style="font-weight:bold; padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver;"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Subject
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Protocol
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; border: 1px solid black"]]
Results
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[/table]]

---

Option 2²

What it looks like:

Date	DATA	Effects	Notes
DATE	DATA	EFFECTS	NOTES
DATE	DATA	EFFECTS	NOTES
DATE	DATA	EFFECTS	NOTES
DATE	DATA	EFFECTS	NOTES
DATE	DATA	EFFECTS	NOTES
DATE	DATA	EFFECTS	NOTES

What to copy:

+ show block

[[table style="border: 1px solid silver"]]
[[row]]
[[hcell style="border: 1px solid silver"]]
Date
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
DATA
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Effects
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Notes
[[/hcell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[/table]]

Option 3

What it looks like:

+ click to replay

ACCESS GRANTED

CLASSIFIED

Experiment-XXXX

Subtitle

Purpose of the experiment: here is a "left" frame Result: wide frame

Subject: here is a "right" frame Date/Location: narrow frame

blockquote

bold: text text text link within blockquote

↓hr

---

h1

h2

h3

h4

h5

h6

h1

h2

h3

h4

h5

h6

false

What to copy:

+ show block

Tips! You can use "Login/Logout" formats (Option 1, Option 2-suboption) instead of the basic collapsible.

[[collapsible]]
[[include :scp-sandbox-3:component:classified-experiment
|experiment-title=Experiment-XXXX
|sub-title=Subtitle
|left=Purpose of the experiment:
here is a "left" frame

Result:
wide frame
|right=Subject:
here is a "right" frame

Date/Location:
narrow frame
|content=> = blockquote
> **bold:** text text text [https://www.google.com/ link within blockquote]
> = ↓hr
> ----
> +* h1
> ++* h2
> +++* h3
> ++++* h4
> +++++* h5
> ++++++* h6

+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
]]
[[/collapsible]]

attribute	required	allowed values	description
experiment-title	yes	text link	value of title
sub-title	no	text link	value of sub-title
content	yes	text link	also you can use wikidot syntax (like blockquote)
left	no	text link	wide frame
right	no	text link	narrow frame
warning	no	text	change "ACCESS GRANTED"

Option 4

What it looks like:

+ click to play

Wait 10 seconds…

SCiP NET_{ver. β}

Now loading...

TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT

What to copy:

[[collapsible show="+ load" hide="- stop"]]
[[include :scp-sandbox-3:component:3d-logo |header=true|title=SCiP NET|num=ver. β]]
TEXT TEXT TEXT
[[include :scp-sandbox-3:component:3d-logo |footer=true]]
[[/collapsible]]

Tips! You can use "Login/Logout" formats (Option 1, Option 2-suboption) instead of the basic collapsible.

Audio/Video Log Formats:

Option 1³

What it looks like:

Exploration Video Log Transcript

Date: OPTIONAL

Exploration Team: TEAM NAME - OPTIONAL

Subject: AREA/ANOMALY - OPTIONAL

Team Lead: OPTIONAL

Team Members: OPTIONAL

---

[BEGIN LOG]

Person A: Dialogue

Person B: Dialogue

STUFF HAPPENS

Person A: Dialogue

[END LOG]

What to copy:

+ show block

[[div style="display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px"]]
**Exploration Video Log Transcript**

**Date:** OPTIONAL

**Exploration Team:** TEAM NAME - OPTIONAL

**Subject:** AREA/ANOMALY - OPTIONAL

**Team Lead:** OPTIONAL

**Team Members:** OPTIONAL
-----

[BEGIN LOG]

**Person A:** Dialogue

**Person B:** Dialogue

//STUFF HAPPENS//

**Person A:** Dialogue

[END LOG]

[[/div]]

---

Option 2⁴

What it looks like:

VIDEO LOG

---

DATE:

NOTE:

---

[BEGIN LOG]

TIME: EVENT

TIME: EVENT

TIME: EVENT

---

[END LOG]

Tip! This style mimics the regular quoteboxes you see around the site (basic wiki formatting are lines beginning in "> "), but with the added benefit of working better with images.

What to copy:

+ show block

[[div style="display: inline-block; border:dashed 1px #999999; background:#F5F5F5; float:center; width:84%; padding:1px 15px; margin: 10px 10px 10px 40px"]]
= **VIDEO LOG**
----
**DATE:** 

**NOTE:** 
----

[BEGIN LOG]

**TIME:** EVENT

**TIME:** EVENT

**TIME:** EVENT

-----

[END LOG]

[[/div]]

---

Option 3⁵

For a computer-y look.

What it looks like:

| DETAILS
| DETAILS
| DETAILS
| DETAILS
| DETAILS

TEXT TEXT TEXT
MORE TEXT

MORE

AND MORE

AND YET EVEN MORE TEXT TO JOT DOWN

What to copy:

+ show block

IMPORTANT This part gets placed at the top of the page.

[[module css]]
.footnoteref{
color: #FF5555;
}
.danke{
padding: 5px 5px 5px 15px;
margin-bottom:10px;
width: 100%;
font-family: monospace;
font-size: 1.1em; }

.agent{
background-color:#002200;
border: 3px solid #55AA55;
color: #77CC77;
}

.site{
background-color:#222200;
border: 3px solid #AAAA55;
color: #DDDD77;
}
[[/module]]

IMPORTANT: This gets placed wherever you want the box to appear.

[[div class="danke agent"]]
| DETAILS
| DETAILS
| DETAILS
| DETAILS
| DETAILS

TEXT TEXT TEXT
MORE TEXT

MORE

AND MORE

AND YET EVEN MORE TEXT TO JOT DOWN
[[/div]]

Tips! Change 'danke agent' to 'danke site' for a different color scheme (yellow).

Option 4:

STUFF GOES IN HERE

+ show block

[[div style="background: gray; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;"]]

[[div style="background: white; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;"]]

STUFF GOES IN HERE

[[/div]]
[[/div]]

Option 5⁶

What it looks like:

AND MORE!

h1

h2

h3

h4

h5

h6

text
more text

more[]

What to copy:

+ show block

IMPORTANT This part gets placed at the top of the page.

[[module CSS]]
.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;animation: flicker 0.15s infinite;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes flicker {0% {opacity: 0.9890; }5% {opacity: 0.5842; }10% {opacity: 0.9865; }15% {opacity: 0.0412; }20% {opacity: 0.6255; }25% {opacity: 0.3157; }30% {opacity: 0.7328; }35% {opacity: 0.4654; }40% {opacity: 0.9128; }45% {opacity: 0.2449; }50% {opacity: 0.5485; }55% {opacity: 0.6438; }60% {opacity: 0.1180; }65% {opacity: 0.9085; }70% {opacity: 0.0266; }75% {opacity: 0.6795; }80% {opacity: 0.7812; }85% {opacity: 0.0117; }90% {opacity: 0.2239; }95% {opacity: 0.8897; }100% {opacity: 0.2260; }}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
[[/module]]

IMPORTANT: This gets placed wherever you want the box to appear.

[[div class="no-unfold"]]
[[div class="containercontainer"]]
[[div class="container"]]
+* [!-- DO NOT ERASE THIS "+*". --]
[[span_ class="overlay"]]
AND MORE!
[[/span]]
[[div_ class="overlayback"]]
[[/div]]

+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
text
more text

more[[span class="blinkbar"]][][[/span]]

[[/div]]
[[/div]]
[[/div]]

Option 6⁷

What it looks like:

PLAY

the first line
the second line
the final line
TEXT
MORE TEXT

What to copy:

+ show block

IMPORTANT:

• This part gets placed at the top of the page.
• When you want to add new "records", add new "options" like the following format.
  • .r3 {animation-delay: 9s;}
    .r4 {animation-delay: 12s;}

[[module CSS]]
/* //// When you want to add new "records", //// */
/* //// add new "options" like the following format. //// */
.r1 {animation-delay: 3s;}
.r2 {animation-delay: 6s;}

.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link
{animation-delay: calc(6s + 2s);}

.tape-record {position: relative;height: 6em;pointer-events: none;}.record {display: block;position: absolute;width: 100%;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;text-align: center;}.tape-wrap {position: relative;background-color: rgba(244, 244, 244, 1);border: 1px dashed #999;padding: 0 1em;}.tape-anim {position: relative;background-image: url("http://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/DoxYSJAV4AET63r.png");background-size: 200px;background-position: center center;background-repeat: no-repeat;min-height: 300px;}.tape-left,.tape-right {display: block;position: absolute;margin: auto;height: 0;width: 70px;padding-bottom: 100%;background-image: url("http://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/scp_trans.png");background-size: contain;background-position: center center;background-repeat: no-repeat;pointer-events: none;}.tape-left {top: -20px;bottom: 0;left: -70px;right: 0;animation-name: spin1;animation-duration: 15s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-right {top: 0;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-wrap .collapsible-block-unfolded-link {padding-top: 1em;}.tape-wrap .collapsible-block-folded,.tape-wrap .collapsible-block-unfolded-link {position: relative;text-align: center;}.tape-wrap .collapsible-block-link:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}.tape-wrap .collapsible-block-folded .collapsible-block-link:before {content: "\f04b";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link:before {content: "\f1da";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link {animation-name: g-ex;animation-duration: 1s;animation-fill-mode: forwards;visibility: hidden;opacity: 0;}.tape-wrap .collapsible-block-folded {padding-top: 1em;padding-bottom: 1em;}@keyframes g-ex {50% {visibility: visible;opacity: 0;}100% {visibility: visible;opacity: 1;}}@keyframes spin1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes record {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;}}@-moz-document url-prefix() {.tape-anim {height: 300px;}.tape-left,.tape-right {display: block;width: 70px;height: 70px;position: relative;margin: 0 auto;padding: 0 auto;}.tape-left {top: 105px;bottom: initial;left: -36px;}.tape-right {top: 60px;bottom: initial;left: 35px;}}
[[/module]]

IMPORTANT:

• This gets placed wherever you want the box to appear.
• When you want to add new "records", add new "options" like the following format.
  • [[span class="record r3"]]Text[[/span]]
    [[span class="record r4"]]//More text//[[/span]]

[[div class="tape-wrap"]]
[[collapsible show="PLAY" hide="RELOAD"]]
[[div class="tape-anim"]]
[[div class="tape-left"]]
[[/div]]
[[div class="tape-right"]]
[[/div]]
[[/div]]

[[div class="tape-record"]]
[[span class="record r1"]]//the first line//
//the second line//
//the final line//[[/span]]
[[span class="record r2"]]//TEXT//
//MORE TEXT//[[/span]]

[[/div]]
[[/collapsible]]
[[/div]]

Option 7

What it looks like:

I can't verify your wikidot ID.|

Click!

What to copy:

+ show block

IMPORTANT This part gets placed at the top of the page.

[[module CSS]]
#u-start, .textchange div.sitemember:nth-child(2) {display:none;}.type-wrap-wrapper {position: relative;text-align: left;}.type-wrapper {background: #555;}.typearea {color: lime; font-family: "Courier";font-size: 1.2em;margin: 10px 0 0 10px;white-space: nowrap;overflow: hidden;width: 0;}#u-start:target ~ .typearea {width: 100%;animation: type 4s steps(60, end); }.typearea a{color: lime;text-decoration: none;}.blink {animation: blink 1s infinite;}@keyframes type{ from { width: 0; } } @keyframes blink{to{opacity: .0;}}.buttonwrapper {text-align: center;}.likebutton {padding: 0.1em 0.5em;text-decoration: none;font-size: 1.3em;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}.likebutton:hover {background-color: #DDD;color: #000;border: 1px solid #0098b3;}
[[/module]]

IMPORTANT: This gets placed wherever you want the box to appear.

[[div class="type-wrap-wrapper"]]
[[div class="type-wrapper"]]
[[div id="u-start"]]
[[/div]]
[[div class="typearea"]]
[[div class="textchange"]]
[[module ListUsers users="."]]
[[div class="sitemember"]]
Your wikidot ID is "%%name%%".[[span class="blink"]]|[[/span]]
[[/div]]
[[/module]]
[[div class="sitemember"]]
I can't verify your wikidot ID.[[span class="blink"]]|[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="buttonwrapper"]]
[[a class="likebutton" href="#u-start"]]Click![[/a]]
[[/div]]
[[/div]]

Option 8⁸

What it looks like:

Terminal #001


------
Welcome, User
------

Links inside the terminal gain a ">" when you hover over them.
like this

Thanks for checking out my format!

What to copy:

+ show block

IMPORTANT: This is the CSS module. It goes at the top of the article.

[[module CSS]]

div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
/* black shadow at the top of the terminal */
    background-image: 
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
/* shadow around the terminal */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
/* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
/* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text{
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
    }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* Same as above.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
content: "> ";
}
[[/module]]

IMPORTANT: This is the terminal itself. This can go anywhere.

[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Terminal #001__[[/size]]
@@ @@
@@ @@
@@------@@
Welcome, User
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Links inside the terminal gain a ">" when you hover over them.
> [http://www.google.com like this]

Thanks for checking out my format!
@@ @@
@@ @@
[[/div]]
[[/div]]

Warning/Notice formats:

Option 1⁹

What it looks like:

NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION

Notification text goes here.

— Maria Jones, Director, RAISA

What to copy:

+ show block

[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
++++ NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION 

Notification text goes here.

-- Maria Jones, Director, RAISA
[[/=]]
[[/div]]

Option 2¹⁰

What it looks like:

WARNING: THE FOLLOWING FILE IS LEVEL #/XXXX CLASSIFIED

---

ANY ATTEMPT TO ACCESS THIS FILE WITHOUT LEVEL #/XXXX AUTHORIZATION WILL BE LOGGED AND WILL LEAD TO IMMEDIATE DISCIPLINARY ACTION.

What to copy:

+ show block

[[=]]
[[div style="background: url(http://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat ; float: center; border: solid 2px #000000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]] 
+ WARNING: THE FOLLOWING FILE IS LEVEL #/XXXX CLASSIFIED
----
+++ ANY ATTEMPT TO ACCESS THIS FILE WITHOUT LEVEL 4/XXXX AUTHORIZATION WILL BE LOGGED AND WILL LEAD TO IMMEDIATE DISCIPLINARY ACTION.
[[/div]]
[[/=]]

Note: This code includes a link to include a background image, which was deleted at some point. If you want to leave this warning message with a white background you can keep the code the way it, but if you want to include the intended image you can replace in the link in the code with the link here.

Option 3:

What It Looks Like:

BY ORDER OF THE OVERSEER COUNCIL

The following file is Level X/XXXX classified. Unauthorized access is forbidden.

XXXX

What To Copy:

+ show block

[[div style="background: url(http://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]

@@ @@
@@ @@

@@ @@

@@ @@

[[=]]
++* ##black|BY ORDER OF THE OVERSEER COUNCIL##
##black|The following file is Level X/XXXX classified. Unauthorized access is forbidden.##
[[/=]]
= **##black|XXXX##**

@@ @@

@@ @@

[[/div]]

Option 4:¹¹

What It Looks Like:

title

subtitle

description description description description description description description description description description description description description description description description description description

XXXX

What To Copy:

+ show block

[[div class="orderwrapper"]]
[[div class="council1"]]
[[/div]]
[[div class="ordertitle"]]
+* title
[[/div]]
[[div class="orderdescription"]]
 _
+* subtitle
description description description description description description description description description description description description description description description description description description description description description description description description description description description description description description description description 
[[/div]]
[[div class="itemno"]]
+* XXXX
[[/div]]
[[/div]]

[[module CSS]]
.orderwrapper {position: relative;width: auto;text-align: center;}.council1 {position: relative;top: 0;bottom: 0;left: 0;right: 0;width: 295px;height: 295px;margin: auto;background-image: url( "http://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png" );background-size: 295px 295px;background-repeat: no-repeat;background-position: center;}.ordertitle {position: absolute;left: 0;right: 0;top: 38px;}.ordertitle h1 {font-size: 220%;color: #555;}.orderdescription {position: absolute;left: 0;right: 0;top: 85px;width: 100%;}.orderdescription p {font-size: 90%;color: #555;}.orderdescription h1 {font-size: 120%;color: #555;}.itemno {position: absolute;left: 0;right: 0;bottom: 27px;}.itemno h1 {font-size: 170%;color: #555;}
[[/module]]

Option 5:¹²

What It Looks Like:

What To Copy:

+ show block

Note: You must fill out all forms.

Alternative Header Format

Option 1:

What it looks like:¹³

Item #: SCP-XXXX	Level 4/XXXX
Object Class: Euclid	Classified

---

SCP-XXXX.

---

What to copy:

+ show block

[[table style="border: none; width: 100%;"]]
[[row]]
[[cell]]
[[size 125%]]**Item #:** SCP-XXXX[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Level 4/XXXX**##[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell]]
[[size 125%]]**Object Class:** Euclid[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Classified**##[[/size]]
[[/cell]]
[[/row]]
[[/table]]
----

[[div class="scp-image-block block-center scp-clear-false" style="width:100%;"]]
[[image image.jpg style="width:100%;" link=#]]
[[div class="scp-image-caption" style="width:100%;"]]
SCP-XXXX.
[[/div]]
[[/div]]
[[module CSS]]
@media (max-width: 768px) {
.scp-clear-true.scp-image-block {
float: none;
clear: both;
margin-left: auto;
margin-right: auto;
}
}
[[/module]]

----

Note: Replace 'image.jpg' with the name/url of the image you're using. Remember that this type of image-box will widen the image to occupy 100% of the article's width.

Option 2:¹⁴

What it looks like:

+ show block

Level 1:

---

Level 2:

---

Level 3:

---

Level 4:

---

Level 5:

---

[Big thanks to TSATPWTCOTTTADC for fixing headers 1 and 3.]

What to copy:

+ show block

[[image header1/2/3/4/5.png]] (Specify Image)

------

Note: This code does not include the image file. Either upload it into the article or copy the image's address from here.

Option 3:¹⁵

What it looks like:

1/7777 LEVEL 1/7777 CLASSIFIED

Item #: SCP-7777 Object Class: Euclid

+ In addition to this...

2/7777-RU LEVEL 2/7777-RU CLASSIFIED

Объект №: SCP-7777-RU Класс объекта: Евклид

3/7777-KO LEVEL 3/7777-KO CLASSIFIED

일련번호: SCP-7777-KO 등급: 유클리드(Euclid)

4/CN-7777 LEVEL 4/CN-7777 CLASSIFIED

项目编号: SCP-CN-7777 项目等级: Euclid

5/7777-FR LEVEL 5/7777-FR CLASSIFIED

Objet # : SCP-7777-FR Classe : Euclide

1/7777 LEVEL 1/7777 CLASSIFIED

Item #: SCP-7777 Object Class: Euclid Safe

What to copy:

+ show block

[[include :scp-wiki:component:classified-decoration
|lv=1/2/3/4/5
|item=7777
|oc=Euclid
|lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
]]

[[include :scp-wiki:component:classified-decoration
|lv=1
|item=7777
|oc=--Euclid--
+* Safe
|lang=EN
]]

Or you want to change the text of "LEVEL" and "CLASSIFIED"?

[[include :scp-wiki:component:classified-decoration
|lv=1/2/3/4/5
|item=7777
|oc=Euclid
|lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
|trans-level=<the translation equivalent of "LEVEL" in your language>
|trans-classified=<the translation equivalent of "CLASSIFIED" in your language>
]]

Option 4:

What it looks like:

Item #: SCP-XXXX		Object Class: Keter
Level 4 Clearance		Threat Level: Red ●

What to copy:

+ show block

[[include :smlt:component:aers:classification-stuff
|item=XXXX
|lvl=4
|class=Keter
|threat=Red
|threat-colour=#b01 [!-- This is colour of the little ball. If you're unsure, keep it the same as the threat. --]
]]

Option 5:¹⁶

What it looks like:
Threat Level: Black

^{(Click me!)}

+ And in other colours...

Threat Level: White

Threat Level: Red

What to copy:

+ show block

[[a href="*http://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp" style="font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;"]]
[[span_ style="display: inline-block; width: 100%; background-color: black; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;"]]
**Threat Level:** Black
[[/span]]
[[/a]]

Note: To change the colour, simply fill the "background-color" field with white/blue/green/yellow/orange/red/black. Colours with higher/lower contrast may require you to change the text "color" field to white/black for readability.

Note: This works best with other alternative header styles, as seen above. Based on the French Branch's Threat Level classifications.

Option 6:

What it looks like:

Warning!

This component was migrated to the main wiki.

see: http://scp-wiki.wikidot.com/component:cd-ver2

+ other level...

Warning!

This component was migrated to the main wiki.

see: http://scp-wiki.wikidot.com/component:cd-ver2

What to copy:

+ show block

[[include :scp-sandbox-3:component:cd-ver2
|lv=6
|item=SCP-XXXX
|class=Thaumiel
|site-responsible=Site-%E2%96%88%E2%96%88
|director=N/A
|research-head=N/A
|assigned-task-force=N/A
]]

Note: The value of |lv can be inserted 0 to 6.
Very Important Note: This module is limited to insert characters without only alphabet, numbers and a few symbol (due to malfunction in Edge). If you want to use them, please encode them by using following tool!

Option 7:

What it looks like:

+ other levels...

What to copy:

+ show block

[[include :topia:svgheader1-inc
|lv=3
|threat=green
|item=XXXX
|oc=Euclid
]]

[[include :topia:svgheader1-inc
|lv=6
|threat=green
|item=XXXX
|oc=Euclid
|oc2=Thaumiel
]]

• lv: 0 - 6
• threat: white/blue/green/orange/red/black

"Paper/Note" formats

Option 1¹⁷

What it looks like:

Document body here. You will need to use " " on new lines to properly space text.

Like so.

You can use [[<]], [[=]], and [[>]] to align different lines/paragraphs to give proper feel.

Enjoy.

What to copy:

+ show block

IMPORTANT This goes at the top of your page:

[[module css]]
.page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    font-style: normal;

    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;

    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
    }
.page p,
.page ul {
    line-height: 20px;
    margin: 0;
}
[[/module]]

IMPORTANT This goes where you want the box to appear:

[[div class="page"]]

Document body here. You will need to use "@@ @@" on new lines to properly space text.
@@ @@
Like so.
@@ @@
You can use [[<]], [[=]], and [[>]] to align different lines/paragraphs to give proper feel. 
@@ @@
[[>]]
Enjoy.
[[/>]]
[[/div]]

"Login/Logout" formats

Option 1¹⁸¹⁹

What it looks like:

ID

11a3354e2cb703de75e583c95363e218_1680126888

PASSWORD

e32a40a25d76373abf0fa3950e6eddbd_1680126888

Login

text

What to copy:

+ show block

IMPORTANT: This goes at the top of your page:

[[module CSS]]
.fakeprot .mailform-box .buttons{display:none;}
.fakeprot + .collapsible-block .collapsible-block-link {padding: 0.1em 0.5em;text-decoration: none;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:hover {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:active {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-unfolded-link{margin:0.5em 0;text-align: center;}
.fakeprot + .collapsible-block .collapsible-block-folded{margin:0.5em 0;text-align: center;}
.fakeprot .passw input[type=text] {text-security:disc;-webkit-text-security:disc;-mox-text-security:disc;}
.mailform-box td:first-child {width: 80px;}
[[/module]]

IMPORTANT: This goes where you want the form to appear:

[[div class="fakeprot"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# name
 * title: ID
 * default: <YOUR ID>
 * type: text
 * rules:
  * required: true 
  * maxLength:10
  * minLength: 100
[[/module]]
[[div class="passw"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# affiliation
 * title: PASSWORD
 * default: ・・・・・・・・・
 * rules:
  * required: true 
  * maxLength:10
  * minLength: 100
[[/module]]
[[/div]]
[[/div]]
[[collapsible show="Login" hide="Logout"]]
text
[[/collapsible]]

Option 2

What it looks like:

What to copy:

+ show block

[[html]]
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Verdana;}
* {box-sizing: border-box;}
 
.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
 
}
 
.input-field:focus{
border-style: solid;
transition: 0.5;
border-color: maroon;
border-width: 2px;
 
}
 
.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    transition: 0.5s;
 
}
 
.btn:focus {
  outline: 0;
}
 
.btn {
  background-color: Maroon;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 50%;
  opacity: 0.9;
  transition: 0.09s;
  border-radius: 3px;
  transition 0.8s;
}
 
.btn:hover {
  opacity: 1;
  transition: 0.8s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.7);
}
 
.btn:active {
  transition: 0.09s;
  transform: translateY(1px);
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
 
.btn2 {
    background-color: white;
    border: none;
    cursor: pointer;
 
}
 
p{
font-family: Helvetica;
margin-bottom: 5%;
}
</style>
</head>
<body>
 
<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<p style="font-size:55px; font-weight: bold;">SCiPNET LOGIN</p>
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
 
  <div class="input-container">
    <input onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;" class="input-field" type="password" placeholder="Password">
  </div>
 
   <button id="start_button" class="btn btn-success" onclick="window.open('REPLACE THIS TEXT WITH A URL TO WHERE YOU WANT THE LOGIN BUTTON TO TAKE YOU','_parent')" disabled> Login</button>
 
<br></br>
   <button style= "font-weight: bold;" class="btn2 btn-success"> Forgot password?</button>
 
</form>
</body>
</html>
[[/html]]

IMPORTANT:

• The login button won't redirect if the password field is empty.
• This login format is made for articles that use offsets. Change the placeholder text to the proper offset link for your article.

Option 2-suboption
What it looks like:

SCiPNET LOGIN

name
affiliation

3f29f68a5db82071f640faa98e074133_1680126888

link

SCiPNET LOGIN

name
affiliation

3f29f68a5db82071f640faa98e074133_1680126888

Login

collapsible

text

What to copy:

+ show block

link option: insert your page's url (or "/ + pagename") into "url"

[[include :scp-sandbox-3:component:login-module |url=http://www.scp-wiki.net/scp-style-resource|id=<YOUR ID>|pw=<YOUR PASSWORD>|disc=true|value=link]]

collapsible option: insert collapsible between the module

[[include :scp-sandbox-3:component:login-module |id=<YOUR ID>|pw=<YOUR PASSWORD>|disc=true]]
[[collapsible show="collapsible" hide="Logout"]]
text
[[/collapsible]]

another… ?

attribute	required	allowed values	description
id	yes	text	value of ID
pw	yes	text	value of PASSWORD
url	no	http://example.com /pagename	when not defined, link button is hidden
value	no	text	value of link button
disc	no	true	when defined, your password is not printed
title	no	text link	value of title

Custom Image Block Format

Option 1²⁰

What it looks like:

Hover your mouse over the image to make it enlarge.

What to copy:

+ show block

[[include :scp-sandbox-3:image-zoom name={$name}|caption={$caption}|width=300px|align=right]]

Change {$name} to the filename or link to the image. Change {$caption} to the text you want under the image. The width and alignment are set to the standard for SCP articles, but those can be changed as well.

Option 2²¹

What it looks like:

Hover your mouse over the image to view it.

What to copy:

+ show block

[[include :scp-sandbox-3:image-blur name={$name}|caption={$caption}|width=300px|align=right]]

Change {$name} to the filename or link to the image. Change {$caption} to the text you want under the image. The width and alignment are set to the standard for SCP articles, but those can be changed as well.

Option 3²²

What it looks like:

Click and hold to enlarge the image.

What to copy:

+ show block

[[include :scp-sandbox-3:component:image-zoom-2 name={$name}|caption={$caption}|width=300px|align=right]]

IMPORTANT: This will not work properly unless your image has .png or .jpg as a file extension.

Change {$name} to the filename or link to the image. Change {$caption} to the text you want under the image. The width and alignment are set to the standard for SCP articles, but those can be changed as well.

Image Carousel

A selection of images with no inherent meaning or hidden message.

Instructions for use can be found here.

Useful tool for the sandbox page

Option 1

What it looks like:

Show the tool

What to copy:

EN: [[include :scp-sandbox-3:component:usefultool-module]]
CN:²³ [[include :scpsandboxcn:component:usefultool-module]]
KO:²⁴ [[include :sandbox.scp-wiki.kr:component:usefultool-module-ko]]
JP:²⁵ [[include :scp-jp-sandbox2:component:usefultool-module]]

IMPORTANT: This part gets placed at the bottom of the page.

Option 2

What it looks like:

+ show block

 
 
 

edit


view source


history


files

 
 

Table of Contents

---

Show the tool

What to copy:

[[include :smlt:7happy7:ut-ver2]]
|home=http://YOUR-HOMEPAGE.com
]]

Blackbox formats

Option 1²⁶
What It Looks Like:
This is a format to let you blackbox information and let it be visible over a mouseover.

What To Copy:

[[span class="bblock"]]text here[[/span]]

How To Adjust It:
This code lets you adjust the color of the mouseover text.

[[module CSS]]
.bblock:hover {color: white}
[[/module]]

Option 2
What It Looks Like:
This changes the color of the background on mouseover, rather than the text.

What To Copy:

[[span class="dblock"]]text here[[/span]]

How To Adjust It:
This code lets you adjust the color of the mouseover background.

[[module CSS]]
.dblock:hover {background: #f4f4f4}
[[/module]]

"today's date" format

Option 1²⁷
What It Looks Like:

normal (display to "m")

sample: Today's date is .

[[div class="normalFontTime"]]
sample: Today's date is [[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/1 width="120" scrolling="no"]].
[[/div]]

+ The others...

normal (display to "s")

sample:

[[div class="normalFontTime"]]
sample: [[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/2 width="130" scrolling="no"]]
[[/div]]

h1 (display to "m")

sample:

[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/3 width="230" height="25" scrolling="no"]]

h1 (display to "s")

sample:

[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/4 width="260" height="25" scrolling="no"]]

bold (display to "m")

sample:

[[div class="normalFontTime"]]
[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/5 width="140" height="16" scrolling="no"]]
[[/div]]

bold (display to "s")

sample:

[[div class="normalFontTime"]]
[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/6 width="160" height="16" scrolling="no"]]
[[/div]]

How to introduce:

+ show block

IMPORTANT: This goes at the top of your page:

[[module css]]
@import url(http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/7);
[[/module]]

When you install the above code, now you′re ready! You can use these iframes.

Option 2
What It Looks Like:

Today's date is 29 Mar 2023 21:34… maybe!

What to copy:

+ show block

[[module ListPages limit="1" category="*" order="updated_at desc"]]
> Today's date is %%updated_at|%Y/%m/%d%%... maybe!
[[/module]]

Discord Chat Formatting

Option 1:

What it looks like:

GOTO 20

Today at 4:28 PM

yo, Corvus, you around?

Corvas

Today at 4:28 PM

ya
what's up @GOTO 20

New Messages

GOTO 20

Today at 4:29 PM

Here is an image

GOTO 20

Today at 4:30 PM

mv_sk1r.tar.gz

2.71 KB

corvas

Today at 5:20 PM

butts.zip

512 MB

What to copy:

Full explanation and code available here.

Option 2:

What it looks like:

…..⇒ . @Rainer's a soft boi entered the arena!

---

A-paul-yon Today at 12:00 AM
Yo, @Rainer's a soft boi
Check this.

---

Rainer's a soft boi Today at 12:00 AM
That's pretty cool, but consider the following:

There is no ethical consumption under capitalism.

What to copy:

+ show block

IMPORTANT: This is the CSS module that goes at the top of the article.

[[module CSS]]
.discord-nagi {display:block; background:#363940; color: #DADBDC; padding: 5px 10px 5px 10px;}
.quote {background-color: #2F3136;border: solid 3px #2B2C31;border-radius: 10px;color: #7C8C8E; padding: 0px 5px 0px 5px; width: 85%; margin: 0px 0px 5px; font-size: 110%}
.highlight {background-color: black; color: white; font-family:monospace; font-size: 125%}
.user1 {font-weight: bold;color: #c0e3ea}
.user2 {font-weight: bold;color: #ff0066}
.tag {color: #7289DA}
[[/module]]

This is the code for the chat itself. Put it where it should appear in the article.

[[div class="discord-nagi"]]
[[size 110%]]##363940|.....##[[/size]][[size 200%]]##lightgreen|⇒##[[/size]] [[size 125%]]##363940|.## ##7289DA|@Rainer's a soft boi## entered the arena![[/size]]
------
[[span class="user1"]]A-paul-yon[[/span]] [[size 75%]]##5B5E63|Today at 12:00 AM##[[/size]]
Yo, [[span class="tag"]]@Rainer's a soft boi[[/span]]
[[span class="highlight"]]Check this.[[/span]]
------
[[span class="user2"]]Rainer's a soft boi[[/span]] [[size 75%]]##5B5E63|Today at 12:00 AM##[[/size]]
That's pretty cool, but consider the following:
[[div class="quote"]]
There is no ethical consumption under capitalism.
[[/div]]
[[/div]]

Option 3:
Wow, it's literally as awful as Light mode normally looks.

What it looks like:

…..⇒ . @Rainer's a soft boi entered the arena!

---

A-paul-yon Today at 12:00 AM
Yo, @Rainer's a soft boi
Check this.

---

Rainer's a soft boi Today at 12:00 AM
That's pretty cool, but consider the following:

There is no ethical consumption under capitalism.

What to copy:

+ show block

IMPORTANT: This is the CSS module. It goes at the top of the article.

[[module CSS]]
.light {display:block; background:#FFFFFF; color: #DADBDC; padding: 5px 10px 5px 10px; border: solid 1px black}
.lightquote {color: #839496; background-color: #F8F9F9;border: solid 3px #EBEDEF;border-radius: 10px; padding: 0px 5px 0px 5px; width: 85%; margin: 0px 0px 5px; font-size: 110%}
.lighthighlight {background-color: #F8F9F9; color: #939BA6; font-family:monospace; font-size: 125%}
.user1 {font-weight: bold;color: #c0e3ea}
.user2 {font-weight: bold;color: #ff0066}
.tag {color: #7289DA}
[[/module]]

This is the code for the chat itself. Put it where it should appear in the article.

[[div class="light"]]
[[size 110%]]##white|.....##[[/size]][[size 200%]]##lightgreen|⇒##[[/size]] [[size 125%]]##white|.## ##7289DA|@Rainer's a soft boi## entered the arena![[/size]]
------
[[span class="
[[span class="user1"]]A-paul-yon[[/span]] [[size 75%]]##5B5E63|Today at 12:00 AM##[[/size]]
Yo, [[span class="tag"]]@Rainer's a soft boi[[/span]]
[[span class="lighthighlight"]]Check this.[[/span]]
------
[[span class="user2"]]Rainer's a soft boi[[/span]] [[size 75%]]##5B5E63|Today at 12:00 AM##[[/size]]
That's pretty cool, but consider the following:
[[div class="lightquote"]]
There is no ethical consumption under capitalism.
[[/div]]
[[/div]]

Extended Wikidot-modules

ListUsers module

Option 1 (ListUsers for non-wikidot users):

What it looks like:

guest

Note: If you are the wikidot user, the module show your ID; if not, the module show "guest".

What to copy:

+ show block

[[include :topia:listusers-1 users="."]]
##red|%%name%%##
[[include :topia:listusers-2]]
##blue|guest##
[[include :topia:listusers-3]]

Option 2 ([[include]] method with ListUsers' variables):²⁸

What it looks like:²⁹

SCP-XXXX and… I don't know who you are.

What to copy:

+ show block

[[module ListUsers users="."]]
[[include :topia:inc-loop c=__________|p=<include-src>]]
|<value>=%%name%%
]]
[[/module]]

---

sample:
[[include :topia:listusers-1 users="."]]
[[include :topia:inc-loop c=__________|p=component:image-block]]
|name=http://scp-wiki.wdfiles.com/local--files/scp-3935/school.png
|align=center
|width=100%
|caption=SCP-XXXX… and you are //%%name%%//.
]]
[[include :topia:listusers-2]]
[[include component:image-block
|name=http://scp-wiki.wdfiles.com/local--files/scp-3935/school.png
|align=center
|width=100%
|caption=SCP-XXXX and… I don't know who you are.
]]
[[include :topia:listusers-3]]

ACS Header (Anomaly Classification System)

Click here to learn what this is for.

Original author: Woedenaz

What it looks like:

Item#: XXXX

Level#

Containment Class:

euclid

Secondary Class:

none

Disruption Class:

vlam

Risk Class:

warning

link to memo

What to copy:

+ show block

Click here for a full guide.

[[include :scp-wiki:component:anomaly-class-bar-source

|item-number= XXXX

|clearance= #

|container-class= euclid

|secondary-class= none

|secondary-icon= http://acsurlexample.com/image.svg

|disruption-class= vlam

|risk-class= warning

]]

[[/code]]

Modifying Scrollbars

What it looks like: Dr. Wondertainment Theme and Wilson's Wildlife Solutions Theme

What to copy:

+ show block

[[module CSS]]
::-webkit-scrollbar-thumb
{
    [properties]; /* This can be almost anything, from the scrollbar color to border radius to adding an outline. Included below is the code from Nagiros' PoI File for reference. */
    background: rgba(247,168,184, .5);
    border-radius: 5px;
    border: 1px solid black;
}
[[/module]]

Mobile Sidebar Button Reformatting

What it looks like: Wilson's Wildlife Solutions Theme and Nagiros' PoI File

What to copy:

+ show block

[[module CSS]]
@media (max-width: 767px) {
    .open-menu a {
         /* If you do not want to change a particular color, delete the relevant line. */
         border: 0.2em solid COLOR !important; /* This affects the circular border. */
         background-color: COLOR !important; /* This affects the interior color. */
         color: COLOR !important; /* This affects the color of the bars inside the circle. */
    }
}
[[/module]]

Amateur Countdown Timer

What it looks like:

What to copy:

+ show block

[[html]]
<script type="text/javascript">
today = new Date();
BigDay = new Date("Month dayofmonth, year"); // Change date to the day you would like to countdown to
msPerDay = 24 * 60 * 60 * 1000 ;  // Vbs
timeLeft = (BigDay.getTime() - today.getTime());// Vbs
e_daysLeft = timeLeft / msPerDay;// Vbs
daysLeft = Math.floor(e_daysLeft);// Vbs
e_hrsLeft = (e_daysLeft - daysLeft)*24;// Vbs
hrsLeft = Math.floor(e_hrsLeft);// Vbs
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);// Vbs
document.write("There are only " + daysLeft + " days,  " + hrsLeft +" hours, and " + minsLeft + "  minutes</H4> until ... <P>"); 
// I started this from something I got from moonfruit.com  Credits for them. 
</script>
[[/html]]

Nesting Collapsibles

What it looks like:

• • _
  + A- A

  AAAAAAAAAAAAAAAAAAA!

  • • _
    + More A?- AAAAAAAA

    A

What to copy:

+ show block

[[include :scp-int:component:coltop show=SHOW TEXT |hide=HIDE TEXT]]
[[include :scp-int:component:coltop show=SHOW TEXT |hide=HIDE TEXT]]
[[include :scp-int:component:colend]]
[[include :scp-int:component:colend]]

False Links/Collapsibles

What it looks like:³⁰

+ Access █K-class "Dance of a Thousand (DATA EXPUNGED)" Archived File

www.serpents-hand.org

What to copy:

+ show block

[# Link text.]

Email Template

What it looks like:³¹

---

Access SCiPNET Email? One (1) new message!

To: Researcher Natalie Reems
From: Researcher Tonya Skyler
Subject: SUBJECT

---

OwO

NEW MESSAGE!

To: Researcher Tonya Skyler
From: Researcher Natalie Reems
Subject: Re:SUBJECT

---

UwU

What to copy:

+ show block

IMPORTANT: This goes at the top of your page.

[[module CSS]]
.blinkbar {color: red;font-size:125%; animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes flicker {0% {opacity: 0.9890; }5% {opacity: 0.5842; }10% {opacity: 0.9865; }20% {opacity: 0.0412; }20% {opacity: 0.6255; }25% {opacity: 0.3157; }30% {opacity: 0.7328; }35% {opacity: 0.4654; }40% {opacity: 0.9128; }45% {opacity: 0.2449; }50% {opacity: 0.5485; }55% {opacity: 0.6438; }60% {opacity: 0.1180; }65% {opacity: 0.9085; }70% {opacity: 0.0266; }75% {opacity: 0.6795; }80% {opacity: 0.7812; }85% {opacity: 0.0117; }90% {opacity: 0.2239; }95% {opacity: 0.8897; }100% {opacity: 0.2260; }}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
.collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {float: center; border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px 10px 10px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
a.collapsible-block-link { font-weight: bold; }
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
[[/module]]

IMPORTANT: This goes where you want the email exchange.

[[=]]
------
[[collapsible show="Access SCiPNET Email? One (1) new message!" hide="Re:SUBJECT"]]
[[<]]
[[div class="email"]]
[[div class="tofrom"]]
**To:** Researcher Natalie Reems
**From:** Researcher Tonya Skyler
**Subject:** SUBJECT
[[/div]]
------
OwO
[[/div]]
@@ @@
[[=]]
[[span class="blinkbar"]]NEW MESSAGE![[/span]]
[[/=]]
@@ @@
[[div class="email"]]
[[div class="tofrom"]]
**To:** Researcher Tonya Skyler
**From:** Researcher Natalie Reems
**Subject:** Re:SUBJECT
[[/div]]
------
UwU
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]

Fadeout Page Contents

Option 1:

What it looks like:

Page-Content not to Erase

Page-Content to Erase

Page-Content not to Erase

Page-Content to Erase

CLICK to FADEOUT

Page-Content not to Erase

What to copy:

+ show block

---

CSS Module

You can custom some elements with variables.

[[module css]]
@import url('http://smlt.wdfiles.com/local--code/ukwhatn%3Afadeout/1');

/*== VARIABLES ==*/
:root {

  /* Background Color (Default: white) */
  --fadeout-background: white;

  /* FadeOut Duration */
  --fadeout-time: 1s;

  /* Cropped Header (To erace the shadow under the header)
      If you use themes other than Sigma-9(Default), pls change this variable. */
  --cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);

}

[[/module]]

Fade-out Part

Only the elements in fadeout-wrapper are erased.
[[span class="escape"]]text[[/span]] is not erased. It can be used any number of times and is not limited in size.

Page-Content not to Erase

[[div_ class="fadeout-wrapper"]]

Page-Content to Erase

[[span class="escape"]]Page-Content not to Erase[[/span]]

Page-Content to Erase

[[collapsible show="CLICK to FADEOUT" hide=" "]]
[[div class="cover"]]
@@@@
[[/div]]
[[/collapsible]]
[[/div]]
Page-Content not to Erase

Option 2: Display image after fading out³²

What it looks like:

Page-Content not to Erase

Page-Content to Erase

CLICK to FADEOUT

Page-Content not to Erase

What to copy:

+ show block

---

CSS Module

You can custom some elements with variables.

[[module css]]
@import url('http://smlt.wdfiles.com/local--code/ukwhatn%3Afadeout/1');

/*== VARIABLES ==*/
:root {

  /* Background Color (Default: white) */
  --fadeout-background: white;

  /* FadeOut Duration */
  --fadeout-time: 1s;

  /* Image FadeIn Duration (For Option2) */
  --img-fadein-time: 1s;

  /* Image Fadein Delay (For Option2) */
  --img-fadein-delay: 2s;

  /* Cropped Header (To erace the shadow under the header)
      If you use themes other than Sigma-9(Default), pls change this variable. */
  --cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);

}

[[/module]]

Fade-out Part

Only the elements in fadeout-wrapper are erased.
[[span class="escape"]]text[[/span]] is not erased. It can be used any number of times and is not limited in size.

Page-Content not to Erase

[[div_ class="fadeout-wrapper"]]

Page-Content to Erase

[[collapsible show="CLICK to FADEOUT" hide=" "]]

[[div class="cover"]]
@@ @@
[[/div]]

[[div_ class="fadein-img"]]
[[=image [image URL]]]
[[/div]]

[[/collapsible]]

[[/div]]
Page-Content not to Erase

---

• • _
  批評コメント批評コメント

  
  コメント投稿フォームへ

  批評コメントTopへ

  - hide block

ERROR

The ukwhatn's portal does not exist.

エラー:	ukwhatnのportalページが存在しません。利用ガイドを参照し、portalページを作成してください。

利用ガイド

1. portal:3396310 (05 Aug 2021 16:19)

Footnotes

1. As seen in SCP-2682

2. As seen in SCP-2832

3. As seen in SCP-1730

4. As seen in SCP-2571

5. As seen in SCP-2409.

6. As seen in When Dandelions Bloom(tale-jp)

7. As seen in Audio cassette #1006-1(tale-jp), SPC-710-JP, and SCP-3648
※SCP-3648 uses only the audio cassette animation.
※The audio cassette image is created by indonootoko from the JP branch.

8. As seen in SCP-4224, SCP-3241 & Automated Passive Amnestization System Ver. 17.09.

9. As seen in SCP-835

10. As seen in SCP-3143

11. As seen in SCP-001-JP

12. As seen in SCP-4051.

13. Image stolen from djkaktus's SCP-3935.

14. As seen in SCP-2983 and others to come.

15. As seen in SCP-1970-JP, SCP-1370-JP, and SCP-4260.

16. As seen in EE-3570 and SCP-4792. Credit to Yossipossi, Lt Flops, and KindlyTurtleClem.

17. As seen in SCP-4003

18. Source: http://scp-jp-sandbox2.wikidot.com/inc:fakeprot
Original Author: Nanimono Daemon does not match any existing user name

19. As seen in SCP-1370-JP.

20. As seen in SCP-4224, SCP-4577, and SCP-3662

21. As seen in ERROR: Field Cannot Be Lloyd

22. As seen in Hawks n Artworks

23. Translated into SCP-CN by Sekai_s

24. Translated into SCP-KO by Aiken Drum

25. Translated into SCP-JP by 7happy7

26. Credit for both of these goes to Nanimono Daemon does not match any existing user name.

27. Credit goes to C-take from the JP branch.
Source: http://shitake-crude-production.wikidot.com/javascript:timeviewer

28. Source: http://smlt.wikidot.com/boyu12:inc-loop
Original Author: Boyu12

29. Image stolen from djkaktus's SCP-3935.

30. As seen in SCP-4415.

31. As seen in Automated Passive Amnestization System Ver. 17.09, The Beast Beneath The Library, and SCP-4415.

32. Sample image is Wide Hiking Path under the CC0