Приветствуем!
Данная страница выступает шпаргалкой для альтернативного оформления журналов, интервью и прочих приложений в документах SCP. Что-то по типу специфического оформления отдельных СО, только для Фонда. Если вас интересует базовая разметка вики, обратитесь к оформлению. За более детальным обзором возможностей движка RuFoundation обратитесь к техническому руководству по вики-разметке.
В целях пополнения данного списка, он оставлен открытым для правок, поэтому, пожалуйста, следуйте формату других записей.
Примечание: Этот список не задумывался как исчерпывающий. Приведённые шаблоны не обязательны для использования.
Примечание: Модули CSS в нашем филиале встраиваются в код страницы, поэтому вы можете пользоваться функцией предпросмотра, прежде чем фиксировать изменения.
См. также
Базовый шаблон объекта
[[>]]
[[module Rate]]
[[/>]]
**Объект №:** SCP-XXXX
**Класс объекта:** Безопасный/Евклид/Кетер (указывает класс)
**Особые условия содержания:** [Абзацы, описывающие условия содержания]
**Описниае:** [Абзацы, описывающие объект]
**Приложение:** [Опциональные дополнительные абзацы]
[[footnoteblock]]
[[div class="footer-wikiwalk-nav"]]
[[=]]
<< [[[SCP-XXXW]]] | SCP-XXXX | [[[SCP-XXXY]]] >>
[[/=]]
[[/div]]
Шаблон опроса/допроса
> **Опрашиваемый:** [Индивид или SCP-объект, который опрашивают/допрашивают]
>
> **Опрашивающий:** [Опрашивающий/допрашивающий, может быть затёрт с помощью █]
>
> **Примечание:** [Небольшое введение, описывающее опрос/допрос]
>
> **<Начало записи, [(опционально) время начала записи]>**
>
> **Опрашивающий:** [речь]
>
> **Индивид:** [речь]
>
> [Повторять по надобности]
>
> **<Конец записи, [(опционально) время окончания записи]>**
>
> **Комментарий:** [Краткое подведение итогов и описание дальнейших событий]
Примечание: При создании цитат с помощью символа >, не забывайте ставить после него пробел, в противном случае ваш текст не станет цитатой.
Форматы протокола тестирования:
Вариант 1
Как оно выглядит:
| НАЗВАНИЕ ТЕСТА | |
| Субъект | СЮДА ИНФОРМАЦИЮ |
| Протокол | СЮДА ИНФОРМАЦИЮ |
| Результат | СЮДА ИНФОРМАЦИЮ |
Что копировать:
[[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%;"]]
НАЗВАНИЕ ТЕСТА
[[/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"]]
Субъект
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
СЮДА ИНФОРМАЦИЮ
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Протокол
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
СЮДА ИНФОРМАЦИЮ
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; border: 1px solid black"]]
Результат
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
СЮДА ИНФОРМАЦИЮ
[[/cell]]
[[/row]]
[[/table]]
Вариант 2
Как оно выглядит:
| Дата | ДАННЫЕ | Эффекты | Заметки |
|---|
| ДАТА | | ЭФФЕКТЫ | ЗАМЕТКИ |
| ДАТА | | ЭФФЕКТЫ | ЗАМЕТКИ |
| ДАТА | | ЭФФЕКТЫ | ЗАМЕТКИ |
| ДАТА | | ЭФФЕКТЫ | ЗАМЕТКИ |
| ДАТА | | ЭФФЕКТЫ | ЗАМЕТКИ |
| ДАТА | | ЭФФЕКТЫ | ЗАМЕТКИ |
Что копировать:
[[table style="border: 1px solid silver"]]
[[row]]
[[hcell style="border: 1px solid silver"]]
Дата
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
ДАННЫЕ
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Эффекты
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Заметки
[[/hcell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
ДАТА
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
ИНФОРМАЦИЯ
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЭФФЕКТЫ
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЗАМЕТКИ
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
ДАТА
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
ИНФОРМАЦИЯ
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЭФФЕКТЫ
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЗАМЕТКИ
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
ДАТА
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
ИНФОРМАЦИЯ
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЭФФЕКТЫ
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЗАМЕТКИ
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
ДАТА
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
ИНФОРМАЦИЯ
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЭФФЕКТЫ
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЗАМЕТКИ
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
ДАТА
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
ИНФОРМАЦИЯ
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЭФФЕКТЫ
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЗАМЕТКИ
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
ДАТА
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
ИНФОРМАЦИЯ
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЭФФЕКТЫ
[[/cell]]
[[cell style="border: 1px solid silver"]]
ЗАМЕТКИ
[[/cell]]
[[/row]]
[[/table]]
Audio/Video Log Formats:
Вариант 1
Как оно выглядит:
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.
Что копировать:
[[div class="blockquote"]]
= **VIDEO LOG**
----
**DATE:**
**NOTE:**
----
[BEGIN LOG]
**TIME:** EVENT
**TIME:** EVENT
**TIME:** EVENT
-----
[END LOG]
[[/div]]
Вариант 2
Как оно выглядит:
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 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]]
Вариант 3
For a computer-y look.
Как оно выглядит:
| DETAILS
| DETAILS
| DETAILS
| DETAILS
| DETAILS
TEXT TEXT TEXT
MORE TEXT
MORE
AND MORE
AND YET EVEN MORE TEXT TO JOT DOWN
Что копировать:
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
| 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).
Вариант 4:
[[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]]
Вариант 5
Как оно выглядит:
+*
AND MORE!
h1
h2
h3
h4
h5
h6
text
more text
more[]
Что копировать:
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"]]
+* [!-- НЕ СТИРАЙТЕ "+*". --]
[[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]]
Вариант 6
Как оно выглядит:
the first line
the second line
the final line
TEXT
MORE TEXT
Что копировать:
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("https://scpfoundation.net/local--files/component:tape/tape.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://scpfoundation.net/local--files/component:tape/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]]
Вариант 7
Как оно выглядит:
I can't verify your wikidot ID.|
Что копировать:
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
Как оно выглядит:
Terminal #001
------
Welcome, User
------
Links inside the terminal gain a ">" when you hover over them.
like this
Thanks for checking out my format!
Что копировать:
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]]
[[lines 2]]
@@------@@
Welcome, User
@@------@@
[[/=]]
[[lines 3]]
> Links inside the terminal gain a ">" when you hover over them.
> [https://www.google.com like this]
Thanks for checking out my format!
[[lines 2]]
[[/div]]
[[/div]]
Warning/Notice formats:
Option 1
Как оно выглядит:
NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION
Notification text goes here.
— Maria Jones, Director, RAISA
Что копировать:
[[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
Как оно выглядит:
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.
Что копировать:
[[=]]
[[div style="background: url("https://scpfoundation.net/local--files/draft:vladthemountain-scp-style-resource/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 link here.
Option 3:
Как оно выглядит:
BY ORDER OF THE OVERSEER COUNCIL
The following file is Level X/XXXX classified. Unauthorized access is forbidden.
XXXX
Что копировать:
[[div style="background: url(https://scpfoundation.net/local--files/draft:vladthemountain-scp-style-resource/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]
[[lines 6]]
[[=]]
++* ##black|BY ORDER OF THE OVERSEER COUNCIL##
##black|The following file is Level X/XXXX classified. Unauthorized access is forbidden.##
[[/=]]
= **##black|XXXX##**
[[lines 3]]
[[/div]]
Option 4:
Как оно выглядит:
title
subtitle
description description description description description description description description description description description description description description description description description description
XXXX
Что копировать:
[[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( "https://scpfoundation.net/local--files/draft:vladthemountain-scp-style-resource/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:
Как оно выглядит:
| Item #: SCP-XXXX | Level 4/XXXX |
| Object Class: Euclid | Classified |
Что копировать:
[[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=image.jpg]]
[[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:
Как оно выглядит:
Level 1:
Level 2:
Level 3:
Level 4:
Level 5:
[Big thanks to Пользователь 'TSATPWTCOTTTADC' не существует for fixing headers 1 and 3.]
Что копировать:
[[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:
Как оно выглядит:
1/7777ДОПУСК1/7777СЕКРЕТНО |  | Item #: SCP-7777Object Class: Euclid |
2/7777-RUДОПУСК2/7777-RUСЕКРЕТНО |  | Объект №: SCP-7777-RUКласс объекта: Евклид |
3/7777-KOДОПУСК3/7777-KOСЕКРЕТНО |  | 일련번호: SCP-7777-KO등급: 유클리드(Euclid) |
4/CN-7777ДОПУСК4/CN-7777СЕКРЕТНО |  | 项目编号: SCP-CN-7777项目等级: Euclid |
5/7777-FRДОПУСК5/7777-FRСЕКРЕТНО |  | Objet # : SCP-7777-FRClasse : Euclide |
1/7777ДОПУСК1/7777СЕКРЕТНО | | Item #: SCP-7777
|
Что копировать:
[[include 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 component:classified-decoration
|lv=1
|item=7777
|oc=--Euclid--
+* Safe
|lang=EN
]]
Or you want to change the text of "LEVEL" and "CLASSIFIED"?
[[include 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:
Как оно выглядит:
Threat Level: Black
(Click me!)
Что копировать:
[[a href="*https://scpfoundation.net/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)
Как оно выглядит:
Item #: SCP-XXXX
Object Class: Keter
Content
Item #: SCP-XXXX
Object Class: Keter
Content
Что копировать:
[[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 use transparent 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.
Что копировать:
##transparent|Your text here.##
Disclaimer: this works on Sigma-10 only.
Как оно выглядит:
Your text here.
"Paper/Note" formats
Option 1
Как оно выглядит:
Document body here. You will need to use "[[lines 1]]" on new lines to properly space text.
Like so.
You can use [[<]], [[=]], and [[>]] to align different lines/paragraphs to give proper feel.
Что копировать:
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 "@@[[lines 1]]@@" on new lines to properly space text.
[[lines 1]]
Like so.
[[lines 1]]
You can use [[<]], [[=]], and [[>]] to align different lines/paragraphs to give proper feel.
[[lines 1]]
[[>]]
Enjoy.
[[/>]]
[[/div]]
"Login/Logout" formats
Option 1
Как оно выглядит:
Модуль 'MailForm' не существует
- name
- title: ID
- default: <YOUR ID>
- type: text
- rules:
- required: true
- maxLength:10
- minLength: 100
[[/module]]
Модуль 'MailForm' не существует
- affiliation
- title: PASSWORD
- default: ・・・・・・・・・
- rules:
- required: true
- maxLength:10
- minLength: 100
[[/module]]
Что копировать:
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
Как оно выглядит:
Что копировать:
[[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.
Image Carousel
A selection of images with no inherent meaning or hidden message.
Instructions for use
Blackbox formats
Option 1
Как оно выглядит:
This is a format to let you blackbox information and let it be visible over a mouseover.
Что копировать:
[[span class="bblock"]]text here[[/span]]
Как настроить под себя:
This code lets you adjust the color of the mouseover text.
[[module CSS]]
.bblock:hover {color: white}
[[/module]]Option 2
Как оно выглядит:
This changes the color of the background on mouseover, rather than the text.
Что копировать:
[[span class="dblock"]]text here[[/span]]
Как настроить под себя:
This code lets you adjust the color of the mouseover background.
[[module CSS]]
.dblock:hover {background: #f4f4f4}
[[/module]]"today's date" format
Как оно выглядит:
Today's date is 19:17 29.06.2025... maybe!
Что копировать:
[[module ListPages limit="1" category="*" order="updated_at desc"]]
> Today's date is %%updated_at|%Y/%m/%d%%... maybe!
[[/module]]
Discord Chat Formatting
Как оно выглядит:
yo, Corvus, you around?
ya
what's up
@GOTO 20Новые сообщения
Here is an image
Что копировать:
Полное объяснение и код доступны тут.
ACS Header (Anomaly Classification System)
Click here to learn what this is for.
Оригинальный автор: Пользователь 'Woedenaz' не существует
Как оно выглядит:
Класс риска:
предупреждение
Что копировать:
Email Template
Как оно выглядит:
To: RECIPIENT
From: SENDER
Subject: SUBJECT
text
To: RECIPIENT
From: SENDER
Subject: Re:SUBJECT
text
Что копировать:
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]]
[[lines 1]]
[[div class="email"]]
[[div class="tofrom"]]
**To:** RECEPIENT
**From:** SENDER
**Subject:** Re:SUBJECT
[[/div]]
------
text
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[/div]]
