À l'attention du personnel
Étant donné le récent constat d'une faute de goût évidente du personnel quant à la mise en page des nombreux documents transitant par le biais de l'administration, le Comité d’Éthique a décidé de se réunir en urgence afin de prendre des mesures radicales, mais nécessaires.
Il n'est pas tolérable et ne sera plus toléré le fait que le personnel ose utiliser de manière quotidienne et constante une mise en page plus que basique et peu attirante, se limitant à du texte sur fond blanc, alors que la qualité de leurs travaux pourrait être mise en valeur, sublimée, exaltée par une mise en forme bien plus sympathique, recherchée, et agréable à l’œil.
Après de nombreuses recherches, nous avons été contraints de nous rendre à l'évidence : nous n'avions plus le choix. Il fallait impérativement faire appel au plus grand maniaque de la branche française de la Fondation.
Après quelques recherches, et la signature d'un contrat confidentiel, dont les termes ne seront pas divulgués ici, le Pr Kendrick s'est vu attribuer des fonds et des moyens plus que conséquents (notamment une cravache, un dictaphone, une accréditation de niveau 4-KO.NAR, des rangers, des cordes vocales en titane, une voix de sergent névrosé, du sadisme et beaucoup de café), ainsi qu'une équipe talentueuse et déterminée pour pouvoir aujourd'hui vous présenter des mises en forme plus ou moins complexes et de tous types qui viendront bientôt sublimer vos travaux.
C'est donc avec un grand honneur et une joie non dissimulée que nous vous proposons cet essai sur la syntaxe Wikidot.
Cordialement,
- Directeur Garrett
- Première partie
- Seconde partie
- Arguments d'espacement
- Arguments de contenu
- Arguments de bordure
- Arguments de présentation
- Conseils
- Troisième partie
- Lettre 1
- Lettre 2
- Lettre 3
- Lettre 4
- Fiche informative 1
- Fiche informative 2
- Fichier informatique 1
- Billet informatif 1
- Chatroom 1
- Chatroom 2
- Conclusion
Première partie
Introduction
Bienvenue dans cet essai sur la syntaxe Wikidot !
Dans cet essai, il sera question d'initier les plus courageux d'entre vous à l'utilisation des blocs-divs.
Enfin "les plus courageux"…
Tout le monde en fait.
Cet essai est construit de manière à être utile à tous, quel que soit le niveau de maitrise du codage Wikidot.
Il est composé de 3 grandes parties : une partie essentiellement faite de blabla dans laquelle je réponds à certaines questions et donne quelques explications générales, une partie où j'explique de manière détaillée l'utilisation de chaque argument, et une partie où je donne quelques exemples de mises en page dont j'ai détaillé le code.
La première partie va poser les bases, la seconde va vous permettre de comprendre l'utilité et/ou l'utilisation des arguments, et la troisième va vous permettre de voir ce que ça donne une fois mis en œuvre.
Les exemples donnés lors de la troisième partie sont libres d'utilisation : vous pouvez vous en servir comme bon vous semble et les modifier selon votre convenance.
Les codes de la troisième partie sont entrecoupés de "balises" invisibles.
Lorsque l'on code en Wikidot, lorsque l'on encadre une ligne ou un paragraphe avec une balise spéciale comme ceci :
[!-- Texte --]
Le texte entre les deux balises apparait dans le code source de la page, dans le menu d'édition, mais pas sur le résultat final, et est donc invisible à moins de fouiller dans le code.
Ainsi, dans la troisième partie, j'utilise ces balises pour découper le code de manière plus abordable.
Afin de faire ressortir ces balises du reste du code, j'ai ajouté un █ au début et à la fin de chaque ligne d'explication, comme ceci :
[!--█ Entre les deux carrés noirs se trouvent les explications, et vu que ça ressort du reste, c'est pratique █--]
Ainsi, même si les deux premières parties ne vous intéressent pas, vous pouvez simplement aller piocher dans la troisième partie sans être perdu, il vous suffira alors de remplacer le texte par ce que vous voulez écrire, et le tour est joué !
Cet essai n'a pas la prétention de vous apprendre à coder à partir de rien (même si vous verrez qu'avec un peu d'entrainement, ce n'est pas si compliqué), mais au moins de vous apprendre comment modifier du code déjà existant.
Première partie | Introduction
Table des matières
- Première partie
- Introduction
- Table des matières
- Questions et réponses
- Seconde partie
- Introduction
- Arguments
- Arguments d'espacement
- Padding
- Margin
- Arguments de contenu
- Color
- Background
- Opacity
- Arguments de bordure
- Border-Width
- Border-Color
- Border-Style
- Border
- Border-Top/Bottom/Right/Left
- Border-Radius
- Arguments de présentation
- Width et Height
- Overflow
- Display
- Box-Shadow
- Arguments d'espacement
- Quelques conseils
- Troisième partie
- Introduction
- Exemples
- Lettre 1
- Lettre 2
- Lettre 3
- Lettre 4
- Fiche informative 1
- Fiche informative 2
- Fichier informatique 1
- Billet informatif 1
- Chatroom 1
- Chatroom 2
- Conclusion
Première partie | Table des matières
Questions et réponses
Si vous avez des questions, n'hésitez pas à les poser dans la section discussion par page. J'essayerai de répondre à toutes, et les plus pertinentes seront ajoutées dans cette section.
Première partie | Questions et réponses
Sécuriser. Contenir. Protéger.
Seconde partie
Introduction
Bienvenue dans la seconde partie !
Les blocs-divs sont une partie assez complexe du code Wikidot lorsqu'on n'a pas les bases.
Cette partie est là pour ça : vous donner les bases.
Ici seront détaillés les arguments utilisables et utilisés.
Avant toute chose, gardez en mémoire que la plupart de ces arguments ne sont que très rarement utilisés seuls, et certains ne marchent qu'accompagnés d'autres arguments.
Ici, les différents arguments seront classés en 4 catégories :
- Les arguments d'espacement : Tout ce qui concerne l'espacement entre les bords du cadre et l'intérieur/l'extérieur du cadre.
- Les arguments de contenu : Tout ce qui concerne ce qu'il y a à l'intérieur du cadre, comme le fond, le texte…
- Les arguments de bordure : Oui, c'est une catégorie entière. Les bords du cadre sont la partie la plus longue et la plus détaillée du code Wikidot, avec une multitude d'arguments.
- Les arguments de présentation : Tout ce qui concerne la manière dont agit le cadre par rapport au reste.
Cette partie, à défaut de vous apprendre à le maitriser, va vous permettre d'au moins comprendre le code.
Je vous laisse donc lire les explications, et je vous retrouve ensuite pour vous donner quelques conseils !
Seconde partie | Introduction
Sécuriser. Contenir. Protéger.
Padding
Cet argument permet de décider de l'écart entre la bordure du cadre et l'intérieur du cadre.
Les arguments sont des chiffres suivis de "px". La mention de l'unité est obligatoire. (→Exemple 1)
Pour que l'écart avec les bords soit différent selon le côté, il ne faut pas entrer une valeur, mais 4, dans l'ordre Haut Droite Bas Gauche. (→Exemple 2)
Attention, pour du texte, en fonction du cadre, il est possible que la valeur 0 du haut et du bas soient l'équivalent de 15 à droite et à gauche. Donc, pour avoir un cadre à égale distance de chaque côté, il faut qu'il y ait 15px de plus à droite et à gauche qu'en haut et qu'en bas. (→Exemple 3)
Note : Padding n'accepte pas les valeurs négatives. Une valeur négative sera considérée comme 0.
- Exemple n°1 : "padding: 15px" va mettre 15 pixels d'écart entre les bords et le contenu à l'intérieur du cadre.
Exemple n°1
- Exemple n°2 : "padding: 10px 0px 15px 30px" va mettre 10 pixels d'écart entre le contenu et le bord du haut, 0 entre le contenu et le bord de droite, 15 entre le contenu et le bord du bas, et 30 entre le contenu et le bord de gauche.
Exemple n°2
- Exemple n°3 : "padding 10px 25px 10px 25px" va mettre le cadre à 10 pixels d'écart en haut et en bas, et à 25 pixels d'écart à droite et à gauche. Comme 10+15=25, tous les bords seront à égale distance du texte.
Exemple n°3
Margin
Cet argument permet de décider de l'écart entre la bordure du cadre et l'extérieur du cadre.
Les arguments sont des chiffres suivis de "px". La mention de l'unité est obligatoire. (→Exemple 1)
Pour que l'écart avec les bords soit différent selon le côté, il ne faut pas entrer une valeur, mais 4, dans l'ordre Haut Droite Bas Gauche. (→Exemple 2)
Margin est donc semblable à Padding, mais orienté vers l'extérieur.
Si aucune valeur de margin n'est donnée, les valeurs de base sont 1 6 1 6.
Margin accepte des valeurs négatives, et cela aura pour effet de rapprocher le bloc de l'extérieur. (→Exemple 3)
Note : Si plusieurs éléments sont sur une même ligne, l'élément ayant la plus grande valeur de margin pour les bordures supérieures ou inférieures déterminera l'écartement de la ligne entière.
- Exemple n°1 : Block 1 : "margin: 15px" va mettre 15 pixels d'écart entre les bords et le contenu à l'intérieur du cadre. Les blocs 2 et 3 ont un margin de 0.
Exemple n°1 : Bloc 1
Exemple n°1 : Bloc 2
Exemple n°1 : Bloc 3
- Exemple n°2 : Bloc 2 : "margin: 10px 30px 0px 15px" va mettre 10 pixels d'écart entre l'extérieur et le bord du haut, 30 entre l'extérieur et le bord de droite, 0 entre l'extérieur et le bord du bas, et 15 entre l'extérieur et le bord de gauche. Les blocs 1 et 3 ont un margin de 0.
Exemple n°2 : Bloc 1
Exemple n°2 : Bloc 2
Exemple n°2 : Bloc 3
- Exemple n°3 : Bloc 2 et 4 : "padding -1px 0px -1px 0px" ; Bloc 3 : "padding -1px -6px -1px -6px" va coller les cadres. Les blocs 1 et 5 ont un margin de 0.
Exemple n°3 : Bloc 1
Exemple n°3 : Bloc 2
Exemple n°3 : Bloc 3
Exemple n°3 : Bloc 4
Exemple n°3 : Bloc 5
- Exemple n°4 : Bloc 3 : "padding 50px 0px 0px 0px" va coller les cadres. Les blocs 1, 2, 4 et 5 ont un margin de 0.
Exemple n°3 : Bloc 1
Exemple n°3 : Bloc 2
Exemple n°3 : Bloc 3
Exemple n°3 : Bloc 4
Exemple n°3 : Bloc 5
Color
Cet argument permet de décider de la couleur du texte à l'intérieur du cadre.
Il accepte les couleurs par leurs noms en anglais (→ Exemple 1) comme par leurs codes HTML (→ Exemple 2).
Pour les codes HTML des couleurs, voici un lien qui permet d'avoir facilement ledit code : http://html-color-codes.info/Codes-couleur-HTML/
- Exemple 1 : "color: red" permet d'obtenir un texte rouge.
Exemple 1
- Exemple 2 : "color: #0000FF" permet d'obtenir un texte bleu.
Exemple 2
Background
Cet argument permet de déterminer la composition du fond du cadre.
Il accepte les couleurs par leurs codes HTML (→ Exemple 1) comme par leurs noms en anglais (→ Exemple 2).
Pour les codes HTML des couleurs, voici un lien qui permet d'avoir facilement ledit code : http://html-color-codes.info/Codes-couleur-HTML/
Il accepte aussi les images, mais doit être écrit différemment, de la manière :
background: url(Url de l'image) [position] [répétition]
[position] signifie la position de l'image, les arguments attendus sont donc center, left, right, top ou bottom.
Il est possible d'utiliser deux arguments de positions qui ne se contredisent pas.
[répétition] désigne le nombre de répétitions de l'image : si cet argument n'est pas précisé, l'image remplira le cadre en mosaïque. Les autres arguments sont : "repeat-x" pour répéter l'image horizontalement, "repeat-y" pour répéter l'image verticalement, et "no-repeat" pour que l'image ne soit pas répétée.
L'argument "background-size:" permet de déterminer la taille de l'image utilisée.
Les arguments possibles sont : deux valeurs d'unité px (pour déterminer les dimensions de l'image), deux pourcentages (Pour avoir des dimensions relatives à celles de l'image originale), ou contain (pour que l'image s'adapte au cadre). (→ Exemple 3,4,5,6)
- Exemple 1 : "background: #00FF00" va mettre un fond vert au cadre.
Exemple n°1
- Exemple 2 : "background: yellow" va mettre un fond jaune au cadre.
Exemple n°2
- Exemple 3 : "background: url(https://image.noelshack.com/fichiers/2017/19/1494321508-photo-camera-black-tool-icon-icons-com-72960.png) center no-repeat ;" permet d'avoir une image de fond centrée et dans ses dimensions d'origine.
Exemple n°3
- Exemple 4 : "background: url(https://image.noelshack.com/fichiers/2017/19/1494321508-photo-camera-black-tool-icon-icons-com-72960.png) center no-repeat ; background-size: 45px 45px" permet d'avoir une image de fond centrée et de côté 45.
Exemple n°4
- Exemple 5 : "background: url(https://image.noelshack.com/fichiers/2017/19/1494321508-photo-camera-black-tool-icon-icons-com-72960.png) top left repeat-x ; background-size: 30% 30%" permet d'avoir une image de fond qui se répète dont le point de départ est le coin supérieur gauche du cadre, et dont les dimensions sont 30% des dimensions d'origine.
Exemple n°5
- Exemple 6 : "background: url(https://image.noelshack.com/fichiers/2017/19/1494321508-photo-camera-black-tool-icon-icons-com-72960.png) center no-repeat; background-size: contain" permet d'avoir une image de fond centrée et dont les dimensions s'adaptent au cadre.
Exemple n°6
Opacity
Cet argument permet de décider de l'opacité d'un élément.
Le seul argument accepté par opacity est une valeur sans unité comprise entre "0.0" et "1.0". (→ Exemples 1, 2)
/!\ Pensez à mettre un point "." et pas une virgule "," dans le chiffre. /!\
L'argument opacity concerne tout l'élément dans lequel il est placé.
- Exemple 1 : "opacity:0.8" permet d'obtenir un cadre légèrement transparent.
Exemple 1 : cadre normal
Exemple 1 : Opacité réglée à 0.8
- Exemple 2 : "opacity:0.4" permet d'obtenir un cadre grandement transparent.
Exemple 2 : cadre normal
Exemple 2 : Opacité réglée à 0.4
Border-Width
Cet argument définit la taille des bordures d'un cadre.
Cet argument accepte des valeurs positives ou nulles, suivies de la mention "px", pour l'unité.
Cet argument fonctionne avec une seule valeur, affectant alors cette valeur aux quatre bords. (→Exemple 1)
4 valeurs peuvent être entrées, pour déterminer respectivement l'épaisseur des bords du haut, de droite, du bas et de gauche. (→Exemple 2)
Si aucune valeur n'est rentrée, la valeur de base est de 3px.
- Exemple 1 : "border-width: 1px" Va créer des bordures de 1 pixel de large tout autour du cadre.
Exemple n°1
- Exemple 2 : "border-width: 5px 10px 1px 48px" Va créer une bordure de 5 pixels de large en haut, de 10 pixels à droite, de 1 pixel en bas, et de 48 pixels à gauche.
Exemple n°2
Border-Color
Cet argument définit la couleur des bordures d'un cadre.
Cet argument accepte des noms anglais de couleurs, ou des codes HTML.
Cet argument fonctionne avec une seule couleur, affectant alors cette couleur aux quatre bords. (→Exemple 1)
4 couleurs peuvent être entrées, pour déterminer respectivement la couleur des bords du haut, de droite, du bas et de gauche. (→Exemple 2)
Si aucune valeur n'est rentrée, la couleur de base est le noir.
- Exemple 1 : "border-color: red" Va créer des bordures rouges tout autour du cadre.
Exemple n°1
- Exemple 2 : "border-color: #0000FF" Va créer des bordures bleues tout autour du cadre.
Exemple n°2
- Exemple 3 : "border-color: #0000FF red #00FF00 yellow" Va créer une bordure bleue en haut, rouge à droite, verte en bas et jaune à gauche.
Exemple n°3
Border-Style
Cet argument définit la forme des bordures d'un cadre.
Cet argument accepte les noms parmi cette liste :
- "none"/"hidden" : aucune bordure (→Exemple 1)
- "dotted" : une bordure en pointillés (→Exemple 2)
- "dashed" : une bordure en tirets (→Exemple 3)
- "solid" : une bordure en trait plein (→Exemple 4)
- "double" : une bordure constituée de deux traits pleins (→Exemple 5)
- "groove"/"ridge"/"inset"/"outset" : une bordure en relief (→Exemple 6)
Cet argument fonctionne avec un seul style, affectant alors ce style aux quatre bords.
4 styles peuvent être entrés, pour déterminer respectivement la forme des bords du haut, de droite, du bas et de gauche. (→Exemple 7)
Si aucune valeur n'est rentrée, le style de base est "none", la bordure de base est donc invisible.
- Exemple 1 : "border-style: none"/"border-style: hidden" vont créer des bordures invisibles tout autour du cadre.
Exemple n°1 : none
Exemple n°1 : hidden
- Exemple 2 : "border-style: dotted" va créer des bordures en pointillés tout autour du cadre.
Exemple n°2 : dotted
- Exemple 3 : "border-style: dashed" va créer des bordures en tirets tout autour du cadre.
Exemple n°3 : dashed
- Exemple 4 : "border-style: solid" va créer des bordures pleines tout autour du cadre.
Exemple n°4 : solid
- Exemple 5 : "border-style: double" va créer des bordures pleines doublées tout autour du cadre.
Exemple n°5 : double
- Exemple 6 : "border-style: groove"/"border-style: ridge"/"border-style: inset"/"border-style: outset" vont créer des bordures en relief tout autour du cadre.
Exemple n°6 : groove
Exemple n°6 : ridge
Exemple n°6 : inset
Exemple n°6 : outset
- Exemple 7 : "border-style: double dotted ridge dashed" va créer des bordures doublées en haut, en pointillés à droite, en relief en bas, et en tirets à gauche.
Exemple n°7 : double dotted ridge dashed
Border
Cet argument permet de condenser les 3 arguments précédents, à savoir border-style, border-color et border-width, en un seul argument afin d'alléger le code.
Cet argument accepte 3 choses :
- Une unique valeur de taille
- Une unique valeur de style
- Une unique valeur de couleur
Les 3 valeurs sont celles acceptées par, respectivement, border-width, border-style et border-color.
Plus haut, j'ai précisé qu'on ne devait rentrer qu'une seule valeur pour chaque critère. C'est important à savoir : border permet de condenser, mais ne permet pas le cas par cas : Si vous entrez une valeur, alors elle va s'appliquer aux quatre bordures. (→Exemple 1)
Cet argument peut néanmoins "cohabiter" avec les autres arguments de bordure. (→Exemple 2)
- Exemple 1 : "border: 7px dotted red" va créer des bordures en pointillés rouges de 7 pixels tout autour du cadre.
Exemple n°1
- Exemple 2 : "border: solid green; border-width: 5px 8px 7px 15px" va créer des bordures vertes pleines tout autour du cadre, faisant 5 pixels pour la bordure supérieure, 8 pixels pour la bordure de droite, 7 pixels pour la bordure inférieure et 15 pixels pour la bordure de gauche.
Exemple n°2
Border-Top/Bottom/Right/Left
Ces arguments fonctionnent exactement comme l'argument border expliqué ci-dessus, mais ne concernent qu'une seule des 4 bordures du cadre.
Ces arguments cohabitent entre eux (→Exemple 1), et avec border (→Exemple 2), ou aussi avec les arguments border-style, border-color et border-width (→Exemple 3).
Si aucune valeur n'est précisée dans ces arguments, alors la valeur de base sera utilisée, même si un argument border ou border-width/color/style donne une valeur.
- Exemple 1 : "border-top: 7px dotted red; border-right: 3px dashed green; border-bottom: 12px double blue; border-left: 15px groove yellow" va créer des bordures en pointillés rouges de 7 pixels en haut du cadre, des bordures en tirets vertes de 3 pixels à droite du cadre, des bordures doublées bleues de 12 pixels en bas du cadre et des bordures en relief jaunes de 15 pixels à gauche du cadre.
Exemple n°1
- Exemple 2 : "border: 15px solid green; border-top: 7px dotted " va créer des bordures vertes pleines de 15 pixels tout autour du cadre excepté pour la bordure supérieure, qui sera en pointillés verts de 7 pixels.
Exemple n°2
- Exemple 3 : "border-style: solid; border-width: 15px; border-color: green red blue yellow; border-top: 7px dotted pink" va créer des bordures pleines de 15 pixels vertes en haut, rouges à droite, bleues en bas et jaunes à gauche. Cependant, la bordure supérieure fera 7 pixels, sera en pointillés et sera rose.
Exemple n°3
- Exemple 4 : "border-style: solid; border-width: 15px; border-color: green red blue yellow; border-top: 7px dotted" va créer des bordures pleines de 15 pixels vertes en haut, rouges à droite, bleues en bas et jaunes à gauche. Cependant, la bordure supérieure fera 7 pixels, sera en pointillés, et sera noire (couleur de base) : elle a eu une autre valeur de couleur et une autre de taille et n'a eu aucune précision de couleur, elle ne se soumet à aucun argument extérieur.
Exemple n°4
Border-Radius
Cet argument permet de déterminer la forme des coins d'un cadre.
Cet argument accepte des valeurs en px ou en %, et n'accepte pas les valeurs négatives, qui seront alors considérées comme 0. (→Exemples 1, 2 et 3)
Plus la valeur est grande, plus l'arrondi est prononcé.
Cet argument peut accepter une valeur seule, qui déterminera les 4 coins, ou 4 valeurs, qui détermineront alors respectivement les coins en haut à gauche, en haut à droite, en bas à droite et en bas à gauche. (→Exemple 4)
Les valeurs entrées sous forme d'entiers en px donneront une forme arrondie, tandis qu'entrer un pourcentage ou une fraction donnera une forme plus elliptique. Lorsqu'une fraction est entrée, les deux valeurs ont une unité. Si la fraction est inférieure à 1, alors les faces latérales seront plus arrondies que les autres, sinon, les faces latérales seront plus plates que les autres. (→Exemples 5 et 6)
Note : Border-radius est le seul argument de type "border-[nom]" qui n'est pas lié aux autres, et qui ne peut être utilisé qu’indépendamment
- Exemple 1 : "border-radius: 25px" va créer un arrondi de cette forme :
Exemple n°1
- Exemple 2 : "border-radius: 40%" va créer un arrondi de cette forme :
Exemple n°2
- Exemple 3 : "border-radius: -25px" va donner des angles droits.
Exemple n°3
- Exemple 4 : "border-radius: 35px 15px 60px 5px" Va donner des arrondis plus ou moins prononcés selon le coin.
Exemple n°4
- Exemple 5 : "border-radius: 50px/80px" va donner des faces latérales plus arrondies, et des faces supérieures et inférieures plus plates:
Exemple n°5
- Exemple 6 : "border-radius: 120px/50px" va donner des faces latérales plus plates, et des faces supérieures et inférieures plus arrondies :
Exemple n°6
Width et Height
Cet argument permet de déterminer la largeur et la hauteur du cadre.
Les valeurs négatives ne sont pas acceptées.
Width gère la largeur (→Exemple 1) et Height la hauteur (→Exemple 2).
Ajouter "min-" ou "max-" à Width ou Height permet de spécifier une valeur minimale ou maximale de largeur ou de hauteur.
- Exemple 1 : "width: 240px" va créer un cadre de 240 pixels de large.
Exemple 1
- Exemple 2 : "height: 70px" va créer un cadre de 70 pixels de haut.
Exemple 2
Overflow
Cet argument permet de déterminer le comportement du texte dans l'élément.
Lorsque le texte dépasse du cadre (ce qui peut arriver), il y a plusieurs comportements possibles.
Overflow accepte les arguments :
- "Hidden" pour cacher le texte qui dépasse. (→ Exemple 1)
- "Visible" pour laisser le texte dépasser. (→ Exemple 2)
- "Scroll" pour créer une scroll-bar dans le cadre. (→ Exemple 3)
- "Auto" pour que le cadre gère de lui même les scroll-bars.
Note : Cet argument ne marche qu'avec les cadres dont les dimensions sont fixes.
- Exemple 1 : "overflow: hidden" va cacher le texte dépassant du cadre.
Exemple 1 : Ici, vous voyez bien qu'il y a du texte, mais que c'est un peu confus niveau dimensions. Donc ce qui dépasse va être géré de manière un peu différente selon la commande.
- Exemple 2 : "overflow: visible" va laisser le texte dépasser du cadre.
Exemple 2 : Ici, vous voyez bien qu'il y a du texte, mais que c'est un peu confus niveau dimensions. Donc ce qui dépasse va être géré de manière un peu différente selon la commande.
- Exemple 3 : "overflow: scroll" va créer une scroll-bar dans le cadre.
Exemple 3 : Ici, vous voyez bien qu'il y a du texte, mais que c'est un peu confus niveau dimensions. Donc ce qui dépasse va être géré de manière un peu différente selon la commande.
Display
Cet argument permet de déterminer le comportement de l'élément.
Les arguments acceptés sont : "block" pour que le contenu ait les propriétés d'un bloc à part (→ Exemple 1), "inline-block" pour que le contenu de l'élément ait les propriétés d'un bloc à part, mais que le bloc lui même ait le comportement d'un texte normal (→ Exemple 2), et "list-item" pour que le contenu ait le comportement d'un élément de liste (→ Exemple 3).
- Exemple 1 : "display : block" permet d'obtenir un bloc séparé du reste du contenu.
Exemple 1 : cadre 1
Exemple 1 : cadre 2
- Exemple 2 : "display : inline-block" permet d'obtenir un bloc dont le contenu a des propriétés particulières, mais ayant les propriétés du texte pour le reste.
Exemple 2 : cadre 1
Exemple 2 : cadre 2
- Exemple 3 : "display : list-item" permet d'obtenir un élément de liste.
Exemple 3 : cadre 1
Exemple 3 : cadre 2
Box-Shadow
Cet argument permet de déterminer les caractéristiques de l'ombre du cadre. (→Exemples 1,2 et 3)
Cet argument se décompose en plusieurs valeurs, qui sont, dans l'ordre :
- La position de l'ombre horizontalement : Un chiffre pouvant être négatif, en px.
- Plus le chiffre est grand, plus l'ombre sera éloignée vers la droite. Plus le chiffre est petit, plus la valeur sera éloignée vers la gauche
- La position de l'ombre verticalement : un chiffre pouvant être négatif, en px.
- Plus le chiffre est grand, plus l'ombre sera éloignée vers le bas. Plus le chiffre est petit, plus l'ombre sera éloignée vers le haut.
- Le "taux de flou" de l'ombre : un chiffre positif, en px.
- Plus le chiffre est grand, plus l'ombre sera trouble.
- Taille de l'ombre : un chiffre pouvant être négatif, en px.
- Plus le chiffre est grand, plus l'ombre est grande.
- Couleur de l'ombre : une couleur en HTML ou en anglais.
En plus de ces valeurs, une valeur peut être entrée, la valeur inset, afin que l'ombre soit interne au cadre. (→Exemple 4)
Note : Inset change le référentiel pour les valeurs de positions : une valeur grande horizontalement sera vers la gauche et une valeur grande verticalement sera vers le haut.
- Exemple 1 : "box-shadow: 10px 10px 25px 0px grey" Va donner une ombre grise projetée vers le coin en bas à droite, assez nette et faisant les dimensions du cadre d'origine.
Exemple n°1
- Exemple 2 : "box-shadow: 50px 5px 25px 5px grey" Va donner une ombre grise trouble projetée loin vers la droite, et s'étalant un peu.
Exemple n°2
- Exemple 3 : "box-shadow: 0px 0px 100px 50px grey" Va donner une ombre grise trouble projetée sous le cadre, et s'étalant beaucoup.
Exemple n°3
- Exemple 4 : "box-shadow: 10px 10px 25px 0px grey inset" Va donner une ombre grise projetée depuis le coin en haut à gauche, assez nette.
Exemple n°4
Donc voilà, si vous mettez en œuvre tous mes conseils, vous serez capables d'obtenir un résultat au moins de ce niveau.
Bon, il est temps de le dire : La syntaxe est comme tout, il ne faut pas en abuser, et l'utiliser avec parcimonie, en réfléchissant bien à ce que l'on veut comme style, est nécessaire.
Oui, c'est vrai qu'avec ce que j'ai expliqué, on peut facilement arriver à ça.
Preuve : 2 minutes et 38 secondes pour faire ce cadre (d'une laideur abominable).
Maintenant, il faut réfléchir à comment utiliser ça.
La syntaxe permet de mettre en valeur un travail, mais ça ne fait pas tout.
Souvent, j'ai entendu dire que la page membre de Torrential (Le dossier du Dr. Gray est le meilleur exemple qui me vienne là tout de suite) était un trésor de syntaxe.
Au début aussi, je pensais ça.
Mais en réalité, si on se penche sur le code source, il n'y a rien de complexe.
Et c'est là que réside l'astuce : La syntaxe est très pratique, mais n'est rien sans idées.
Avec simplement des quelques cadres assez simples et de l'imagination, on peut arriver à de très beaux résultats.
Souvent, un style sobre et simple met plus en valeur le travail que quelque chose qui exploite les possibilités à outrance.
La preuve évidente est ce cadre d'une beauté contestable.
Comparons un peu juste ce cadre à la page membre de Torrential.
Ce cadre utilise : Des bordures spéciales, arrondies par endroits, avec des couleurs et des styles différents, faisant varier les tailles, des ombres, des fonds, des textes colorés, et fait jouer les espaces entre le cadre et le contenu interne ou externe.
À côté de ça, la page membre de Torrential utilise juste des blocs-divs pour structurer la page, et fait varier les couleurs par endroits. (Et des images modifiées avec talent mais c'est pas de la syntaxe)
Donc ce cadre est meilleur que la page membre de Torrential ?
Ce cadre pourrait être considéré comme un trésor de syntaxe : Il utilise bien plus de code, et fait varier le style.
Pourtant, je doute que remplacer les cadres du dossier de Torrential par des cadres de ce style ait beaucoup de succès.
Tout ça pour dire une chose : La Fondation est définie par son côté "pro" : si la présentation n'est pas sobre ou cohérente avec l'univers de la Fondation, alors vous aurez beau redoubler de mauvais gout et de complexité, la syntaxe ne mettra pas en valeur le contenu.
Il faut garder en tête que la sobriété est souvent le plus efficace, et que pour mettre un texte en valeur, un simple cadre marche souvent très bien, comme c'est le cas juste en dessous.
Pas besoin d'arracher la rétine des lecteurs pour rendre un texte visible, et multiplier les effets visuels ne met pas forcément le texte en valeur.
Et encore, le cadre ci-dessus n'était pas le plus simple que l'on puisse faire, mais il montre déjà que rester simple ne gâche pas un travail.
Après, ce n'est peut-être que moi, qui suis un adepte de la sobriété, et je préfère limiter au maximum l'utilisation de couleurs.
Un cadre simpliste au possible met très bien en valeur un bout de texte.
Et Dieu sait que ce cadre n'était pas compliqué.
Un autre conseil que l'on peut donner, c'est d'imbriquer.
Même si de nombreuses possibilités sont offertes en un seul bloc-div, pourquoi se limiter quand on peut élargir le champ des possibles ?
Je ne donnerais pas d'exemples dans cet onglet, la suite parle d'elle-même.
Sinon, il est l'heure que je fasse preuve de la plus grande mauvaise foi de l'univers.
Vous vous souvenez les balises de code expliquées au début ?
[!--█ ←Ces balises-ci → █--]
C'est très pratique de les utiliser pour s'y retrouver.
Pas forcément pour détailler chaque ligne de code, mais simplement délimiter les parties à c/c, les parties où écrire, ce genre de choses.
Si vous travaillez à plusieurs, ça peut être utile pour les autres, ou même pour que vous vous y retrouviez. Je conseille vraiment de s'en servir, surtout dans les codes les plus complexes.
Troisième partie
Introduction
Bienvenue dans la Troisième partie !
Comme dit précédemment, cet essai n'a pas la prétention de vous apprendre à coder à partir de rien, mais simplement de vous permettre de remanier certains blocs en ajoutant, enlevant ou modifiant des arguments.
Aussi, je me disais que des exemples concrets d'utilisation de la syntaxe avec des codes découpés seraient les bienvenus.
La liste suivante d'exemples sera mise à jour plus ou moins régulièrement selon mon inspiration et ma disponibilité.
Les requêtes sont acceptées, et tout le monde peut contribuer à condition de bien suivre les étapes.
Pour demander une mise en page, il suffit de décrire le style que vous voulez dans la partie "discussion par page". Pensez à préciser si vous voulez que votre requête soit ajoutée parmi les exemples et puisse être réutilisée par tous ou non.
Je vous laisse donc aux exemples, en espérant qu'ils vous plaisent.
Je précise que l'utilisation de ces mises en page est ouverte à tous et est complètement libre : Vous êtes libre de les réutiliser, modifiées ou non.
Troisième partie | Introduction
Sécuriser. Contenir. Protéger.
À l'attention du personnel
Étant donné le récent constat d'une faute de gout évidente du personnel quant à la mise en page des nombreux documents transitant par le biais de l'administration, le Comité d’Éthique a décidé de se réunir en urgence afin de prendre des mesures radicales, mais nécessaires.
Il n'est pas tolérable et ne sera plus toléré le fait que le personnel ose utiliser de manière quotidienne et constante une mise en page plus que basique et peu attirante, se limitant à du texte sur fond blanc, alors que la qualité de leurs travaux pourrait être mise en valeur, sublimée, exaltée par une mise en forme bien plus sympathique, recherchée, et agréable à l’œil.
Après de nombreuses recherches, nous avons été contraints de nous rendre à l'évidence : nous n'avions plus le choix. Il fallait impérativement faire appel au plus grand maniaque de la branche française de la Fondation.
Après quelques recherches, et la signature d'un contrat confidentiel, dont les termes ne seront pas divulgués ici, le Pr Kendrick s'est vu attribuer des fonds et des moyens plus que conséquents (notamment une cravache, un dictaphone, une accréditation de niveau 4-KO.NAR, des rangers, des cordes vocales en titane, une voix de sergent névrosé, du sadisme et beaucoup de café), ainsi qu'une équipe talentueuse et déterminée pour pouvoir aujourd'hui vous présenter des mises en forme plus ou moins complexes et de tous types qui viendront bientôt sublimer vos travaux.
C'est donc avec un grand honneur et une joie non dissimulée que nous vous proposons cet essai sur la syntaxe Wikidot.
Cordialement,
- Directeur Garrett
[!--█ Le c/c commence à partir de ce message | Ce message n'est pas compris dans le c/c █--]
[!--█ Début du cadre █--]
[[div style="center no-repeat ; float: center; background:#FFFFFF; padding: 15px 15px 15px 15px; margin: 0px 0px 0px 0px;border: solid 1px #a4a4a4;"]]
[!--█ Fin du cadre █--]
[!--█ Début de l'image █--]
[[f>image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="110px"]]
[!--█ Fin de l'image █--]
[!--█ Début du titre █--]
[[div style="font-size: 280%; font-family: 'Indie Flower', cursive; font-weight: bold"]]
[[<]]
À l'attention du personnel
[[/<]]
[[/div]]
[!--█ Fin du titre █--]
[[div style="font-size: 110%; font-family: 'Indie Flower', cursive;"]]
[!--█ Début du texte █--]
Étant donné le récent constat d'une faute de gout évidente du personnel quant à la mise en page des nombreux documents transitant par le biais de l'administration, le Comité d’Éthique a décidé de se réunir en urgence afin de prendre des mesures radicales, mais nécessaires.
Il n'est pas tolérable et ne sera plus toléré le fait que le personnel ose utiliser de manière quotidienne et constante une mise en page plus que basique et peu attirante, se limitant à du texte sur fond blanc, alors que la qualité de leurs travaux pourrait être mise en valeur, sublimée, exaltée par une mise en forme bien plus sympathique, recherchée, et agréable à l’œil.
Après de nombreuses recherches, nous avons été contraints de nous rendre à l'évidence : nous n'avions plus le choix. Il fallait impérativement faire appel au plus grand maniaque de la branche française de la Fondation.
Après quelques recherches, et la signature d'un contrat confidentiel, dont les termes ne seront pas divulgués ici, le Pr Kendrick s'est vu attribuer des fonds et des moyens plus que conséquents (notamment une cravache, un dictaphone, une accréditation de niveau 4-KO.NAR, des rangers, des cordes vocales en titane, une voix de sergent névrosé, du sadisme et beaucoup de café), ainsi qu'une équipe talentueuse et déterminée pour pouvoir aujourd'hui vous présenter des mises en forme plus ou moins complexes et de tous types qui viendront bientôt sublimer vos travaux.
C'est donc avec un grand honneur et une joie non dissimulée que nous vous proposons cet essai sur la syntaxe Wikidot.
Cordialement,
[!--█ Signature █--]
[[>]]
- Directeur Garrett
[[/>]]
[!--█ Fin de la signature █--]
[[/div]]
[!--█ Fin du texte █--]
[[/div]]
[!--█ Fin du cadre █--]
[!--█ Le c/c se termine à partir de ce message | Ce message n'est pas compris dans le c/c █--]
À l'attention du Pr Kendrick
Bonjour Pr Kendrick,
Je vous écris afin de vous poser plusieurs questions, ainsi que pour vous exposer une requête.
Tout d'abord, j'aimerais savoir plusieurs choses au sujet du fameux contrat confidentiel libre d'accès à l'ensemble du personnel.
En effet, les quelques revendications que vous avez effectuées, et qui ont été acceptées étant donné l'urgence de la situation, paraissent maintenant farfelues, si ce n'est complètement à côté de la plaque.
Je vous demande donc si vous n'avez pas exagéré vos besoins afin de mettre en place cette opération, et si vous avez été raisonnable, cela vous a-t-il été réellement utile ?
Ensuite, j'aimerais savoir si vous avez tout fait seul, ou si vous avez réduit en esclavage une armée d'enfants sous-payés pour travailler à votre place.
Et enfin, j'aimerais un style de lettre un peu plus "officiel" sur la forme, qui fasse plus dans un style imprimé en chaîne, avec juste des trucs qui changent, mais le texte général reste le même.
J'espère que mes questions trouveront une réponse, et que ma requête ne vous dérangera pas.
À bientôt, cordialement
- Stagiaire Perlimpinpin
Sécuriser. Contenir. Protéger.
[!--█ Cadre █--]
[[div style="background: url(https://image.noelshack.com/fichiers/2017/13/1490945040-scp-filigrane.png) center no-repeat ; float: center; border-radius: 10px; border: double 5px #737373; width: 633px; padding: 1px 15px; margin: 30px -20px 10px 10px; background-color: #FFFFFF;"]]
[!--█ Mention en haut du cadre █--]
[[div style="font-size: 250%; font-weight: bold"]]
[[=]]
{{À l'attention du Pr Kendrick}}
[[/=]]
[[/div]]
[!--█ Fin de la mention en faut du cadre █--]
[!--█ Texte de la lettre █--]
[[div style="font-family:Monotype Corsiva; font-size: 140%"]]
Bonjour Pr Kendrick,
Je vous écris afin de vous poser plusieurs questions, ainsi que pour vous exposer une requête.
Tout d'abord, j'aimerais savoir plusieurs choses au sujet du fameux contrat confidentiel libre d'accès à l'ensemble du personnel.
En effet, les quelques revendications que vous avez effectuées, et qui ont été acceptées étant donné l'urgence de la situation, paraissent maintenant farfelues, si ce n'est complètement à côté de la plaque.
Je vous demande donc si vous n'avez pas exagéré vos besoins afin de mettre en place cette opération, et si vous avez été raisonnable, cela vous a-t-il été réellement été utile ?
Ensuite, j'aimerais savoir si vous avez tout fait seul, ou si vous avez réduit en esclavage une armée d'enfants sous payés pour travailler à votre place.
Et enfin, j'aimerais un style de lettre un peu plus "officiel" sur la forme, qui fasse plus dans un style imprimé en chaîne, avec juste des trucs qui changent, mais le texte général reste le même.
J'espère que mes questions trouveront une réponse, et que ma requête ne vous dérangera pas.
À bientôt, cordialement
[[/div]]
[!--█ Fin du texte de la lettre █--]
[!--█ Signature █--]
[[div style="font-family:Monotype Corsiva; font-size: 150%"]]
[[>]]
- Stagiaire Perlimpinpin
[[/>]]
[[/div]]
[!--█ Fin signature █--]
[!--█ Mention en bas du cadre █--]
[[div style="font-size: 250%; font-weight: bold"]]
[[=]]
{{Sécuriser. Contenir. Protéger.}}
[[/=]]
[[/div]]
[!--█ Fin de la mention en bas du cadre █--]
[[/div]]
[!--█ Fin du cadre █--]
Titre de la lettre
Cher futur D-5090, j'ai bien lu ta lettre, et tes interrogations, bien que très énervantes, méritent des réponses.
Avant tout, sache que j'ai apprécié ton intérêt pour mes revendications, c'est pourquoi tu es maintenant muté, et que ton nouveau nom est D-5090.
Et oui, mes revendications sont toutes justifiées.
Sinon, je n'ai exploité qu'une seule personne : Tara Lucy, qui est bien plus grammar nazi que moi, et qui a corrigé les fautes que j'ai ratées.
Pour ce qui concerne ta syntaxe, je te réponds directement dans une syntaxe qui pourrait te convenir, j'espère qu'elle te plaira.
Je te souhaite une bonne continuation
Cordialement
-Pr Kendrick
[!--█ Premier cadre █--]
[[div style="border: solid 1px #112211; padding: 3px; margin-bottom: 3px; background-color:#FFFFFF"]]
[!--█ Second cadre █--]
[[div style="display: inline-block; border:dashed 1px #444444; float:top; width:96.5%; padding:10px"]]
[!--█ Titre █--]
[[div style="text-align: center; background-color:#495D90"]]
+* [[span style="color:white"]]**{{Titre de la lettre}}**[[/span]]
[[/div]]
[!--█ Fin du titre █--]
----
Cher futur D-5090, j'ai bien lu ta lettre, et tes interrogations, bien que très énervantes, méritent des réponses.
Avant tout, sache que j'ai apprécié ton intérêt pour mes revendications, c'est pourquoi tu es maintenant muté, et que ton nouveau nom est D-5090.
Et oui, mes revendications sont toutes justifiées.
Sinon, je n'ai exploité qu'une seule personne : Tara Lucy, qui est bien plus grammar nazi que moi, et qui a corrigé les fautes que j'ai ratées.
Pour ce qui concerne ta syntaxe, je te réponds directement dans une syntaxe qui pourrait te convenir, j'espère qu'elle te plaira.
Je te souhaite une bonne continuation
Cordialement
-Pr Kendrick
-----
[[/div]]
[!--█ Fin du second cadre █--]
[[/div]]
[!--█ Fin du Premier cadre █--]
Communiqué du conseil O5
En continuant la lecture de ce message sans y être habilité, vous vous exposez à un agent mémétique tueur.
Ceci est le seul avertissement dont vous disposerez.
Ne lisez ce message que si vous en êtes le destinataire.
Accréditation de niveau 4 requise.
Recherche de vie en cours…
Vie détectée.
Ouverture du message…
Étant donné qu'il s'agit chronologiquement du 10e exemple à avoir été écrit, et qu'une panne d'inspiration dans le contenu des exemples est à déplorer au sein de nos effectifs, ce texte va servir de meuble.
L'équipe réunie a fait un travail titanesque, et l'une des dernières étapes est de remplir cet exemple avant de poster l'essai.
Nous arrivons donc en fin d'écriture, et nous ne savons plus quoi écrire.
Plusieurs propositions ont été évoquées : Mettre un Lorem Ipsum, faire un texte type qu'on c/c, faire des galettes bretonnes…
Mais rien n'y fait, il faut meubler ici, et personne ne sait quoi mettre.
Donc, une décision a été prise, la décision d'urgence.
Cette décision consiste à meubler en disant qu'on ne sait pas comment meubler.
Cette solution est une mesure d'urgence à n'utiliser qu'en dernier recours, et qui permet de meubler le dernier exemple.
Cette solution ne doit être mise en oeuvre uniquement s'il s'agit d'un exemple qui, par son souci de remplissage, bloque à lui seul la publication de l'essai, les relectures orthographiques ne comptant pas.
Merci de votre attention.
Nous Sécurisons, Nous Contenons, Nous Protégeons
[!--█ Début du cadre noir █--]
[[div style="padding : 5px; margin : 10px; border : 2px solid #000000; font-size: 150%; background-color : #FFFFFF"]]
[!--█ Début du cadre en pointillés █--]
[[div style="padding : 5px; margin : 2px 2px 2px 2px; border : 1px dashed #313131; background-color : #FFFFFF"]]
[!--█ Bandeau de haut de page █--]
@@@@
[!--█ Images du bandeau █--]
[[f<image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="75px"]]
[[f>image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="75px"]]
[!--█ Fin des images du bandeau █--]
------
[!--█ Devise du bandeau █--]
[[div style="font-size: 100%; font-weight: bold; margin: 2px 0 5px;"]]
[[=]]
{{Communiqué du conseil O5}}
[[/=]]
[[/div]]
[!--█ Fin de la devise du bandeau █--]
------
[!--█ Fin du bandeau █--]
[!--█ Début de l'avertissement █--]
[[size 1%]] @@ @@ [[/size]]
[[=]]
En continuant la lecture de ce message sans y être habilité, vous vous exposez à un agent mémétique tueur.
Ceci est le seul avertissement dont vous disposerez.
Ne lisez ce message que si vous en êtes le destinataire.
Accréditation de niveau 4 requise.
[[collapsible show="+ Procéder à l'ouverture du message +" hide="Agent mémétique tueur activé"]]
[[/=]]
[!--█ Fin de l'avertissement █--]
[!--█ Début de l'agent mémétique █--]
[[=image https://image.noelshack.com/fichiers/2017/40/4/1507207657-bcaa6f0a80da9ce5c77e5b187e538887.gif width="325px" height="325px"]]
Recherche de vie en cours...
[[=image https://image.noelshack.com/fichiers/2017/40/4/1507209409-image-1145186.gif]]
Vie détectée.
Ouverture du message...
[!--█ Fin de l'agent mémétique █--]
[[<]]
[!--█ Début du message █--]
------
[[size 75%]]Étant donné qu'il s'agit chronologiquement du 10e exemple à avoir été écrit, et qu'une panne d'inspiration dans le contenu des exemples est à déplorer au sein de nos effectifs, ce texte va servir de meuble .
L'équipe réunie a fait un travail titanesque, et l'une des dernières étapes est de remplir cet exemple avant de poster l'essai.
Nous arrivons donc en fin d'écriture, et nous ne savons plus quoi écrire.
Plusieurs propositions ont été évoquées : Mettre un Lorem Ipsum, faire un texte type qu'on c/c, faire des galettes bretonnes...
Mais rien n'y fait, il faut meubler ici, et personne ne sait quoi mettre.
Donc, une décision a été prise, la décision d'urgence.
Cette décision consiste à meubler en disant qu'on ne sait pas comment meubler.
Cette solution est une mesure d'urgence à n'utiliser qu'en dernier recours, et qui permet de meubler le dernier exemple.
Cette solution ne doit être mise en œuvre uniquement s'il s'agit d'un exemple qui, par son souci de remplissage, bloque à lui seul la publication de l'essai, les relectures orthographiques ne comptant pas.
Merci de votre attention.
**Nous Sécurisons, Nous Contenons, Nous Protégeons** [[/size]]
[[/<]]
[!--█ Fin du message █--]
[[/collapsible]]
[[/div]]
[!--█ Fin du cadre en pointillés █--]
[[/div]]
[!--█ Fin du cadre noir █--]
Contrat Confidentiel
Les informations présentées ici ne doivent être divulguées sous aucun prétexte
Introduction
Ce document est un contrat classé confidentiel uniquement accessible aux individus de niveau 4-KO.NAR, et concernant le Pr Kendrick.
Dans ce document se trouvent tous les détails de la mission secrète de très haute importance durant laquelle le Pr Kendrick doit mettre au point des parades au mauvais goût et à la mise en forme inexistante.
Si ce contrat venait à être découvert, alors aucune mesure ne doit être prise le plus tôt possible. Ne pas amnésier les individus ayant découvert ces informations est nécessaire.
Si ce document venait à être rendu public, alors la crédibilité du Comité d’Éthique, qui a plié sous les demandes du Pr Kendrick et lui a octroyé des moyens considérables, serait mise en péril. Pour remédier à ça, ne pas chercher à endiguer toute fuite d'informations est une mesure capitale devant être effectuée dans les plus brefs délais.
Matériel mis à disposition du Pr Kendrick
- Un petit coussin de velours rouge pour que sa chaise soit plus confortable
- Un mégaphone avec une fonctionnalité de modulation de voix permettant de "faire beaucoup de bruit et crier comme un sergent névrosé et sadique"
- Une paire de pantoufles de rechange
- Des posters de chats
- Une lampe de bureau à commande vocale
- Une chaise roulante, avec un dossier permettant de s'allonger si nécessaire, et qui roule bien
- Un stock de petites pancartes "Ne pas déranger" fantaisistes sur le thème de la Fondation
- Une peluche tigre
- Des trombones
Moyens mis à la disposition du Pr Kendrick
- Une accréditation 4-KO.NAR
- l'accès à la majorité des bases de données de la Fondation
- Le droit de doubler les gens dans la file d'attente à la cantine
- La possibilité de dépenser jusqu'à 2 € aux frais de la Fondation
- Un ticket resto
[!--█ Contour principal █--]
[[div style="display: inline-block; border-radius: 10px; border: solid 1px #444444; background:#FFFFFF; float:top; width:96.5%; padding:10px"]]
[!--█ Titre du document █--]
[[div style="background-color:#A60000"]]
[[=]]
+* [[span style="color:white"]]**{{Contrat Confidentiel}}**[[/span]]
++* [[span style="color:white"]]**{{Les informations présentées ici ne doivent être divulguées sous aucun prétexte}}**[[/span]]
[[/=]]
[[/div]]
[!--█ Fin du titre █--]
[!--█ Titre du premier cadre █--]
[[div style="font-size: 200%; font-weight: bold; margin: 2px 0 5px;"]]
{{Introduction}}
[[/div]]
[!--█ Fin du titre du premier cadre █--]
[!--█ Premier cadre █--]
[[div style="border:solid 1px #112211; background:#FEFEFE; padding: 20px; margin-bottom: 3px;"]]
Ce document est un contrat classé confidentiel uniquement accessible aux individus de niveau 4-KO.NAR, et concernant le Pr Kendrick.
Dans ce document se trouvent tous les détails de la mission secrète de très haute importance durant laquelle le Pr Kendrick doit mettre au point des parades au mauvais goût et à la mise en forme inexistante.
Si ce contrat venait à être découvert, alors aucune mesure ne doit être prise le plus tôt possible. Ne pas amnésier les individus ayant découvert ces informations est nécessaire.
Si ce document venait à être rendu public, alors la crédibilité du Comité d’Éthique, qui a plié sous les demandes du Pr Kendrick et lui a octroyé des moyens considérables, serait mise en péril. Pour remédier à ça, ne pas chercher à endiguer toute fuite d'informations est une mesure capitale devant être effectuée dans les plus brefs délais.
[[/div]]
[!--█ Fin du premier cadre █--]
[!--█ Titre du second cadre █--]
[[div style="font-size: 200%; font-weight: bold; margin: 2px 0 5px;"]]
{{Matériel mis à disposition du Pr Kendrick}}
[[/div]]
[!--█ Fin du titre du second cadre █--]
[!--█ Second cadre █--]
[[div style="border:solid 1px #112211; background:#FEFEFE; padding: 20px; margin-bottom: 3px;"]]
* Un petit coussin de velours rouge pour que sa chaise soit plus confortable
* Un mégaphone avec une fonctionnalité de modulation de voix permettant de "faire beaucoup de bruit et crier comme un sergent névrosé et sadique"
* Une paire de pantoufles de rechange
* Des posters de chats
* Une lampe de bureau à commande vocale
* Une chaise roulante, avec un dossier permettant de s'allonger si nécessaire, et qui roule bien
* Un stock de petites pancartes "Ne pas déranger" fantaisistes sur le thème de la Fondation
* Une peluche tigre
* Des trombones
[[/div]]
[!--█ Fin du second cadre █--]
[!--█ Titre du troisième cadre █--]
[[div style="font-size: 200%; font-weight: bold; margin: 2px 0 5px;"]]
{{Moyens mis à la disposition du Pr Kendrick}}
[[/div]]
[!--█ Fin du titre du troisième cadre █--]
[!--█ Troisième cadre █--]
[[div style="border:solid 1px #112211; background:#FEFEFE; padding: 20px; margin-bottom: 3px;"]]
* Une accréditation 4-KO.NAR
* l'accès à la majorité des bases de données de la Fondation
* Le droit de doubler les gens dans la file d'attente à la cantine
* La possibilité de dépenser jusqu'à 2 € aux frais de la Fondation
* Un ticket resto
[[/div]]
[!--█ Fin du troisième cadre █--]
[[/div]]
[!--█ Fin du contour principal █--]
TITRE
Cet exemple étant un peu compliqué à expliquer, je vais juste dire quelle case correspond à quelle partie du code, comme ça ce sera plus facile à visualiser. Ici, nous sommes donc à la toute première case, qui fait deux colonnes de largeur. |
|
Ici, nous sommes sur la case de la deuxième ligne, située sur la colonne de gauche. Cette case est donc une case classique. |
Bien au contraire, cette case est spéciale : elle reste sur une seule colonne, mais fait deux lignes de hauteur. |
Et ici, on a une autre case classique, sur la colonne de gauche, sur la 3e ligne. |
Sécuriser. Contenir. Protéger.
[!--█ Cadre principal █--]
[[div style="border:solid 2px #112211; background:#FEFEFE; padding:25px; margin-bottom: 3px;"]]
[!--█ Images en haut du cadre █--]
[[f>image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="160px"]]
[[f<image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="160px"]]
[!--█ Fin des images en haut du cadre █--]
[!--█ Titre du document █--]
[[div style="font-size: 340%; font-weight: bold; margin: 2px 0 5px;"]]
[[=]]
{{TITRE}}
@@@@
[[/=]]
[[/div]]
[!--█ Fin du titre du document █--]
@@@@
@@@@
@@@@
[!--█ Début du contenu █--]
[!--█ Ici, le contenu est présenté sous forme de tableau afin d'avoir une disposition particulière, mais l'utilisation de cadres normaux donne un rendu agréable aussi █--]
[[table]]
[!--█ Première ligne █--]
[[row]]
[!--█ Première case (d'une longueur de 2 colonnes) █--]
[[cell style="padding: 10px; border: 1px solid black" colspan="2"]]
Cet exemple étant un peu compliqué à expliquer, je vais juste dire quelle case correspond à quelle partie du code, comme ça ce sera plus facile à visualiser.
Ici, nous sommes donc à la toute première case, qui fait deux colonnes de largeur.
[[/cell]]
[!--█ Fin de la première case █--]
[[/row]]
[!--█ Fin de la première ligne █--]
[!--█ Deuxième ligne █--]
[[row]]
[!--█ Deuxième case (classique) █--]
[[cell style="padding: 10px; border: 1px solid black"]]
Ici, nous sommes sur la case de la deuxième ligne, située sur la colonne de gauche.
Cette case est donc une case classique.
[[/cell]]
[!--█ Fin de la deuxième case █--]
[!--█ Troisième case (d'une hauteur de 2 lignes) █--]
[[cell style="padding: 10px; border: 1px solid black" rowspan="2"]]
Bien au contraire, cette case est spéciale : elle reste sur une seule colonne, mais fait deux lignes de hauteur.
[[/cell]]
[!--█ Fin de la troisième case █--]
[[/row]]
[!--█ Fin de la deuxième ligne █--]
[!--█ Troisième ligne █--]
[[row]]
[!--█ Quatrième case (classique) █--]
[[cell style="padding: 10px; border: 1px solid black"]]
Et ici, on a une autre case classique, sur la colonne de gauche, sur la 3e ligne.
[[/cell]]
[!--█ Fin de la quatrième case █--]
[[/row]]
[!--█ Fin de la troisième ligne █--]
[[/table]]
[!--█ Fin du contenu █--]
[!--█ Bandeau de bas de page █--]
@@@@
[!--█ Images du bandeau █--]
[[f<image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="75px"]]
[[f>image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="75px"]]
[!--█ Fin des images du bandeau █--]
------
[!--█ Devise du bandeau █--]
[[div style="font-size: 150%; font-weight: bold; margin: 2px 0 5px;"]]
[[=]]
{{Sécuriser. Contenir. Protéger.}}
[[/=]]
[[/div]]
[!--█ Fin de la devise du bandeau █--]
------
[!--█ Fin du bandeau █--]
[[/div]]
[!--█ Fin du cadre principal █--]
Exemple inutile
Introduction
Comme vous pouvez le voir, cet exemple est celui qui correspond à la mise en page utilisée dans absolument TOUT l'essai.
Donc, vous la voyez fonctionnelle depuis tout à l'heure, et je veux bien comprendre que vous ayez besoin d'exemples en contexte, mais je me refuse à croire que vous ne l'aviez pas remarqué, donc je vais juste donner le code en fait.
Il n'y a même pas besoin d'argumenter sur pourquoi cette mise en page est déjà sous forme d'exemple.
Introduction
Conclusion
Donc, vu qu'il n'y a pas besoin d'arguments, je peux juste dire que je vais mettre le code en dessous, et que c'est la seule utilité de cet onglet.
Je vous laisse donc le code de cet exemple !
Conclusion
Sécuriser. Contenir. Protéger.
[!--█ Cadre du titre █--]
[[div class="content-panel standalone series" style="background-color: #FFFFFF;"]]
[!--█ Images du titre █--]
[[f>image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="161px"]]
[[f<image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="161px"]]
[!--█ Fin des images du titre █--]
[!--█ Titre █--]
[[div style="font-size: 320%; font-weight: bold; margin: 2px 0 5px;"]]
[[=]]
{{Exemple inutile}}
[[/=]]
[[/div]]
[!--█ Fin du titre █--]
[[/div]]
[!--█ Fin du cadre du titre █--]
[!--█ Premier cadre de contenu █--]
[[div class="content-panel standalone series" style="background-color : #FFFFFF"]]
[!--█ Titre du cadre █--]
[[div style="font-size: 200%; font-weight: bold; margin: 2px 0 5px;"]]
{{Introduction}}
[[/div]]
[!--█ Fin du titre du cadre █--]
------
Comme vous pouvez le voir, cet exemple est celui qui correspond à la mise en page utilisée dans absolument TOUT l'essai.
Donc, vous la voyez fonctionnelle depuis tout à l'heure, et je veux bien comprendre que vous ayez besoin d'exemples en contexte, mais je me refuse à croire que vous ne l'aviez pas remarqué, donc je vais juste donner le code en fait.
Il n'y a même pas besoin d'argumenter sur pourquoi cette mise en page est déjà sous forme d'exemple.
------
[!--█ Inscription de bas de cadre █--]
[[div style="font-size: 95%; font-weight: bold; margin: 2px 0 5px;"]]
[[>]]
{{Introduction}}
[[/>]]
[[/div]]
[!--█ Fin de l'inscription de bas de cadre █--]
[[/div]]
[!--█ Fin du premier cadre de contenu █--]
[!--█ Second cadre de contenu █--]
[[div class="content-panel standalone series" style="background-color : #FFFFFF"]]
[!--█ Titre du cadre █--]
[[div style="font-size: 200%; font-weight: bold; margin: 2px 0 5px;"]]
{{Conclusion}}
[[/div]]
[!--█ Fin du titre du cadre █--]
------
Donc, vu qu'il n'y a pas besoin d'arguments, je peux juste dire que je vais mettre le code en dessous, et que c'est la seule utilité de cet onglet.
Je vous laisse donc le code de cet exemple !
------
[!--█ Inscription de bas de cadre █--]
[[div style="font-size: 95%; font-weight: bold; margin: 2px 0 5px;"]]
[[>]]
{{Conclusion}}
[[/>]]
[[/div]]
[!--█ Fin de l'inscription de bas de cadre █--]
[[/div]]
[!--█ Fin du second cadre de contenu █--]
[!--█ Cadre final █--]
[[div class="content-panel standalone series" style="background-color: #FFFFFF;"]]
[!--█ Images du cadre final █--]
[[f>image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="65px"]]
[[f<image http://scp-wiki.wdfiles.com/local--files/amnestic-orientation-manual/logo.png width="65px"]]
[!--█ Fin des images du cadre final █--]
------
[!--█ Devise █--]
[[div style="font-size: 150%; font-weight: bold; margin: 2px 0 5px;"]]
[[=]]
{{Sécuriser. Contenir. Protéger.}}
[[/=]]
[[/div]]
[!--█ Fin de devise █--]
------
[[/div]]
[!--█ Fin de cadre final █--]
Café
Il s'agit d'un breuvage divin donné aux hommes par les dieux afin qu'ils puissent enfin entrer dans un âge d'or culinaire, soient plus productifs et affirment leur supériorité.
Reconnaissable à : Son goût délicieux, sa perfection incontestable.
Statut : Meilleur que le thé.
Thé
Une boisson inventée pour que les hérétiques n'aimant pas le café ne subissent pas la mort par sélection naturelle.
Reconnaissable à : Son goût passable pour ceux qui n'ont jamais ressenti la perfection du café.
Statut : Toléré, mais moins bon que le café.
[[=]]
[!--█ Cadre de contour █--]
[[div style="border-radius: 10px; border:solid 3px #DF7401; background:#FFFFFF; padding:0px; margin-top: 5px;"]]
[!--█ Cadre de titre █--]
[[div style="border:solid 2px #DF7401; background:#DF7401; padding:0px; margin-bottom: 5px;"]]
[!--█ Titre █--]
[[span style="color:white"]]
++* **{{Café}}**
[[/span]]
[!--█ Fin du titre █--]
[[/div]]
[!--█ Fin du cadre du titre █--]
[!--█ Contenu █--]
[[div style="padding:15px; margin-bottom: 5px;font-size: 110%; margin: 2px 0 5px;"]]
[[<]]
[!--█ Image █--]
[[f>image https://image.noelshack.com/fichiers/2017/41/5/1507893656-coffee-cup.png width="100px"]]
[!--█ Fin de l'image █--]
Il s'agit d'un breuvage divin donné aux hommes par les dieux afin qu'ils puissent enfin entrer dans un âge d'or culinaire, soient plus productifs et affirment leur supériorité.
**Reconnaissable à :** Son goût délicieux, sa perfection incontestable.
**Statut :** Meilleur que le thé.
[[/<]]
[[/div]]
[!--█ Fin du contenu █--]
[[/div]]
[!--█ Fin du cadre de contour █--]
[[/=]]
[[=]]
[[div style="border-radius: 10px; border:solid 3px #088A85; background:#FFFFFF; padding:0px; margin-top: 5px;"]]
[[div style="border:solid 2px #088A85; background:#088A85; padding:0px; margin-bottom: 5px;"]]
[[span style="color:white"]]
++* **{{Thé}}**
[[/span]]
[[/div]]
[[div style="padding:15px; margin-bottom: 5px;"]]
[[<]]
[[div style="font-size: 110%; margin: 2px 0 5px;"]]
[[f>image https://image.noelshack.com/fichiers/2017/41/5/1507893660-teapot.png width="100px"]]
Une boisson inventée pour que les hérétiques n'aimant pas le café ne subissent pas la mort par sélection naturelle.
**Reconnaissable à :** Son goût passable pour ceux qui n'ont jamais ressenti la perfection du café.
**Statut :** Toléré, mais moins bon que le café.
[[/div]]
[[/<]]
[[/div]]
[[/div]]
[[/=]]
Fondation SCP ─ Intranet FR
Connexion sécurisée établie : Forum
Ce message est votre premier.
Ce message est votre second.
Ce message est votre troisième.
Nom du personnage qui parle
C'est le premier message de l'interlocuteur
Nom de l'interlocuteur
Ce message est votre quatrième.
Nom du personnage qui parle
C'est le deuxième message de l'interlocuteur
C'est le troisième message de l'interlocuteur
C'est le quatrième message de l'interlocuteur
Nom de l'interlocuteur
[!--█ Cadre noir █--]
[[div style="border-radius: 15px; border:solid 5px #2E2E2E; background:#2E2E2E; padding:0px; margin-top: 5px;text-align: center;color:white"]]
[!--█ Titres █--]
++* **{{Fondation SCP ─ Intranet FR}}**
+++* **{{Connexion sécurisée établie : Forum}}**
[!--█ Fin des titres █--]
[!--█ Fenêtre de la Chatroom █--]
[[div style="display: block;border-radius: 15px; border:solid 5px #585858; background:#585858; padding:15px; margin-top: 15px;clear:both"]]
[!--█ /!\ Attention, à partir d'ici, les messages appartiendront à deux familles : Ceux de gauche, qui seraient les vôtres si vous écriviez. Ceux que l'on voit comme étant les siens, et qui sont séparés des messages des autres membres ; et ceux de droite, qui sont ceux des autres personnages. /!\ █--]
[!--█ Dans chaque famille existent 4 types de messages : les messages du haut, ceux du milieu, ceux du bas et les solitaires. Les 3 premiers types sont utilisés pour les séries de messages de la même personne : Si la personne poste plusieurs messages à la suite, le premier sera un message du haut, et le dernier sera un message du bas. Entre les deux, il n'y aura que des messages du milieu. Si la personne ne poste qu'un seul message, c'est un message solitaire. █--]
[!--█ À ces messages s'ajoute un petit ajout : le nom. il y a deux côtés pour les messages de nom : ceux de droite et de gauche. Les messages de nom sont toujours en dessous du dernier message de la série. Si le message est solitaire, en dessous du message. █--]
[!--█ À partir de là, les blocs seront divisés selon deux principes : "Famille|Type" pour les normaux, et "Côté|Nom" pour les messages de nom. █--]
[!--█ Gauche|Haut █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #CEF6D8; border-radius:25px 50px 15px 5px; margin: 5px 250px 5px 5px;"]]
Ce message est votre premier.
[[/div]]
[!--█ Fin de Gauche|Haut █--]
[!--█ Gauche|Milieu█--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #CEF6D8; border-radius:5px 15px 15px 5px; margin: 5px 250px 5px 5px;"]]
Ce message est votre second.
[[/div]]
[!--█ Fin de Gauche|Milieu█--]
[!--█ Gauche|Bas █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #CEF6D8; border-radius:5px 15px 50px 25px; margin: 5px 250px 5px 5px;"]]
Ce message est votre troisième.
[[/div]]
[!--█ Fin de Gauche|Bas █--]
[!--█ Gauche|Nom █--]
[[div style="text-align: left; font-size: 70%; margin: -5px 0px -5px 10px;"]]
Nom du personnage qui parle
[[/div]]
[!--█ Fin de Gauche|Nom █--]
[!--█ Droite|Solitaire █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #A9E2F3; border-radius:50px 25px 25px 50px; margin: 5px 5px 5px 250px;"]]
C'est le premier message de l'interlocuteur
[[/div]]
[!--█ Fin de Droite|Solitaire █--]
[!--█ Droite|Nom █--]
[[div style="text-align: right; font-size: 70%; margin: -5px 0px -5px 10px;"]]
Nom de l'interlocuteur
[[/div]]
[!--█ Fin de Droite|Nom █--]
[!--█ Gauche|Solitaire █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #CEF6D8; border-radius:25px 50px 50px 25px; margin: 5px 250px 5px 5px;"]]
Ce message est votre quatrième.
[[/div]]
[!--█ Fin de Gauche|Solitaire █--]
[!--█ Gauche|Nom █--]
[[div style="text-align: left; font-size: 70%; margin: -5px 0px -5px 10px;"]]
Nom du personnage qui parle
[[/div]]
[!--█ Fin de Gauche|Nom █--]
[!--█ Droite|Haut █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #A9E2F3; border-radius:50px 25px 5px 15px; margin: 5px 5px 5px 250px;"]]
C'est le deuxième message de l'interlocuteur
[[/div]]
[!--█ Fin de Droite|Haut █--]
[!--█ Droite|Milieu █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #A9E2F3; border-radius:15px 5px 5px 15px; margin: 5px 5px 5px 250px;"]]
C'est le troisième message de l'interlocuteur
[[/div]]
[!--█ Fin de Droite|Milieu █--]
[!--█ Droite|Bas █--]
[[div style="text-align: left; padding: 15px 30px 15px 30px; color: black; background-color: #A9E2F3; border-radius:15px 5px 25px 50px; margin: 5px 5px 5px 250px;"]]
C'est le quatrième message de l'interlocuteur
[[/div]]
[!--█ Fin de Droite|Bas █--]
[!--█ Droite|Nom █--]
[[div style="text-align: right; font-size: 70%; margin: -5px 0px -5px 10px;"]]
Nom de l'interlocuteur
[[/div]]
[!--█ Fin de Droite|Nom █--]
[[/div]]
[!--█ Fin de la fenêtre de la Chatroom █--]
[[/div]]
[!--█ Fin du cadre noir █--]
Fondation SCP ─ Intranet FR
Ouverture du chat
Connexion sécurisée établie : [Salon_1]
Nom-Prénom
Ici vous mettez votre texte pour le message.
Et ça marche sur plusieurs lignes !
C'est super bien comme truc !
Nom-Prénom
Même principe, mais pour les autres personnages.
Nom-Prénom
Vous pouvez lancer un dialogue avec des réponses et plusieurs messages.
Nom-Prénom
C'est assez efficace comme vous pouvez le voir.
Nom-Prénom
Et alterner pour créer une discussion, on peut même mettre plusieurs personnages secondaires en changeant le nom et l'image.
D'ailleurs, vous pouvez aussi utiliser les notifications, comme ceci :
Vous avez (1) notification
[Salon_2]
Changement de salon :
[Salon_1] → [Salon_2]
Nom-Prénom
Message épinglé dans [Salon_2]
Un message épinglé c'est pratique à avoir sous la main, on sait jamais ce dont on aura besoin.
Donc je vous en propose un, et il est joli.
Nom-Prénom
Message épinglé dans [Salon_2]
Et donc la variante pour le personnage principal.
Déconnexion du Chat
Alternative pour les messages :
Dans cet exemple, une alternative est possible, permettant d'avoir le cadre du message qui englobe tout le temps l'image, qu'il y ait plusieurs lignes de texte ou non dans le message.
Pour appliquer cette alternative, il suffit d'ajouter la valeur "min-height : 90px" dans le code du message, de cette manière :
Vous pouvez entrer votre message ici.
[!--█ Début de Message des personnages secondaires█--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #D5D5D5; border-radius:30px /60px; margin: 5px 5px5px 80px; min-height: 90px; "]]
[!--█ Début de Image des personnages secondaires █--]
[[f>image █████.png]]
[!--█ Fin de Image des personnages secondaires █--]
Vous pouvez entrer votre message ici.
[[/div]]
[!--█ Fin de Message des personnages secondaires █--]
[!--█ Début de Cadre noir █--]
[[div style="color: #f5e9e9; background-color: #009494; border-radius:30px /70px; background:#009494; background:linear-gradient(#252525, #323232); text-align: left; padding: 5px 5px 5px 5px;"]]
[!--█ Titres █--]
[[=]]
++* **{{Fondation SCP ─ Intranet FR}}**
[[/=]]
[!--█ Fin des titres █--]
[!--█ Début de Fond gris █--]
[[div style="text-align: center; padding: 2px 15px 15px 15px; color: black; background-color: #636363; border-radius:30px /80px;border-width: 15px 25px 15px 15px; border-style : solid; border-color : #636363; overflow : auto; height : 550px"]]
[!--█ Début de Message d'ouverture █--]
[[div style="text-align: center; padding: 2px 10px 2px 10px; color: black; background-color: #5DD18B; border-radius:30px /60px; margin: 5px 40px 5px 40px;"]]
+++ Ouverture du chat
++++ Connexion sécurisée établie : [Salon_1]
[[/div]]
[!--█ Fin de Message d'ouverture █--]
[!--█ Début de Nom du Personnage principal █--]
@@ @@
[[div style="text-align: right; font-size: 70%; margin: -10px 85px -5px 0px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom du Personnage principal █--]
[!--█ Début de Message du Personnage principal █--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #A2C0CE; border-radius:30px /60px; margin: 5px 80px 5px 5px;"]]
[!--█ Début de Image du Personnage principal █--]
[[f<image █████.png]]
[!--█ Fin de Image du Personnage principal █--]
Ici vous mettez votre texte pour le message.
Et ça marche sur plusieurs lignes !
C'est super bien comme truc !
[[/div]]
[!--█ Fin de Message du personnage principal █--]
[!--█ Début de Nom des personnages secondaires █--]
@@ @@
[[div style="text-align: left; font-size: 70%; margin: -10px 0px -5px 85px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom des personnages secondaires █--]
[!--█ Début de Message des personnages secondaires█--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #D5D5D5; border-radius:30px /60px; margin: 5px 5px 5px 80px;"]]
[!--█ Début de Image des personnages secondaires █--]
[[f>image █████.png]]
[!--█ Fin de Image des personnages secondaires █--]
Même principe, mais pour les autres personnages.
[[/div]]
[!--█ Fin de Message des personnages secondaires █--]
[!--█ Début de Nom du Personnage principal █--]
@@ @@
[[div style="text-align: right; font-size: 70%; margin: -10px 85px -5px 0px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom du Personnage principal █--]
[!--█ Début de Message du Personnage principal █--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #A2C0CE; border-radius:30px /60px; margin: 5px 80px 5px 5px;"]]
[!--█ Début de Image du Personnage principal █--]
[[f<image █████.png]]
[!--█ Fin de Image du Personnage principal █--]
Vous pouvez lancer un dialogue avec des réponses et plusieurs messages.
[[/div]]
[!--█ Fin de Message du personnage principal █--]
[!--█ Début de Nom du Personnage principal █--]
@@ @@
[[div style="text-align: right; font-size: 70%; margin: -10px 85px -5px 0px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom du Personnage principal █--]
[!--█ Début de Message du Personnage principal █--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #A2C0CE; border-radius:30px /60px; margin: 5px 80px 5px 5px; "]]
[!--█ Début de Image du Personnage principal █--]
[[f<image █████.png]]
[!--█ Fin de Image du Personnage principal █--]
C'est assez efficace comme vous pouvez le voir.
[[/div]]
[!--█ Fin de Message du personnage principal █--]
[!--█ Début de Nom des personnages secondaires █--]
@@ @@
[[div style="text-align: left; font-size: 70%; margin: -10px 0px -5px 85px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom des personnages secondaires █--]
[!--█ Début de Message des personnages secondaires█--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #D5D5D5; border-radius:30px /60px; margin: 5px 5px 5px 80px;"]]
[!--█ Début de Image des personnages secondaires █--]
[[f>image █████.png]]
[!--█ Fin de Image des personnages secondaires █--]
Et alterner pour créer une discussion, on peut même mettre plusieurs personnages secondaires en changeant le nom et l'image.
D'ailleurs, vous pouvez aussi utiliser les notifications, comme ceci :
[[/div]]
[!--█ Fin de Message des personnages secondaires █--]
[!--█ Début de Message de notification █--]
@@ @@
[[div style="text-align: center; padding: 2px 10px 2px 10px; color: black; background-color: #CBD15D; border-radius:30px /60px; margin: 5px 40px 5px 40px;"]]
+++ Vous avez (1) notification
++++ [Salon_2]
[[/div]]
[!--█ Fin de Message de notification █--]
[!--█ Début de Message de changement de salon █--]
@@ @@
[[div style="text-align: center; padding: 2px 10px 2px 10px; color: black; background-color: #8F5DD1; border-radius:30px /60px; margin: 5px 40px 5px 40px;"]]
+++ Changement de salon :
++++ [Salon_1] → [Salon_2]
[[/div]]
[!--█ Fin de Message de changement de salon █--]
[!--█ Début de Nom secondaire épinglé █--]
@@ @@
[[div style="text-align: left; font-size: 70%; margin: -10px 0px -5px 85px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom secondaire épinglé █--]
[!--█ Début de Message secondaire épinglé █--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #D5D5D5; border-radius:30px /60px; margin: 5px 5px 5px 80px;"]]
[!--█ Début de Image personnage secondaire épinglé | Icône épinglée █--]
[[f>image █████.png]][[f>image pinned.png]]
[!--█ Fin de Image personnage secondaire épinglé | Icône épinglée █--]
+++ Message épinglé dans [Salon_2]
@@ @@
Un message épinglé c'est pratique à avoir sous la main, on sait jamais ce dont on aura besoin.
Donc je vous en propose un, et il est joli.
[[/div]]
[!--█ Fin de Message secondaire épinglé █--]
[!--█ Début de Nom principal épinglé █--]
@@ @@
[[div style="text-align: right; font-size: 70%; margin: -10px 85px -5px 0px;"]]
Nom-Prénom
[[/div]]
[!--█ Fin de Nom principal épinglé █--]
[!--█ Début de Message principal épinglé █--]
[[div style="text-align: left; padding: 2px 10px 2px 10px; color: black; background-color: #A2C0CE; border-radius:30px /60px; margin: 5px 80px 5px 5px;"]]
[!--█ Début de Image personnage principal épinglé | Icône épinglée █--]
[[f<image █████.png]][[f<image pinned.png]]
[!--█ Fin de Image personnage principal épinglé | Icône épinglée █--]
+++ Message épinglé dans [Salon_2]
@@ @@
Et donc la variante pour le personnage principal.
[[/div]]
[!--█ Fin de Message principal épinglé █--]
[!--█ Début de Message de fermeture █--]
@@ @@
[[div style="text-align: center; padding: 2px 10px 2px 10px; color: black; background-color: #D15D5D; border-radius:30px /60px; margin: 5px 40px 5px 40px;"]]
+++ Déconnexion du Chat
[[/div]]
[!--█ Fin de Message de fermeture █--]
[[/div]]
[!--█ Fin de Fond gris █--]
[[/div]]
[!--█ Fin de Cadre noir █--]
Conclusion
Contributions
Vous voulez contribuer en ajoutant un exemple à cette liste ?
Ce sera avec plaisir, mais seulement à certaines conditions :
- La mise en page doit être "intéressante" → Si il n'y a rien à en tirer, ce n'est pas la peine de le mettre ici
- La mise en page doit être originale → Un remaniement simple d'un exemple déjà présent ne sert à rien. Si vous utilisez une mise en page créée à partir d'un des exemples, alors il faut que votre mise en page se démarque suffisamment.
Si vous réunissez ces deux conditions, alors vous pouvez y aller !
Voici les étapes à respecter :
- 1. Ajoutez le nom de la mise en page à la bonne place dans la table des matières. Si il s'agit d'un style nouveau et ne ressemblant à aucun, nommez le et ajoutez le en fin de liste, si il s'agit d'un style déjà exploré, comme par exemple la lettre, nommez le comme les autres, et ajoutez un numéro, dans le cas de la lettre, ça donnerait "Lettre 4".
- 2. Créez un onglet à la bonne place, qui est la même que dans la table des matières.
- 3. Expliquez votre code avec les balises.
- 4. Attestez votre participation dans la partie remerciements prévue à cet effet.
- 5. Récoltez les honneurs et la gloire.
J'ajoute aussi que votre exemple doit être "rempli". Le contenu ne suit pas vraiment de règles, du moment que ça a un sens.
Troisième partie | Contributions
Remerciement
Cet essai ne s'est pas écrit tout seul, et on doit bien mettre une section remerciements à la fin pour parler de ceux qui ont aidé à l'ajout d'exemples :
Merci à ceux qui ont proposé des mises en pages dans les requêtes :
Merci à ceux qui ont contribué à agrandir la liste d'exemples :
- PrKendrick does not match any existing user name ─ Lettre 1, Lettre 2, Lettre 3, Lettre 4, Fiche informative 1, Fiche informative 2, Fichier informatique 1, Billet informatif 1, Chatroom 1, Chatroom 2
Format :
* [[*user nom]] ─ [Nom de la mise en page]
Troisième partie | Contributions
Sécuriser. Contenir. Protéger.