Ressources de style SCP

• 
  
  
  close

  Crédits

  Titre original : SCP Style Resource
  Auteur : Shaggydredlocks
  Traducteur : Bob-Bob-Bob
  Date de publication originale : 27 janvier 2018

  ---

  close
  
  

Bonjour et bienvenue !

Cette page a pour but de réunir divers codes normalement ennuyeux à créer dans un format facile à "copier-coller" pour vos articles sur le site, comme le font par exemple certains centres de Groupes d'Intérêt avec leurs formats respectifs.

Si vous voulez ajouter un format à cette liste, vous êtes le bienvenu ! Pensez simplement à demander d'abord à un membre du staff pour que le code soit vérifié avant son intégration.

Cette liste n'a pas pour but d'être exhaustive, elle rassemble juste quelques idées intéressantes. Aucun de ces formats n'est obligatoire et chacun est encouragé à se diversifier en cherchant un peu partout voire en apprenant à créer ses propres formats.

Note : Plusieurs des formats à copier incluent un morceau de code qui commence par "[[module CSS]]" et finit par "[[/module]]". Si vous utilisez plusieurs formats de ce genre sur une même page, vous n'avez besoin que d'un exemplaire de chacune de ces deux balises et pouvez mettre le code de tous les formats entre les deux.

Les modules CSS tout juste ajoutés à une page ne s'appliquent qu'une fois celle-ci enregistrée. La fonction "Aperçu" ne marche pas avec le contenu des modules CSS.

Liens utiles

Si vous cherchez de l’aide pour le formatage Wikidot de base, allez voir le guide de syntaxe.

Pour du code plus avancé, jetez un œil au guide de formatage avancé.

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 :

+ show block

[[table  style="border-collapse: collapse; width: 85%; margin: 2em auto"]]
[[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	DONNÉES	EFFETS	NOTES
DATE	DONNÉES	EFFETS	NOTES
DATE	DONNÉES	EFFETS	NOTES
DATE	DONNÉES	EFFETS	NOTES
DATE	DONNÉES	EFFETS	NOTES
DATE	DONNÉES	EFFETS	NOTES

Ce qu’il faut copier :

+ show block

[[module CSS]]
#page-content table,
#page-content table th,
#page-content table td {
    border: 1px solid silver;
}
#page-content table th {
    font-weight: bold;
}
[[/module]]

[[table]]
[[row]]
[[hcell]]
Date
[[/hcell]]
[[hcell]]
DONNÉES
[[/hcell]]
[[hcell ]]
Effets
[[/hcell]]
[[hcell]]
Notes
[[/hcell]]
[[/row]]
[[row]]
[[cell]]
DATE
[[/cell]]
[[cell]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell]]
EFFETS
[[/cell]]
[[cell]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell]]
DATE
[[/cell]]
[[cell]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell]]
EFFETS
[[/cell]]
[[cell]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell]]
DATE
[[/cell]]
[[cell]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell]]
EFFETS
[[/cell]]
[[cell]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell]]
DATE
[[/cell]]
[[cell]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell]]
EFFETS
[[/cell]]
[[cell]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell]]
DATE
[[/cell]]
[[cell]]
[[=]]
DONNÉES
[[/=]]
[[/cell]]
[[cell]]
EFFETS
[[/cell]]
[[cell]]
NOTES
[[/cell]]
[[/row]]
[[/table]]

Option 3

À quoi ça ressemble :

+ cliquez pour rejouer

ACCÈS AUTORISÉ

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 :

+ show block

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 :

+ cliquer pour lancer

Attendez 10 secondes…

SCiP NET_{ver. β}

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]

Ce qu’il faut copier :

+ show block

[[div class="blockquote"]]
= **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 :

+ show block

[[div class="blockquote" style="border-radius: 10px; width: 96.5%;"]]
**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 :

+ show block

IMPORTANT : Cette partie doit être mise en haut de la page.

[[module css]]
.danke {
    padding: 0.5em 1.5em;
    margin: 1em 0;
    font-family: monospace;
    font-size: 1.1em;
}
.agent {
    background-color: #020;
    border: 3px solid  #5a5;
    color: #7c7;
}
.site {
    background-color:#220;
    border: 3px solid #aa5;
    color: #dd7;
}
[[/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).

| DÉTAILS
| DÉTAILS

TEXTE TEXTE TEXTE
ENCORE DU TEXTE

ENCORE

ET TOUJOURS PLUS DE TEXTE À LIRE

Option 4 :

LES TRUCS VONT ICI

+ show block

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

[[div style="background-color: white; padding: 0.1em 1.5em; border: solid 3px lightgray; margin: 1em; 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 :

+ show block

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 :

▶LANCER

la première ligne
la deuxième ligne
la dernière ligne
TEXTE
PLUS DE TEXTE

Ce qu’il faut copier :

+ show block

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 :

Impossible de vérifier votre ID Wikidot.|

Clic !

Ce qu’il faut copier :

+ show block

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"]]
Impossible de 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 :

+ show block

[[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 :

+ show block

[[div style="border: solid 1px #999; background:#f2f2c2; padding: 0.5em ; margin-bottom: 1em;"]]
[[=]]
++++ 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 :

+ show block

[[div style="background: url(http://fondationscp.wdfiles.com/local--files/host/logo-scp-alt.png) center no-repeat; width: 95%; margin: 1em auto; padding: 0.1em 1.5em; border: solid 2px black; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
##ff5c48|[[size 150%]] **ATTENTION : LE FICHIER SUIVANT EST CLASSIFIÉ DE NIVEAU #/XXXX** [[/size]]##
----
[[size larger]] **TOUTE TENTATIVE D’ACCÈS AU FICHIER SANS UNE AUTORISATION DE NIVEAU #/XXXX SERA ENREGISTRÉE ET ENTRAÎNERA DES SANCTIONS DISCIPLINAIRES IMMÉDIATES.**[[/size]]
[[/div]]

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 :

+ show block

[[div style="background: url(http://fondationscp.wdfiles.com/local--files/host/logo-scp-transparent.png) bottom center no-repeat; background-size: contain; text-align: center; width: 80%; margin: 0 auto; font-size: 20px;"]]
@@ @@
@@ @@
@@ @@
@@ @@
[[=]]
++* PAR ORDRE DU HAUT CONSEIL
Le fichier suivant est classifié de niveau X/XXXX. Les accès non autorisés sont interdits.
**XXXX**
[[/=]]
@@ @@
@@ @@
[[/div]]

[[/code]]

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 :

+ show block

[[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 :

+ show block

Note : Vous devez compléter tous les champs.

Format d’en-tête alternatif

Option 1:

À quoi ça ressemble :¹³

Objet no : SCP-XXXX	Classifié
Classe : Euclide	Niveau 4/XXXX

---

SCP-XXXX.

---

Ce qu’il faut copier :

+ show block

[[table style="border: none; width: 100%;"]]
[[row]]
[[cell]]
[[size 125%]]**Objet n^^o^^ :** 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 :

+ show block

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 :

+ show block

[[image header1/2/3/4/5.png]] (Précisez l'image)

------

Note : Ce code ne comprend pas le fichier de l’image. Vous devez la télécharger ici puis la téléverser sur votre article pour que le code fonctionne.

Option 3 :¹⁵

À quoi ça ressemble :

CLASSIFIÉ 1/7777 NIVEAU 1/7777

Objet no : SCP-7777 Classe : Euclide

Ce qu’il faut copier :

+ show block

[[include 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 component:classified-decoration
|lv=1
|item=7777
|oc=--Euclide--
+ Sûr
|lang=FR
]]

Ou alors vous voulez changer le texte de "NIVEAU" et de "CLASSIFIÉ" ?

[[include component:classified-decoration
|lv=1/2/3/4/5
|item=7777
|oc=Euclid
|lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
|trans-level=<Texte de remplacement pour "NIVEAU">
|trans-classified=<Texte de remplacement pour "CLASSIFIÉ">
]]

Option 4 :

À quoi ça ressemble :

Objet # : SCP-XXXX		Classe : Keter
Classifié Niveau 4		Niveau de Menace : Rouge ●

Ce qu’il faut copier :

+ show block

[[include 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 !)

+ Et dans d'autres couleurs...

Ce qu'il faut copier :

+ show block

[[html]]
<a target="_blank" href="http://fondationscp.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 :

+ Autre niveau...

Ce qu'il faut copier :

+ show block

[[include :fondationscp: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 :

+ Autres niveaux...

Ce qu'il faut copier :

+ show block

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

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

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

Texte invisible

Au lieu d'utiliser "##white|TEXTE ICI...##" (qui ne marcherait pas sur un navigateur utilisant un thème sombre par exemple), 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'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.

Ce qu’il faut copier :

+ show block

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: 1em;
    margin-bottom: 1em;

    box-shadow: 0 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 :

ID

26bc12ee67721091638bcbd6d64ade50_1657148895

MOT DE PASSE

0746191b4dab000addb4e7c8c2452d85_1657148895

Connexion

texte

Ce qu’il faut copier :

+ show block

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 :

+ show block

[[html]]
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Verdana;}
* {box-sizing: border-box;}
 
.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
 
}
 
.input-field:focus{
border-style: solid;
transition: 0.5;
border-color: maroon;
border-width: 2px;
 
}
 
.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    transition: 0.5s;
 
}
 
.btn:focus {
  outline: 0;
}
 
.btn {
  background-color: Maroon;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 50%;
  opacity: 0.9;
  transition: 0.09s;
  border-radius: 3px;
  transition 0.8s;
}
 
.btn:hover {
  opacity: 1;
  transition: 0.8s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.7);
}
 
.btn:active {
  transition: 0.09s;
  transform: translateY(1px);
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
 
.btn2 {
    background-color: white;
    border: none;
    cursor: pointer;
 
}
 
p{
font-family: Helvetica;
margin-bottom: 5%;
}
</style>
</head>
<body>
 
<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<p style="font-size:55px; font-weight: bold;">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 :

SCiPNET LOGIN

name
affiliation

a889829c20f369aa649ec10a230c1a71_1657148895

lien

SCiPNET LOGIN

name
affiliation

a889829c20f369aa649ec10a230c1a71_1657148895

Login

Collapsible

texte

Ce qu'il faut copier :

+ show block

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 :

+ show block

[[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 :

+ show block

[[include :fondationscp:component: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 :

+ show block

[[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 :

Montrer l'outil

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 :

+ show block

 
 
 

edit


view source


history


files

 
 

Table of Contents

---

Montrer l'outil

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]]

+ Les autres...

normal (affichage en "s")

exemple :

[[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")

exemple :

[[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")

exemple :

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

Comment introduire :

+ show block

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 06 Jul 2022 20:20… ou pas !

Ce qu’il faut copier :

+ show block

[[module ListPages limit="1" category="*" order="updated_at desc"]]
> La date d’aujourd’hui est %%updated_at|%Y/%m/%d%%... ou pas !
[[/module]]

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

mv_sk1r.tar.gz

2.71 KB

corvas

Aujourd'hui à 17:20

butts.zip

512 MB

Ce qu'il faut copier :

Toute l'explication et le code sont disponibles ici.

Cassé, en attente de réparation —]

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 :

+ show block

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 :

+ show block

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 :

invité

Note : Si vous êtes connecté sur Wikidot, le module affiche votre ID ; sinon, le module affiche "invité".

Ce qu’il faut copier :

+ show block

[[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 :

+ show block

[[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 :

+ show block

[[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 :

+ show block

[[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 :³¹

+ show block

[[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 :

• • _
  + A- A

  AAAAAAAAAAAAAAAAAAA!

  • • _
    + Plus de A ?- AAAAAAAA

    A

Ce qu'il faut copier :

+ show block

[[include component:coltop show=TEXTE POUR AFFICHER |hide=TEXTE POUR FERMER]]
[[include component:coltop show=TEXTE POUR AFFICHER |hide=TEXTE POUR FERMER]]
[[include component:colend]]
[[include 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 :

+ show block

[# Lien texte.]

Modèle de Courriel

À quoi ça ressemble :³³

---

Accéder au Courriel SCiPNET ? Un (1) nouveau message !

À : Chercheuse Natalie Reems
De : Chercheuse Tonya Skyler
Sujet : SUJET

---

OwO

NOUVEAU MESSAGE !

À : Chercheuse Tonya Skyler
De : Chercheuse Natalie Reems
Sujet : Re : SUJET

---

UwU

Ce qu'il faut copier :

+ show block

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

CLIQUER POUR EFFACER

Contenu de la page à ne pas effacer

Ce qu'il faut copier :

+ show block

---

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: var(--ct_bg_header-image);

}

[[/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

CLIQUER POUR EFFACER

Contenu de la page à ne pas effacer

Ce qu'il faut copier :

+ show block

---

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: var(--ct_bg_header-image);

}

[[/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

Footnotes

1. Comme vu dans SCP-2682

2. Comme vu dans SCP-2832

3. Comme vu dans SCP-2571

4. Comme vu dans SCP-1730

5. Comme vu dans SCP-2409

6. Comme vu dans Quand les pissenlits éclosent

7. Comme vu dans Cassette audio #1006-1, SPC-710-JP et SCP-3648
※SCP-3648 utilise uniquement l’animation de la cassette audio.
※L'image de la cassette audio a été créée par indonootoko de la branche JP.

8. Comme vu dans SCP-4224, SCP-3241 & Système Automatisé d'Administration d'Amnésique Passif Ver. 17.09

9. Comme vu dans SCP-835

10. Comme vu dans SCP-3143

11. Comme vu dans la proposition de indonootoko

12. Comme vu dans SCP-4051.

13. Image volée de SCP-3935 de djkaktus.

14. Comme vu dans SCP-2983 et d'autres à venir.

15. Comme vu dans SCP-1970-JP, SCP-1370-JP et SCP-4260.

16. Comme vu dans EE-3570 et SCP-4792. Crédits à Yossipossi, Lt Flops, et KindlyTurtleClem.

17. Note : Une version de ce code et des informations préliminaires adaptée en "component" est disponible ici.

18. Comme vu dans SCP-4003

19. Source : http://scp-jp-sandbox2.wikidot.com/inc:fakeprot
Auteur original : Nanimono Demonai

20. Comme vu dans SCP-1370-JP.

21. Comme vu dans SCP-4224, SCP-4577 et SCP-3662

22. Comme vu dans ERREUR : le Champ ne Peut Être Lloyd

23. Comme vu dans la Gallerie d'Ilustrations d'Alitair Hawks

24. Traduit pour SCP-CN par Sekai_s

25. Traduit pour SCP-KO par Aiken Drum

26. Traduit pour SCP-JP par 7happy7

27. Le crédit de ces deux formats va à Nanimono Demonai.

28. Le crédit de ce format va à C-take de la branche JP.
Source : http://shitake-crude-production.wikidot.com/javascript:timeviewer

29. Source : http://smlt.wikidot.com/boyu12:inc-loop
Auteur original : Boyu12

30. Image volée à SCP-3935 de djkaktus.

31. NdT : La date à rentrer doit être écrite selon le format suivant : mois (en anglais) jour, année.

32. Comme vu dans SCP-4415.

33. Comme vu dans Système Automatisé d'Administration d'Amnésique Passif Ver. 17.09, La Bête Sous la Bibliothèque et SCP-4415.

34. Comme vu dans SCP-1630-JP et SCP-1286-JP

35. L'image d'exemple est Long Chemin de Randonnée sous licence CC0