Crédits
Titre original : SCP Style Resource
Auteur : Shaggydredlocks
Traducteur : Bob-Bob-Bob
Date de publication originale : 27 janvier 2018
Bonjour et bienvenue !
Ceci a pour but d’être une base de données facile d’accès de type "copier-coller" de formats alternatifs pour les documents SCP, du même genre que les guides de styles des Groupes d’Intérêts pour leurs formats respectifs. Si vous cherchez de l’aide pour le formatage Wikidot basique, allez voir le guide de syntaxe. Pour du code plus avancé, allez voir le guide de formatage avancé.
Afin d’accumuler plusieurs types de formats différents, ceci restera ouvert à la collaboration. Faites attention à bien respecter le format de présentation.
Note : Ceci n’a pas pour but d’être une liste exhaustive. Ces formats ne sont pas obligatoires. Les utilisateurs sont encouragés à se diversifier et à expérimenter avec tous les formats avec lesquels ils sont le plus à l'aise.
Note : Les Modules CSS ne s'appliquent sur une page uniquement après que la page soit rafraichie. Utiliser l'aperçu sur une page ne rafraichie pas la page. Pour voir les effets de toute modification sur un module CSS, vous devez enregistrer la page.
Modèle d'article basique
[[>]]
[[module Rate]]
[[/>]]
**Objet # :** SCP-XXXX
**Classe :** Sûr/Euclide/Keter (préciser quelle classe)
**Procédures de Confinement Spéciales :** [Paragraphes expliquant les procédures]
**Description :** [Paragraphes expliquant la description]
**Addendum :** [Paragraphes additionnels optionnels]
Modèle d'Entretien
> **Interrogé :** [La personne, les personnes ou le SCP qui sont interrogés]
>
> **Interrogateur :** [Interrogateur, peut être censuré avec des █]
>
> **Avant-propos :** [Court passage décrivant l'entretien]
>
> **<Début de l’enregistrement, [donnée temporelle optionnelle]>**
>
> **Interrogé :** [dialogue]
>
> **Personne :** [dialogue]
>
> [Répéter autant que nécessaire]
>
> **<Fin de l’enregistrement, [donnée temporelle optionnelle]>**
>
> **Conclusion :** [Court résumé et passage sur les événements qui suivirent]
Note : Lorsque vous insérez des blocs de citations avec le symbole >, faite attention à laisser une espace après chaque > que vous utilisez, sinon votre texte ne s’affichera pas comme un bloc de citations.
Formats de Journaux de Tests :
Option 1
À quoi ça ressemble :
TITRE DU TEST MACHIN |
|
Sujet |
DONNÉES ICI |
Protocole |
DONNÉES ICI |
Résultats |
DONNÉES ICI |
Ce qu’il faut copier :
[[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%;"]]
TITRE DU TEST MACHIN
[[/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"]]
Sujet
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DONNÉES ICI
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Protocole
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DONNÉES ICI
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; border: 1px solid black"]]
Résultats
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DONNÉES ICI
[[/cell]]
[[/row]]
[[/table]]
Option 2
À quoi ça ressemble :
Date |
DONNÉES |
Effets |
Notes |
DATE |
|
EFFETS |
NOTES |
DATE |
|
EFFETS |
NOTES |
DATE |
|
EFFETS |
NOTES |
DATE |
|
EFFETS |
NOTES |
DATE |
|
EFFETS |
NOTES |
DATE |
|
EFFETS |
NOTES |
Ce qu’il faut copier :
[[table style="border: 1px solid silver"]]
[[row]]
[[hcell style="border: 1px solid silver"]]
Date
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
DONNÉES
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Effets
[[/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"]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFETS
[[/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"]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFETS
[[/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"]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFETS
[[/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"]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFETS
[[/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"]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFETS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[/table]]
Option 3
À quoi ça ressemble :
CLASSIFIÉ
Expérience-XXXX
Sous-Titre
But de l’expérience :
ici une fenêtre "de gauche"
Résultat :
fenêtre large
|
Sujet :
ici une fenêtre "de droite"
Date/Lieu :
fenêtre étroite
|
Bloc de texte
gras : texte texte texte lien dans la fenêtre de texte
↓hr
h1
h2
h3
h4
h5
h6
h1
h2
h3
h4
h5
h6
false
Ce qu’il faut copier :
Astuces ! Vous pouvez utiliser les formats "Connexion/Déconnexion" (Option 1, Option 2-suboption) à la place du collapsible de base.
[[collapsible]]
[[include :sandboxscpfr:component:classified-experiment
|experiment-title=Expérience-XXXX
|sub-title=Sous-Titre
|left=But de l’expérience :
ici une fenêtre "de gauche"
Résultat:
fenêtre large
|right=Sujet :
ici une fenêtre "de droite"
Date/Lieu :
fenêtre étroite
|content=> = Bloc de texte
> **gras :** texte texte texte [https://www.google.com/ lien dans la fenêtre de texte]
> = ↓hr
> ----
> +* h1
> ++* h2
> +++* h3
> ++++* h4
> +++++* h5
> ++++++* h6
+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
]]
[[/collapsible]]
attribut |
obligatoire |
valeurs autorisées |
description |
experiment-title |
oui |
texte
lien |
valeur du titre |
sub-title |
non |
texte
lien |
valeur du sous-titre |
content |
oui |
texte
lien |
vous pouvez également utiliser la syntaxe de wikidot (comme avec des blocs de citations) |
left |
non |
texte
lien |
fenêtre large |
right |
non |
texte
lien |
fenêtre étroite |
warning |
non |
texte |
change le "ACCÈS AUTORISÉ" |
Option 4 :
À quoi ça ressemble :
Attendez 10 secondes…
SCiP NETver. β
Now loading...
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE
Ce qu’il faut copier :
[[collapsible show="+ charger" hide="- stop"]]
[[include :scp-sandbox-3:component:3d-logo |header=true|title=SCiP NET|num=ver. β]]
TEXTE TEXTE TEXTE
[[include :scp-sandbox-3:component:3d-logo |footer=true]]
[[/collapsible]]
Astuces ! Vous pouvez utiliser les formats de type "Connexion/Déconnexion" (Option 1, Option 2-sous-option) au lieu d'un simple collapsible.
Formats d’enregistrements Audio/Vidéo :
Option 1
À quoi ça ressemble :
ENREGISTREMENT VIDÉO
DATE :
NOTE :
[DÉBUT DE L’ENREGISTREMENT]
HEURE : ÉVÉNEMENT
HEURE : ÉVÉNEMENT
HEURE : ÉVÉNEMENT
[FIN DE L’ENREGISTREMENT]
Astuce ! Ce style copie les blocs de citations que vous voyez sur le site (le formatage basique de wikidot utilisant des lignes commençant par "> "), mais fonctionne mieux avec les images.
Ce qu’il faut copier :
[[div style="display: inline-block; border:dashed 1px #999999; background:#F5F5F5; float:center; width:84%; padding:1px 15px; margin: 10px 10px 10px 40px"]]
= **ENREGISTREMENT VIDÉO**
----
**DATE :**
**NOTE :**
----
[DÉBUT DE L’ENREGISTREMENT]
**HEURE :** ÉVÉNEMENT
**HEURE :** ÉVÉNEMENT
**HEURE :** ÉVÉNEMENT
-----
[FIN DE L’ENREGISTREMENT]
[[/div]]
Option 2
À quoi ça ressemble :
Retranscription vidéo d’un journal d’exploration
Date : OPTIONNEL
Équipe d’exploration : NOM DE L’ÉQUIPE - OPTIONNEL
Sujet : ZONE/ANOMALIE - OPTIONNEL
Chef d’équipe : OPTIONNEL
Membres de l’équipe : OPTIONNEL
[DÉBUT DE LA RETRANSCRIPTION]
Personne A : Dialogue
Personne B : Dialogue
DES TRUCS SE PRODUISENT
Personne A : Dialogue
[FIN DE LA RETRANSCRIPTION]
Ce qu’il faut copier :
[[div style="display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px"]]
**Retranscription vidéo d’un journal d’exploration**
**Date :** OPTIONNEL
**Équipe d’exploration :** NOM DE L’ÉQUIPE - OPTIONNEL
**Sujet :** ZONE/ANOMALIE - OPTIONNEL
**Chef d’équipe :** OPTIONNEL
**Membres de l’équipe :** OPTIONNEL
-----
[DÉBUT DE LA RETRANSCRIPTION]
**Personne A :** Dialogue
**Personne B :** Dialogue
//DES TRUCS SE PRODUISENT//
**Personne A :** Dialogue
[FIN DE LA RETRANSCRIPTION]
[[/div]]
Option 3
Pour une apparence de type ordinateur.
À quoi ça ressemble :
| DÉTAILS
| DÉTAILS
| DÉTAILS
| DÉTAILS
| DÉTAILS
TEXTE TEXTE TEXTE
ENCORE DU TEXTE
ENCORE
ET ENCORE
ET TOUJOURS PLUS DE TEXTE À LIRE
Ce qu’il faut copier :
IMPORTANT : Cette partie doit être mise en haut de la page.
[[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]]
IMPORTANT : Cette partie se met là où vous voulez que le bloc apparaisse.
[[div class="danke agent"]]
| DÉTAILS
| DÉTAILS
| DÉTAILS
| DÉTAILS
| DÉTAILS
TEXTE TEXTE TEXTE
ENCORE DU TEXTE
ENCORE
ET ENCORE
ET TOUJOURS PLUS DE TEXTE À LIRE
[[/div]]
Astuce ! Remplacez 'danke agent' par 'danke site' pour obtenir un fond d’une autre couleur (jaune).
Option 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;"]]
LES TRUCS VONT ICI
[[/div]]
[[/div]]
Option 5
À quoi ça ressemble :
ET ENCORE !
h1
h2
h3
h4
h5
h6
texte
encore du texte
encore[]
Ce qu’il faut copier :
IMPORTANT : Cette partie doit être mise en haut de la page.
[[module CSS]]
.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;animation: flicker 0.15s infinite;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes flicker {0% {opacity: 0.9890; }5% {opacity: 0.5842; }10% {opacity: 0.9865; }15% {opacity: 0.0412; }20% {opacity: 0.6255; }25% {opacity: 0.3157; }30% {opacity: 0.7328; }35% {opacity: 0.4654; }40% {opacity: 0.9128; }45% {opacity: 0.2449; }50% {opacity: 0.5485; }55% {opacity: 0.6438; }60% {opacity: 0.1180; }65% {opacity: 0.9085; }70% {opacity: 0.0266; }75% {opacity: 0.6795; }80% {opacity: 0.7812; }85% {opacity: 0.0117; }90% {opacity: 0.2239; }95% {opacity: 0.8897; }100% {opacity: 0.2260; }}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
[[/module]]
IMPORTANT : Cette partie se met là où vous voulez que le bloc apparaisse.
[[div class="no-unfold"]]
[[div class="containercontainer"]]
[[div class="container"]]
+* [!-- NE PAS EFFACER CECI "+*". --]
[[span_ class="overlay"]]
ET ENCORE !
[[/span]]
[[div_ class="overlayback"]]
[[/div]]
+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
texte
encore du texte
encore[[span class="blinkbar"]][][[/span]]
[[/div]]
[[/div]]
[[/div]]
Option 6
À quoi ça ressemble :
la première ligne
la deuxième ligne
la dernière ligne
TEXTE
PLUS DE TEXTE
Ce qu’il faut copier :
IMPORTANT :
- Cette partie doit être mise en haut de la page.
- Lorsque vous voulez ajouter de nouveaux "enregistrements", ajoutez de nouvelles "options" comme sur le format suivant.
- .r3 {animation-delay: 9s;}
.r4 {animation-delay: 12s;}
[[module CSS]]
/* //// Lorsque vous voulez ajouter de nouveaux "enregistrements", //// */
/* //// ajoutez de nouvelles "options" comme sur le format suivant. //// */
.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;overflow: hidden;white-space: pre;}.record {position: absolute;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;left: 50%;transform: translateX(-50%);}.line2 {top: 1.2em!important;}.line3 {top: 2.4em!important;}.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; animation-iteration-count: infinite;}.tape-right {top: 0px;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s; animation-timing-function: linear; animation-fill-mode: forwards; animation-iteration-count: infinite;}.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-unfolded-link .collapsible-block-link:before {content:"\f1da";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-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!important;padding-bottom: 0;}.tape-left {top: 105px;bottom: initial;left:-36px; }.tape-right {top: 60px;bottom: initial;left: 35px;}}
[[/module]]
IMPORTANT :
- Cette partie se met là où vous voulez que le bloc apparaisse.
- Lorsque vous voulez ajouter de nouveaux "enregistrements", ajoutez de nouvelles "options" comme sur le format suivant.
- [[span class="record r3"]]Text[[/span]]
[[span class="record r4"]]//More text//[[/span]]
[[span class="record r4 line2"]]//More//[[/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"]]//la première ligne//[[/span]]
[[span class="record r1 line2"]]//la deuxième ligne//[[/span]]
[[span class="record r1 line3"]]//la dernière ligne//[[/span]]
[[span class="record r2"]]//TEXTE//[[/span]]
[[span class="record r2 line2"]]//PLUS DE TEXTE//[[/span]]
[[/div]]
[[/collapsible]]
[[/div]]
Option 7
À quoi ça ressemble :
Je ne peux pas vérifier votre ID wikidot.|
Ce qu’il faut copier :
IMPORTANT : Cette partie doit être mise en haut de la 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: Cette partie se met là où vous voulez que le bloc apparaisse.
[[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"]]
Votre ID wikidot est "%%name%%".[[span class="blink"]]|[[/span]]
[[/div]]
[[/module]]
[[div class="sitemember"]]
Je ne peux pas vérifier votre ID wikidot.[[span class="blink"]]|[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="buttonwrapper"]]
[[a class="likebutton" href="#u-start"]]Clic ![[/a]]
[[/div]]
[[/div]]
Option 8 :
À quoi ça ressemble :
Console #001
------
Bienvenue, Utilisateur
------
Comme dans une console, les liens gagnent un ">" quand vous passez votre souris dessus.
Comme ceci
Merci d'avoir regardé mon format !
Ce qu'il faut copier :
IMPORTANT : Ceci est le module CSS. Il va en haut de l'article.
[[module CSS]]
div.terminal{
border: 1px solid black;
border: solid 3px #BBBBBB;
border-radius: 16px;
background-color: #131;
/* ombre noire en haut de la console */
background-image:
radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
background-position: center;
display: block;
/* ombre autour de la console */
box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
/* évite les erreurs de rendu lors que l'on scroll */
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; /* Vous pouvez avoir besoin de changer ça. Si la barre va trop vite, augmentez de 5s. */
animation: scan 12s linear 0s infinite; /* Même chose qu'au dessus */
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%);} /* Vous pourriez avoir besoin de changer ceci selon la longueur de votre console. Si la barre s'arrête en plein milieu, augmentez le deuxieme nombre.*/
}
@keyframes scan{
from{ transform: translateY(-10%);}
to{ transform: translateY(5000%);} /* Même chose qu'au-dessus.*/
}
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 : Ceci est le code de la console en elle-même. Il peut aller n'importe où.
[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Console #001__[[/size]]
@@ @@
@@ @@
@@------@@
Bienvenue, Utilisateur
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Comme dans une console, les liens gagnent un ">" quand vous passez votre souris dessus.
> [http://www.google.com Comme ceci.]
Merci d'avoir regardé mon format !
@@ @@
@@ @@
[[/div]]
[[/div]]
Formats d’annonces/d’avertissement :
Option 1
À quoi ça ressemble :
MESSAGE DE L'ADMINISTRATION DE LA SÉCURITÉ DES INFORMATIONS ET DES ARCHIVES DE LA FONDATION
Le texte du message va ici.
— Maria Jones, Directrice, ASIA
Ce qu’il faut copier :
[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
++++ MESSAGE DE L'ADMINISTRATION DE LA SÉCURITÉ DES INFORMATIONS ET DES ARCHIVES DE LA FONDATION
Le texte du message va ici.
-- Maria Jones, Directrice, ASIA
[[/=]]
[[/div]]
Option 2
À quoi ça ressemble :
ATTENTION : LE FICHIER SUIVANT EST CLASSIFIÉ DE NIVEAU #/XXXX
TOUTE TENTATIVE D’ACCÈS AU FICHIER SANS UNE AUTORISATION DE NIVEAU #/XXXX SERA ENREGISTRÉE ET ENTRAÎNERA DES SANCTIONS DISCIPLINAIRES IMMÉDIATES.
Ce qu’il faut copier :
[[=]]
[[div style="background: url(http://fondationscp.wdfiles.com/local--files/host/logo-scp-alt.png) center no-repeat ; float: center; border: solid 2px #000000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
+ ATTENTION : LE FICHIER SUIVANT EST CLASSIFIÉ DE NIVEAU #/XXXX
----
+++ TOUTE TENTATIVE D’ACCÈS AU FICHIER SANS UNE AUTORISATION DE NIVEAU #/XXXX SERA ENREGISTRÉE ET ENTRAÎNERA DES SANCTIONS DISCIPLINAIRES IMMÉDIATES.
[[/div]]
[[/=]]
Note : Ce code comprend un lien pour inclure une image de fond, qui a depuis été supprimée. Si vous voulez laisser ce message d'avertissement avec un fond blanc vous pouvez laisser le code tel quel, mais si vous voulez une image vous pouvez remplacer le lien dans le code par celui-ci : here.
Option 3 :
À quoi ça ressemble :
PAR ORDRE DU HAUT CONSEIL
Le fichier suivant est classifié de niveau X/XXXX. Les accès non autorisés sont interdits.
XXXX
Ce qu’il faut copier :
[[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|PAR ORDRE DU CONSEIL DES SUPERVISEURS##
##black|Le fichier suivant est classifié de niveau X/XXXX. L'accès sans une accréditation suffisante est formellement interdit.##
[[/=]]
= **##black|XXXX##**
@@ @@
@@ @@
[[/div]]
Option 4:
À quoi ça ressemble :
titre
sous-titre
description description description description description description description description description description description description description description description description description description
XXXX
Ce qu’il faut copier :
[[div class="orderwrapper"]]
[[div class="council1"]]
[[/div]]
[[div class="ordertitle"]]
+* titre
[[/div]]
[[div class="orderdescription"]]
_
+* sous-titre
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 :
À quoi ça ressemble :
Ce qu’il faut copier :
Note : Vous devez compléter tous les champs.
Format d’en-tête alternatif
Option 1:
À quoi ça ressemble :
Objet # : SCP-XXXX |
Classifié |
Classe : Euclide |
Niveau 4/XXXX |
Ce qu’il faut copier :
[[table style="border: none; width: 100%;"]]
[[row]]
[[cell]]
[[size 125%]]**Objet # :** SCP-XXXX[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Classifié**##[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell]]
[[size 125%]]**Classe :** Euclide[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Niveau 4/XXXX**##[[/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]]
----
Note : Remplacez 'image.jpg' par le nom/url de l’image que vous utilisez. Souvenez-vous que ce genre de boîte d'image va s’élargir pour occuper 100% de la largeur de l’article.
Option 2 :
À quoi ça ressemble :
Niveau 1 :
Niveau 2 :
Niveau 3 :
Niveau 4 :
Niveau 5 :
[Un grand merci à
TSATPWTCOTTTADC pour avoir réparé les en-têtes 1 et 3.]
Ce qu’il faut copier :
[[image header1/2/3/4/5.png]] (Précisez l'image)
------
Note : Ce code ne comprend pas le fichier de l’image. Vous pouvez soit la télécharger sur votre page ou copier l’adresse de l’image depuis ici.
Option 3 :
A quoi ça ressemble :
1/7777 LEVEL 1/7777
CLASSIFIED
|
 |
Objet # : SCP-7777
Classe : Euclid
|
2/7777-RU LEVEL 2/7777-RU
CLASSIFIED
|
 |
Objet # : SCP-7777-RU
Classe : Евклид
|
3/7777-KO LEVEL 3/7777-KO
CLASSIFIED
|
 |
Objet # : SCP-7777-KO
Classe : 유클리드(Euclid)
|
4/CN-7777 LEVEL 4/CN-7777
CLASSIFIED
|
 |
Objet # : SCP-CN-7777
Classe : Euclid
|
5/7777-FR LEVEL 5/7777-FR
CLASSIFIED
|
 |
Objet # : SCP-7777-FR
Classe : Euclide
|
1/7777 LEVEL 1/7777
CLASSIFIED
|
 |
Objet # : SCP-7777
Classe : Euclid
Safe
|
Ce qu’il faut copier :
[[include :fondationscp.wikidot.com:component:classified-decoration
|lv=1/2/3/4/5
|item=7777
|oc=Euclide
|lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
]]
[[include :fondationscp.wikidot.com:component:classified-decoration
|lv=1
|item=7777
|oc=--Euclid--
+ Safe
|lang=EN
]]
Ou alors vous voulez changer le texte de "NIVEAU" et de "CLASSIFIÉ" ?
[[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=<La traduction équivalente à "NIVEAU" dans votre langue>
|trans-classified=<La traduction équivalente à "CLASSIFIÉ" dans votre langue>
]]
Option 4 :
À quoi ça ressemble :
Objet # : SCP-XXXX |
 |
Classe : Keter |
Classifié Niveau 4 |
Niveau de Menace : Rouge ● |
Ce qu’il faut copier :
[[include :sandboxscpfr.wikidot.com:component:classification-stuff
|item=XXXX
|lvl=4
|class=Keter
|threat=Rouge
|threat-colour=#b01 [!-- La couleur de la petite boule. Si vous n'êtes pas sûr, garder la même que celle du niveau de danger. --]
]]
Option 5 :
À quoi ça ressemble :
(Cliquez-moi dessus !)
Ce qu'il faut copier :
[[html]]
<a target="_blank" href="http://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp" style="text-decoration: none; font-family: verdana; font-size: 16px">
<div style="color: white; background-color: black; text-align: center; border: 1px solid #000; margin-top: 1px; margin-bottom: 1px; margin-left: 1px; margin-right: 1px;">
<b>Niveau de Menace :</b> Noir
</div>
</a>
[[/html]]
Note : Pour changer la couleur, remplissez simplement le champs "background-color" avec white/blue/green/yellow/orange/red/black. Les couleurs avec un contraste élevé/bas peuvent nécessiter de changer le contenu du champ "color" par white/black par soucis de lisibilité.
Note : Cela rajoute une demi-seconde de chargement sur toutes les pages utilisant ce format. De ce fait, cela fonctionne mieux avec d’autres formats d’en-tête alternatifs, comme vu au-dessus. Basé sur les systèmes de Niveaux de Menace de la Branche Française.
Option 6 :
À quoi ça ressemble :
Ce qu'il faut copier :
[[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 : La valeur de |lv peut aller de 0 à 6.
Note Très Importante : Ce module est limité à l'insertion de caractères alphabétiques, numériques ainsi que quelques symboles (à cause d'un problème sous Edge). Si vous voulez utiliser d'autres caractères, veuillez les coder à l'aide de l'outil suivant !
Option 7 :
À quoi ça ressemble :
Ce qu'il faut copier :
[[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
Texte invisible
Au lieu d'utiliser "##white|TEXTE ICI...##" (qui ne marcherait pas sur un navigateur utilisant un "thème sombre"), vous devriez utiliser transparent à la place.
Essayez de surligner la boîte ci-dessous :
Ce texte est invisible mais peut être surligné.
Ce texte est blanc à la place.
Ce texte est invisible mais peut être surligné.
Ce texte est blanc à la place.
Ce qu'il faut copier :
##transparent|Votre texte ici.##
Avertissement : ceci ne fonctionne que sous Sigma-9 uniquement.
À quoi ça ressemble :
Votre texte ici.
Formats de type "Papier/Note"
Option 1
À quoi ça ressemble :
Corps du document ici. Vous aurez besoin d'utlisier " " sur les nouvelles lignes pour correctement espacer le texte.
Comme ceci.
Vous pouvez utiliser [[<]], [[=]] et [[>]] pour aligner différentes lignes et paragraphes afin de donner au texte un aspect convenable.
Ce qu’il faut copier :
IMPORTANT : Cette partie doit être mise en haut de la 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 {
line-height: 20px;
margin: 0;
}
[[/module]]
IMPORTANT : Cette partie se met là où vous voulez que le bloc apparaisse :
[[div class="page"]]
Corps du document ici. Vous aurez besoin d’utiliser "@@ @@" sur les nouvelles lignes pour correctement espacer le texte.
@@ @@
Comme ceci.
@@ @@
Vous pouvez utiliser [[<]], [[=]] et [[>]] pour aligner différentes lignes et paragraphes afin de donner au texte un aspect convenable.
@@ @@
[[>]]
Au plaisir.
[[/>]]
[[/div]]
Formats de type "Connexion/Déconnexion"
Option 1
À quoi ça ressemble :
Ce qu’il faut copier :
IMPORTANT : Cette partie doit être mise en haut de la 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: Cette partie se met là où vous voulez que le bloc apparaisse
[[div class="fakeprot"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# name
* title: ID
* default: <VOTRE ID>
* type: text
* rules:
* required: true
* maxLength:10
* minLength: 100
[[/module]]
[[div class="passw"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# affiliation
* title: MOT DE PASSE
* default: ・・・・・・・・・
* rules:
* required: true
* maxLength:10
* minLength: 100
[[/module]]
[[/div]]
[[/div]]
[[collapsible show="Connexion" hide="Déconnexion"]]
texte
[[/collapsible]]
Option 2
À quoi ça ressemble :
Ce qu’il faut copier :
[[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;">CONNEXION À SCiPNET</p>
<div class="input-container">
<input class="input-field" type="text" placeholder="Identifiant" 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="Mot de passse">
</div>
<button id="start_button" class="btn btn-success" onclick="window.open('REMPLACEZ CE TEXTE PAR L’URL DE LA PAGE SUR LAQUELLE VOUS VOULEZ QUE LE BOUTON CONNEXION VOUS REDIRIGE','_parent')" disabled> Connexion</button>
<br></br>
<button style= "font-weight: bold;" class="btn2 btn-success"> Mot de passe oublié ?</button>
</form>
</body>
</html>
[[/html]]
IMPORTANT :
- Le bouton connexion ne vous redirigera pas si le champ du mot de passe est vide.
- Ce format est fait pour les pages utilisant des offsets. Changez le texte temporaire par le lien vers votre offset.
Option 2-suboption
À quoi ça ressemble :
Ce qu'il faut copier :
Option avec lien : insérez l'url de votre page (ou "/ + nomdepage") dans "url"
[[include :scp-sandbox-3:component:login-module |url=http://fondationscp.wikidot.com/scp-style-resource|id=<VOTRE ID>|pw=<VOTRE MOT DE PASSE>|disc=true|value=lien]]
Option avec collapsible : inserez un collapsible dans le module
[[include :scp-sandbox-3:component:login-module |id=<VOTRE ID>|pw=<VOTRE MOT DE PASSE>|disc=true]]
[[collapsible show="Collapsible" hide="Déconnexion"]]
texte
[[/collapsible]]
Autre… ?
Attribut |
requis |
valeurs autorisées |
description |
id |
oui |
texte |
valeur de l'identifiant |
pw |
oui |
texte |
valeur du mot de passe |
url |
non |
http://example.com
/pagename |
quand rien n'est entré, le bouton de lien est caché |
value |
non |
texte |
valeur du bouton de lien |
disc |
non |
vraie |
quand défini, votre mot de passe n'est pas imprimé |
title |
non |
texte
lien |
valeur du titre |
Formats d’images customisés
Option 1
À quoi ça ressemble :
Passer votre souris sur l’image pour l’agrandir.
Ce qu’il faut copier :
[[include component:image-zoom name={$name}|caption={$caption}|width=300px|align=right]]
Changez {$name} par le nom de l’image ou par un lien vers celle-ci. Changez {$caption} par la légende que vous voulez donner à l’image. La largeur et l’alignement de l’image sont basés sur les standards des documents SCP, mais peuvent être changés.
Option 2
À quoi ça ressemble :
Passer votre souris sur l’image pour la voir.
Ce qu’il faut copier :
[[include :scp-sandbox-3:image-blur name={$name}|caption={$caption}|width=300px|align=right]]
Changez {$name} par le nom de l’image ou par un lien vers celle-ci. Changez {$caption} par la légende que vous voulez donner à l’image. La largeur et l’alignement de l’image sont basés sur les standards des documents SCP, mais peuvent être changés.
Option 3
À quoi ça ressemble :
Cliquez et maintenez pour agrandir l’image.
Ce qu’il faut copier :
[[include :scp-sandbox-3:component:image-zoom-2 name={$name}|caption={$caption}|width=300px|align=right]]
Changez {$name} par le nom de l’image ou par un lien vers celle-ci. Changez {$caption} par la légende que vous voulez donner à l’image. La largeur et l’alignement de l’image sont basés sur les standards des documents SCP, mais peuvent être changés.
Carrousel d’images
Une selection d’images sans vraiment de sens et sans message caché.
Les instructions d’utilisation peuvent être trouvées ici.
Outils utiles pour la sandbox
Option 1
À quoi ça ressemble :
Ce qu’il faut copier :
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 : Cette partie doit être mise en bas de la page.
Option 2
À quoi ça ressemble :
Ce qu’il faut copier :
[[include :smlt:7happy7:ut-ver2]]
|home=http://YOUR-HOMEPAGE.com
]]
Formats de Censure
Option 1
À quoi ça ressemble :
Ceci est un format qui vous permet de censurer des informations et de les rendre accessibles lorsqu’elles sont surlignées par la souris.
Ce qu’il faut copier :
[[span class="bblock"]]le texte ici[[/span]]
Comment le régler :
Ce code vous permet d’ajuster la couleur du texte surligné.
[[module CSS]]
.bblock:hover {color: white}
[[/module]]
Option 2
À quoi ça ressemble :
Ce format change la couleur du fond lorsque vous passez votre souris dessus, plutôt que celle du texte.
Ce qu’il faut copier :
[[span class="dblock"]]le texte ici[[/span]]
Comment le régler :
Ce code vous permet d’ajuster la couleur du fond.
[[module CSS]]
.dblock:hover {background: #f4f4f4}
[[/module]]
Formats de type "date actuelle"
Option 1
À quoi ça ressemble :
normal (affichage en "m")
exemple : La date d’aujourd’hui est .
[[div class="normalFontTime"]]
exemple : La date d’aujourd’hui est [[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/1 width="120" scrolling="no"]].
[[/div]]
normal (affichage en "s")
[[div class="normalFontTime"]]
exemple : [[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/2 width="130" scrolling="no"]]
[[/div]]
h1 (affichage en "m")
exemple :
[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/3 width="230" height="25" scrolling="no"]]
h1 (affichage en "s")
Exemple :
[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/4 width="260" height="25" scrolling="no"]]
gras (affichage en "m")
[[div class="normalFontTime"]]
[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/5 width="140" height="16" scrolling="no"]]
[[/div]]
gras (affichage en "s")
[[div class="normalFontTime"]]
[[iframe http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/6 width="160" height="16" scrolling="no"]]
[[/div]]
Comment introduire :
IMPORTANT : Cette partie doit être mise en haut de la page :
[[module css]]
@import url(http://scp-sandbox-3.wikidot.com/local--code/component:todaysdate/7);
[[/module]]
Après avoir rajouté le code ci-dessus, vous êtes prêt ! Vous pouvez utiliser ces iframes.
Option 2
À quoi ça ressemble :
La date d’aujourd’hui est 25 Feb 2021 00:19… ou pas !
Ce qu’il faut copier :
[[module ListPages limit="1" category="*" order="updated_at desc"]]
> La date d’aujourd’hui est %%updated_at|%Y/%m/%d%%... ou pas !
[[/module]]
Formatage de Chat Discord
Option 1 :
À quoi ça ressemble :
GOTO 20
Aujourd'hui à 16:28
yo, Corvus, t'es dans le coin ?

Corvas
Aujourd'hui à 16:28
oué
Quoi d'neuf
@GOTO 20

New Messages
GOTO 20
Aujourd'hui à 16:29
Voilà une image

GOTO 20
Aujourd'hui à 16:30
corvas
Aujourd'hui à 17:20
Ce qu'il faut copier :
Tout l'explication et le code sont disponibles ici.
Option 2 :
À quoi ça ressemble :
…..⇒ . @Rainer's a soft boi est entré dans l'arène !
A-paul-yon Aujour'hui à 12:00
Yo, @Rainer's a soft boi
Regarde ça.
Rainer's a soft boi Aujourd'hui à 12:00
C'est plutôt cool, mais lis cette phrase :
Il n'y a pas de consommation éthique dans le capitalisme.
Ce qu'il faut copier :
IMPORTANT : Ceci est le module CSS qui va en haut de la page.
[[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]]
C'est le code pour le chat lui-même. Placez-le où il doit apparaître dans l'article.
[[div class="discord-nagi"]]
[[size 110%]]##363940|.....##[[/size]][[size 200%]]##lightgreen|⇒##[[/size]] [[size 125%]]##363940|.## ##7289DA|@Rainer's a soft boi## est entré dans l'arène ![[/size]]
------
[[span class="user1"]]A-paul-yon[[/span]] [[size 75%]]##5B5E63|Aujour'hui à 12:00##[[/size]]
Yo, [[span class="tag"]]@Rainer's a soft boi[[/span]]
[[span class="highlight"]]Regarde ça.[[/span]]
------
[[span class="user2"]]Rainer's a soft boi[[/span]] [[size 75%]]##5B5E63|Aujourd'hui à 12:00 ##[[/size]]
C'est plutôt cool, mais lis cette phrase :
[[div class="quote"]]
Il n'y a pas de consommation éthique dans le capitalisme.
[[/div]]
[[/div]]
Option 3:
Wow, c'est littéralement aussi horrible que ce à quoi le mode Light ressemble normalement.
À quoi ça ressemble :
…..⇒ . @Rainer's a soft boi est entré dans l'arène !
A-paul-yon Aujourd'hui à 12:00
Yo, @Rainer's a soft boi
Regarde ça.
Rainer's a soft boi Aujourd'hui à 12:00
C'est plutôt cool, mais lis cette phrase :
Il n'y a pas de consommation éthique dans le capitalisme.
Ce qu'il faut copier :
IMPORTANT : Ceci est le module CSS qui va en haut de la page.
[[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]]
C'est le code pour le chat lui-même. Placez-le où il doit apparaître dans l'article.
[[div class="light"]]
[[size 110%]]##white|.....##[[/size]][[size 200%]]##lightgreen|⇒##[[/size]] [[size 125%]]##white|.## ##7289DA|@Rainer's a soft boi## est entré dans l'arène ![[/size]]
------
[[span class="
[[span class="user1"]]A-paul-yon[[/span]] [[size 75%]]##5B5E63|Aujourd'hui à 12:00 ##[[/size]]
Yo, [[span class="tag"]]@Rainer's a soft boi[[/span]]
[[span class="lighthighlight"]]Regarde ça.[[/span]]
------
[[span class="user2"]]Rainer's a soft boi[[/span]] [[size 75%]]##5B5E63|Aujourd'hui à 12:00 ##[[/size]]
C'est plutôt cool, mais lis cette phrase :
[[div class="lightquote"]]
Il n'y a pas de consommation éthique dans le capitalisme.
[[/div]]
[[/div]]
Extension des modules de Wikidot
module ListUsers
Option 1 (ListUsers pour les personnes non membres de Wikidot) :
À quoi ça ressemble :
Note : Si vous êtes connecté sur Wikidot, le module affiche votre ID ; sinon, le module affiche "invité".
Ce qu’il faut copier :
[[include :topia:listusers-1 users="."]]
##red|%%name%%##
[[include :topia:listusers-2]]
##blue|invité##
[[include :topia:listusers-3]]
Option 2 (méthodes [[include]] avec les variables ListUsers) :
À quoi ça ressemble :
SCP-XXXX et… je ne sais pas qui vous êtes.
Ce qu’il faut copier :
[[module ListUsers users="."]]
[[include :topia:inc-loop c=__________|p=<include-src>]]
|<value>=%%name%%
]]
[[/module]]
exemples :
[[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… et vous êtes //%%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 et… je ne sais pas qui vous êtes.
]]
[[include :topia:listusers-3]]
Modifier la barre de défilement
À quoi ça ressemble : Thème de Dr. Wondertainment et Thème des Solutions Fauniques de Wilson
Ce qu'il faut copier :
[[module CSS]]
::-webkit-scrollbar-thumb
{
[properties]; /* Ceci peut être quasiment n'importe quoi, de la couleur de la barre de défilement à la taille de la bordure ou l'ajout d'un surlignage. Est inclus ci-dessous le code de la page d'auteur de Nagiros pour exemple. */
background: rgba(247,168,184, .5);
border-radius: 5px;
border: 1px solid black;
}
[[/module]]
Reformater le bouton mobile de la barre latérale
À quoi ça ressemble : Thème des Solutions Fauniques de Wilson et la page d'auteur de Nagiros
Ce qu'il faut copier :
[[module CSS]]
@media (max-width: 767px) {
.open-menu a {
/* Si vous ne voulez pas changer une couleur en particulier, supprimez la ligne appropriée. */
border: 0.2em solid COLOR !important; /* Ceci affecte le contour circulaire. */
background-color: COLOR !important; /* Ceci affecte la couleur intérieure. */
color: COLOR !important; /* Ceci affecte la couleur des lignes à l’intérieur. */
}
}
[[/module]]
Compte à rebours amateur
À quoi ça ressemble :
Ce qu'il faut copier :
[[html]]
<script type="text/javascript">
today = new Date();
BigDay = new Date("january 1, 2050"); // Changez la date pour celle à laquelle vous voulez que le compte à rebours aille
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("Il reste seulement " + daysLeft + " jours, " + hrsLeft +" heures, et " + minsLeft + " minutes</H4> avant l'année 2050. <P>");
// Je suis parti de quelque chose trouvé sur moonfruit.com pour en arriver là. Les crédits leurs reviennent.
</script>
[[/html]]
Collapsibles Imbriqués
À quoi ça ressemble :
Ce qu'il faut copier :
[[include :scp-int:component:coltop show=TEXTE DU SHOW |hide=TEXTE DU HIDE]]
[[include :scp-int:component:coltop show=TEXTE DU SHOW |hide=TEXTE DU HIDE]]
[[include :scp-int:component:colend]]
[[include :scp-int:component:colend]]
Faux Liens/Collapsibles
À quoi ça ressemble :
+ Accès au Dossier Archivé de Classe-█K "Danse d'une Centaine de (DONNÉES SUPPRIMÉES)"
www.serpents-hand.org
Ce qu'il faut copier :
Modèle de Courriel
À quoi ça ressemble :
À : Chercheuse Natalie Reems
De : Chercheuse Tonya Skyler
Sujet : SUJET
OwO
À : Chercheuse Tonya Skyler
De : Chercheuse Natalie Reems
Sujet : Re : SUJET
UwU
Ce qu'il faut copier :
IMPORTANT : Ceci va en haut de votre 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 : Ceci va où vous voulez qu'il y ait l'échange de courriels.
[[=]]
[[collapsible show="Accéder au Courriel SCiPNET ? Un (1) nouveau message !" hide="Re : SUJET"]]
[[<]]
[[div class="email"]]
[[div class="tofrom"]]
**À :** Chercheuse Natalie Reems
**De :** Chercheuse Tonya Skyler
**Sujet :** SUJET
[[/div]]
------
OwO
[[/div]]
@@ @@
[[=]]
[[span class="blinkbar-nagi"]]NOUVEAU MESSAGE ![[/span]]
[[/=]]
@@ @@
[[div class="email"]]
[[div class="tofrom"]]
**À :** Chercheuse Tonya Skyler
**De :** Chercheuse Natalie Reems
**Sujet :** Re : SUJET
[[/div]]
------
UwU
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
Contenu de page s'effaçant
Option 1 :
À quoi ça ressemble :
Contenu de la page à ne pas effacer
Contenu de la page à effacer
Contenu de la page à ne pas effacer
Contenu de la page à effacer
Contenu de la page à ne pas effacer
Ce qu'il faut copier :
Module CSS
Vous pouvez modifier certains éléments à votre guise avec les variables.
[[module css]]
@import url('http://smlt.wdfiles.com/local--code/ukwhatn%3Afadeout/1');
/*== VARIABLES ==*/
:root {
/* Couleur de fond (Par défaut : blanc) */
--fadeout-background: white;
/* Durée d'effacement */
--fadeout-time: 1s;
/* En-tête Rogné (Pour effacer l'ombre sous l'en-tête)
Si vous utilisez un thème autre que Sigma-9 (par défaut), veuillez changer cette variable. */
--cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);
}
[[/module]]
Partie s'effaçant
Seuls les éléments dans l'enveloppe d'effacement sont effacés.
[[span class="escape"]]texte[[/span]] n'est pas effacé. Il peut être utilisé autant de fois que souhaité et n'a pas de limite de taille.
Contenu de la page à ne pas effacer
[[div_ class="fadeout-wrapper"]]
Contenu de la page à effacer
[[span class="escape"]]Contenu de la page à ne pas effacer[[/span]]
Contenu de la page à effacer
[[collapsible show="Cliquer pour effacer" hide=" "]]
[[div class="cover"]]
@@@@
[[/div]]
[[/collapsible]]
[[/div]]
Contenu de la page à ne pas effacer
Option 2 : Apparition d'image après l'effacement
À quoi ça ressemble :
Contenu de la page à ne pas effacer
Contenu de la page à effacer
Contenu de la page à ne pas effacer
Ce qu'il faut copier :
Module CSS
Vous pouvez modifier certains éléments à votre guise avec les variables.
[[module css]]
@import url('http://smlt.wdfiles.com/local--code/ukwhatn%3Afadeout/1');
/*== VARIABLES ==*/
:root {
/* Couleur de fond (Default: white) */
--fadeout-background: white;
/* Durée d'effacement */
--fadeout-time: 1s;
/* Durée d'apparition de l'image (Pour Option 2) */
--img-fadein-time: 1s;
/* Délai d’apparition de l'image (Pour Option 2) */
--img-fadein-delay: 2s;
/* En-tête Rogné (Pour effacer l'ombre sous l'en-tête)
Si vous utilisez un thème autre que Sigma-9 (par défaut), veuillez changer cette variable. */
--cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);
}
[[/module]]
Partie s'effaçant
Seuls les éléments dans l'enveloppe d'effacement sont effacés.
[[span class="escape"]]texte[[/span]] n'est pas effacé. Il peut être utilisé autant de fois que souhaité et n'a pas de limite de taille.
Contenu de la page à ne pas effacer
[[div_ class="fadeout-wrapper"]]
Contenu de la page à effacer
[[collapsible show="CLIQUER POUR EFFACER" hide=" "]]
[[div class="cover"]]
@@ @@
[[/div]]
[[div_ class="fadein-img"]]
[[=image [image URL]]]
[[/div]]
[[/collapsible]]
[[/div]]
Contenu de la page à ne pas effacer