SCP by Series
Other SCP
Feed
Stories
Discovery
Random
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 outWiki Syntax. For more advanced coding, check out theAdvanced 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.
See Also
Table of Contents |
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][[footnoteblock]][[div class="footer-wikiwalk-nav"]][[=]]<< [[[SCP-XXXW]]] | SCP-XXXX | [[[SCP-XXXY]]] >>[[/=]][[/div]]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 11
What it looks like:
| TEST TITLE STUFF | |
| Subject | DATA HERE |
| Protocol | DATA HERE |
| Results | DATA HERE |
What to copy:
[[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 22
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:
[[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]]Audio/Video Log Formats:
Option 13
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:
[[div class="blockquote"]]= **VIDEO LOG**----**DATE:** **NOTE:** ----[BEGIN LOG]**TIME:** EVENT**TIME:** EVENT**TIME:** EVENT-----[END LOG][[/div]]Option 24
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:
[[div class="blockquote" style="border-radius: 10px; margin: 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 35
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:
IMPORTANT This part gets placed at the top of the page.
[[module css]].danke { padding: 5px; margin-bottom:10px; 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| DETAILSTEXT TEXT TEXTMORE TEXTMOREAND MOREAND 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
[[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 56
What it looks like:
h1
h2
h3
h4
h5
h6
text
more text
more[]
What to copy:
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;}.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 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++++++* h6textmore textmore[[span class="blinkbar"]][][[/span]][[/div]][[/div]][[/div]]Option 67
What it looks like:
What to copy:
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;}
- .r3 {animation-delay: 9s;}
[[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("https://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("https://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]]
- [[span class="record r3"]]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.|
What to copy:
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 88
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:
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.> [https://www.google.com like this]Thanks for checking out my format!@@ @@@@ @@[[/div]][[/div]]Warning/Notice formats:
Option 19
What it looks like:
NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION
Notification text goes here.
— Maria Jones, Director, RAISA
What to copy:
[[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 210
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:
[[=]][[div style="background: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png") center no-repeat; float: center; border: solid 2px #000; 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 linkhere.
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:
[[div style="background: url(https://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:11
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:
[[div class="orderwrapper"]][[div class="council1"]][[/div]][[div class="ordertitle"]]+* title[[/div]][[div class="orderdescription"]] _+* subtitledescription 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( "https://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]]Alternative Header Format
Option 1:
What it looks like:12
| Item #: SCP-XXXX | Level 4/XXXX |
| Object Class: Euclid | Classified |
SCP-XXXX.
What to copy:
[[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" style="width:100%;"]][[image image.jpg {$alt}="{$alt-text}" link=#]][[div class="scp-image-caption"]]SCP-XXXX.[[/div]][[/div]]----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:13
What it looks like:
What to copy:
[[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:14
What it looks like:
1/7777 LEVEL1/7777CLASSIFIED |  | Item #: SCP-7777Object Class: Euclid |
2/7777-RU LEVEL2/7777-RUCLASSIFIED |  | Объект №: SCP-7777-RUКласс объекта: Евклид |
3/7777-KO LEVEL3/7777-KOCLASSIFIED |  | 일련번호: SCP-7777-KO등급: 유클리드(Euclid) |
4/CN-7777 LEVEL4/CN-7777CLASSIFIED |  | 项目编号: SCP-CN-7777项目等级: Euclid |
5/7777-FR LEVEL5/7777-FRCLASSIFIED |  | Objet # : SCP-7777-FRClasse : Euclide |
1/7777 LEVEL1/7777CLASSIFIED | | Item #: SCP-7777Object Class:EuclidSafe |
What to copy:
[[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 5:15
What it looks like:
Threat Level: Black
(Click me!)
What to copy:
[[a href="*https://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 8: Option 1(Simpler Version)
What it looks like:
Item #: SCP-XXXX
Object Class: Keter
Level 5/XXXX
Top Secret
Content
Item #: SCP-XXXX
Object Class: Keter
Level 5/XXXX
Top Secret
Content
What to copy:
[[div style="display: flex; padding-bottom: -1em; border-bottom: solid 1px #444;"]][[div style="width: 50%;"]]**Item #**: SCP-XXXX**Object Class**: Keter[[/div]][[div style="width: 50%; text-align: right;"]]**Level 5/XXXX****Top Secret**[[/div]][[/div]]Content[[div style="display: flex; padding-bottom: -1em; border-bottom: solid 1px #444; font-size: 1.25em;"]][[div style="width: 50%;"]]**Item #**: SCP-XXXX**Object Class**: Keter[[/div]][[div style="width: 50%; text-align: right;"]]**Level 5/XXXX****Top Secret**[[/div]][[/div]]Content
Invisible Text
Instead of doing "##white|TEXT HERE...##" (which would break on any browsers using a "dark theme"), you should usetransparent instead.
Try selecting the below boxes:
This text is invisible but can be seen on select.
This text is white instead.
This text is invisible but can be seen on select.
This text is white instead.
What to copy:
##transparent|Your text here.##Disclaimer: this works on Sigma-10 only.
What it looks like:
Your text here.
"Paper/Note" formats
Option 116
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:
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
What it looks like:
What to copy:
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:
[[html]]<html><head><metaname="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><formautocomplete="off"style="max-width:450px;text-align:center;margin: auto;"><pstyle="font-size:55px; font-weight: bold;">SCiPNET LOGIN</p><divclass="input-container"><inputclass="input-field"type="text"placeholder="Username"name="usrnm"></div><divclass="input-container"><inputonkeyup="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><buttonid="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><buttonstyle="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.
Image Carousel
A selection of images with no inherent meaning or hidden message.
Blackbox formats
Option 119
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
What It Looks Like:
Today's date is02 May 2025 22:46… maybe!
What to copy:
[[module ListPages limit="1" category="*" order="updated_at desc"]]> Today's date is %%updated_at|%Y/%m/%d%%... maybe![[/module]]Discord Chat Formatting
What it looks like:
what's up@GOTO 20
What to copy:
Full explanation and code available here.
ACS Header (Anomaly Classification System)
Click here to learn what this is for.
Original author:Woedenaz
What it looks like:
What to copy:
[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= XXXX
|clearance= #
|container-class= euclid
|secondary-class= none
|secondary-icon=https://example.com/acs-image.svg
|disruption-class= vlam
|risk-class= warning
]]
Email Template
What it looks like:20
To: RECIPIENT
From: SENDER
Subject: SUBJECT
text
To: RECIPIENT
From: SENDER
Subject: Re:SUBJECT
text
What to copy:
IMPORTANT: This goes at the top of your page.
[[module CSS]].email-example .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 {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}.email-example 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.
[[div class="email-example"]][[=]]------[[collapsible show="Access SCiPNET Email? One (1) new message!" hide="Re:SUBJECT"]][[<]][[div class="email"]][[div class="tofrom"]]**To:** RECIPIENT**From:** SENDER**Subject:** SUBJECT[[/div]]------text[[/div]]@@ @@[[div class="email"]][[div class="tofrom"]]**To:** RECEPIENT**From:** SENDER**Subject:** Re:SUBJECT[[/div]]------text[[/div]][[/<]][[/collapsible]][[/=]][[/div]]
※SCP-3648 uses only the audio cassette animation.
※The audio cassette image is created by