-
Crédits
Titre original : SCP Style Resource
Auteur : Shaggydredlocks
Traducteur : Bob-Bob-Bob
Date de publication originale : 27 janvier 2018
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.
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; 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 |
|
EFFETS |
NOTES |
| DATE |
|
EFFETS |
NOTES |
| DATE |
|
EFFETS |
NOTES |
| DATE |
|
EFFETS |
NOTES |
| DATE |
|
EFFETS |
NOTES |
| DATE |
|
EFFETS |
NOTES |
Ce qu’il faut copier :
[[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 :
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]
Ce qu’il faut copier :
[[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 :
[[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 :
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 :
[[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 :
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 :
Impossible de 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"]]
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 :
[[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 #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 :
[[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 :
[[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 :
[[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 no : SCP-XXXX |
Classifié |
| Classe : Euclide |
Niveau 4/XXXX |
Ce qu’il faut copier :
[[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 :
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 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 :
[[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 :
[[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 !)
Ce qu'il faut copier :
[[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 :
Ce qu'il faut copier :
[[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 :
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 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.
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: 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 :
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 :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 :
[[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
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 03 Oct 2024 11:16… 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]]
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 :
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 :
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 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 :
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: 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
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: 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
indonootoko de la branche JP.
Aiken Drum
Nanimono Demonai.
C-take de la branche JP.