Оформление 2.0 (Взято с англ сайта)
Данная статья ещё не завершена
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.
Формат тестов:
Опция 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
Как это выглядит:
| Дата |
Данные |
Эффекты |
Примечания |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
Что копировать:
| Дата |
Данные |
Эффекты |
Примечания |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
| DATE |
|
EFFECTS |
NOTES |
Опция 3
Как Это выглядит:
CLASSIFIED
Эксперимент-XXXX
Подзаголовок
|
Цель Эксперимента
Здесь лева рамка
Результат:
wide frame
|
Субъект:
Тут правая рамка
Дата/Локация:
narrow frame
|
цитата
bold: текст текст ссылка с цитатой
↓hr
h1
h2
h3
h4
h5
h6
h1
h2
h3
h4
h5
h6
false
What to copy:
Tips! You can use "Login/Logout" formats (Option 1, Option 2-suboption) instead of the basic collapsible.
[[collapsible]]
[[include zso
|experiment-title=Эксперимент-XXXX
|sub-title=Подзаголовок
|left=Цель эксперимента:
here is a "left" frame
Результат:
wide frame
|right=Субъект:
here is a "right" frame
Дата/Локация:
narrow frame
|content=> = Цитата
> **bold:** Текст текст текст [https://www.google.com/ Ссылка с цитатой]
> = ↓hr
> ----
> +* h1
> ++* h2
> +++* h3
> ++++* h4
> +++++* h5
> ++++++* h6
+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
]]
[[/collapsible]]
Опция 4
What it looks like:
Wait 10 seconds…
SCiP NETверсия. β
Сейчас загружается...
What to copy:
[[collapsible show="+ load" hide="- stop"]]
[[include http://scpfoundation12.wikidot.com/component:3d-logo |header=true|title=SCiP NET|num=версия. β]]
КУЧА ТЕКСТА
[[include http://scpfoundation12.wikidot.com/component:3d-logo |footer=true]]
[[/collapsible]]
Tips! You can use "Login/Logout" formats (Option 1, Option 2-suboption) instead of the basic collapsible.
формат записи:
Опция 1
Как это выглядит:
Стенограмма видеопротокола первичного обследования
Дата: OPTIONAL
Исследовательская группа: TEAM NAME - OPTIONAL
Обследуется: AREA/ANOMALY - OPTIONAL
Командир группы: OPTIONAL
Члены группы: OPTIONAL
[НАЧАЛО ПРОТОКОЛА]
Персона A: Диалог
Персона B: Диалог
ЧТО-ТО ПРОИСХОДИТ
Персона A: Диалог
[КОНЕЦ ПРОТОКОЛА]
What to copy:
[[div style="display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px"]]
**Стенограмма видеопротокола первичного обследования**
**Дата:** OPTIONAL
**Исследовательская группа:** TEAM NAME - OPTIONAL
**Обследуется:** AREA/ANOMALY - OPTIONAL
**Командир группы:** OPTIONAL
**Члены группы:** OPTIONAL
-----
[НАЧАЛО ПРОТОКОЛА]
**Персона A:** Диалог
**Персона B:** Диалог
//ЧТО-ТО ПРОИСХОДИТ//
**Персона A:** Диалог
[КОНЕЦ ПРОТОКОЛА]
[[/div]]
Опция 2
For a computer-y look.
Как это выглядит:
| ДЕТАЛИ
| ДЕТАЛИ
| ДЕТАЛИ
| ДЕТАЛИ
| ДЕТАЛИ
ТЕКСТ
БОЛЬШЕ ТЕКСТА
БОЛЬШЕ
И ЕЩЁ БОЛЬШЕ
И ЕЩЁ БОЛЬШЕ ТЕКСТА
Что копривать:
ВАЖНО Это на самом верху страницы.
[[module css]]
.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]]
Важно: Это ставьте там где хотите.
[[div class="danke agent"]]
| ДЕТАЛИ
| ДЕТАЛИ
| ДЕТАЛИ
| ДЕТАЛИ
| ДЕТАЛИ
ТЕКСТ
БОЛЬШЕ ТЕКСТА
БОЛЬШЕ
И ЕЩЁ БОЛЬШЕ
И ЕЩЁ БОЛЬШЕ ТЕКСТА
[[/div]]
Tips! Поменяйте 'danke agent' (Зелыный) на 'danke site' что бы поменять на жёлтый.
Опция 3:
[[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;"]]
текст тута
[[/div]]
[[/div]]
Опция 4
What it looks like:
И БОЛЬШЕ
h1
h2
h3
h4
h5
h6
текст
ещё текст
больше[]
Что копировать:
ВАЖНО Это на самом верху страницы
[[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]]
ВАЖНО: Это там где вы хотите.
[[div class="no-unfold"]]
[[div class="containercontainer"]]
[[div class="container"]]
+* [!-- DO NOT ERASE THIS "+*". --]
[[span_ class="overlay"]]
И БОЛЬШЕ!
[[/span]]
[[div_ class="overlayback"]]
[[/div]]
+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
текст
ещё текст
больше[[span class="blinkbar"]][][[/span]]
[[/div]]
[[/div]]
[[/div]]
опция 5
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;}
[[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]]
Опция 6
What it looks like:
Я не могу подтвердить ваш ID на викидот.|
Что копировать:
Важно Это в самом верху.
[[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]]
ВАЖНО: Это таи где вы хотите.
[[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"]]
Ваш ID на викидоте это "%%name%%".[[span class="blink"]]|[[/span]]
[[/div]]
[[/module]]
[[div class="sitemember"]]
Я не могу подтвердить ваш ID на викидот.[[span class="blink"]]|[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="buttonwrapper"]]
[[a class="likebutton" href="#u-start"]]Клик![[/a]]
[[/div]]
[[/div]]
Опция 7
Как это выглядит:
Терминал #001
------
Добро Пожаловать, Пользователь
------
Ссылки внутри терминала получают символ ">" при наведении на них указателя мыши.
как тут
ТЕКСТ
что копировать:
важно: Это в самом верху
[[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: Это сам терминал
[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Терминал #001__[[/size]]
@@ @@
@@ @@
@@------@@
Добро Пожаловать, Пользователь
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Ссылки внутри терминала получают символ ">" при наведении на них указателя мыши.
> [http://www.google.com как тут]
ТЕКСТ
@@ @@
@@ @@
[[/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:
[[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:
[[=]]
[[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 #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:
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(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:
[[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:
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 |
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 style="width:100%;" link=#]]
[[div class="scp-image-caption" style="width:100%;"]]
SCP-XXXX.
[[/div]]
[[/div]]
[[module CSS]]
/* Standard Image Block */
.scp-image-block {
border: solid 1px #666;
box-shadow: 0 1px 6px rgba(0,0,0,.25);
width: 300px;
}
.scp-image-block.block-right {
float: right;
clear: right;
margin: 0 2em 1em 2em;
}
.scp-image-block.block-left {
float: left;
clear: left;
margin: 0 2em 1em 0;
}
.scp-image-block.block-center {
margin-right: auto;
margin-left: auto;
}
.scp-image-block img {
border: 0;
width: 300px;
}
.scp-image-block .scp-image-caption {
background-color: #eee;
border-top: solid 1px #666;
padding: 2px 0;
font-size: 80%;
font-weight: bold;
text-align: center;
width: 300px;
}
.scp-image-block > p {
margin: 0;
}
.scp-image-block .scp-image-caption > p {
margin: 0;
padding: 0 10px;
}
[[/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:
Level 1:
Level 2:
Level 3:
Level 4:
Level 5:
[Big thanks to 
TSATPWTCOTTTADC for fixing headers 1 and 3.]
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:
What it looks like:
1/7777 LEVEL 1/7777
CLASSIFIED
|
 |
Item #: SCP-7777
Object Class: Euclid
|
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:
[[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:
[[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!)
What to copy:
[[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.
Warning!
This component was migrated to the main wiki.
What to copy:
[[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:
What to copy:
[[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
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.
What to copy:
##transparent|Your text here.##
Disclaimer: this works on Sigma-9 only.
What it looks like:
Your text here.
"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.
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
Option 1
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>
<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:
What to copy:
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:
[[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:
[[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:
[[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
Instructions for use can be found here.
Useful tool for the sandbox page
Option 1
What it looks like:
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:
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]]
normal (display to "s")
[[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")
[[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")
[[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:
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 02 Jul 2024 18:42… 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
Option 1:
What it looks like:
yo, Corvus, you around?
ya
what's up
@GOTO 20
New Messages
Here is an image
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:
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:
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:
Note: If you are the wikidot user, the module show your ID; if not, the module show "guest".
What to copy:
[[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:
[[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:
Containment Class:
euclid
What to copy:
Modifying Scrollbars
What it looks like: Dr. Wondertainment Theme and Wilson's Wildlife Solutions Theme
What to copy:
[[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 The Crab Den
What to copy:
[[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:
[[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:
What to copy:
[[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:
Email Template
What it looks like:
To: Researcher Natalie Reems
From: Researcher Tonya Skyler
Subject: SUBJECT
OwO
To: Researcher Tonya Skyler
From: Researcher Natalie Reems
Subject: Re:SUBJECT
UwU
What to copy:
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
Page-Content not to Erase
What to copy:
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 not to Erase
What to copy:
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
indonootoko from the JP branch.
Aiken Drum
C-take from the JP branch.