Backrooms Wiki IT

Ricordati di controllare la Guida al Wikitesto per informazioni utili sul tuo codice, così da far risaltare le tue pagine!

LEGGI DI PIÙ

Backrooms Wiki IT

Introduzione

Il Wikitesto è incredibilmente importante per ravvivare le pagine della wiki e spesso viene sottoutilizzato nonostante la sua utilità. Questa guida mira a rendere il Wikitesto più comprensibile e ad aumentarne l'utilizzo generale tra le pagine. Non tutto è realizzabile con solamente col Wikitesto; Il codice HTML è molto più ampio in uso rispetto al Wikitesto, tuttavia può essere più complicato. Se qualcosa non è in questo elenco, prova a cercarlo nella Guida per Novizi di questa Wiki.

Il Wikitesto può essere utilizzato solo nel Editor sorgente, quindi tutto il Wikitesto qui (tranne negli esempi) sarà scritto nel Nel Editor Visuale.

Composizione Base della Pagina

Intestazioni

Le intestazioni sono intese come titoli per le principali sezioni della pagina, come una descrizione del livello, o una sezione che elenca le colonie. Pensa a questi come titoli di capitolo per un libro. Ad esempio, l'intestazione qui sopra, ovvero, "Composizione di base della pagina". Un testo con due segni uguali su entrambi i lati lo rende un'intestazione, che verrà visualizzata più grande rispetto al resto del normale testo e verrà aggiunta all'indice della pagina. Questi sono formattati nell'editor di origine così:

==Esempio Intestazione==


Sotto Intestazione
I sotto-sottotitoli hanno lo scopo di organizzare ulteriormente le pagine, come sottocategoria sotto l'intestazione. Ad esempio, il testo sopra "Intestazione" e "Sotto Intestazione" sono entrambi formattati come sottotitoli, sotto il sottotitolo principale di "Composizione Base della Pagina". Questi sono formati con tre segni di uguale su entrambi i lati del testo, formattati così:

===Esempio Sotto Intestazione===


Sotto Intestazione 2
La Sotto Intestazione 2 è intesa per organizzare nel minimo dettaglio una pagina; è lo stesso concetto di una Sotto Intestazione che è una sottocategoria di un Intestazione, ma la differenza è che questa è sottocategoria di una Sotto Intestazione. È meno comune raggiungere questo livello di organizzazione nella maggior parte delle pagine, ma se è giustificato, può rivelarsi uno strumento utile. La Intestazione 2 è formattata così:

====Esempio Sotto Intestazione 2====


Intestazione Titolo
Ci si potrebbe chiedere: se le Intestazione sono due segni uguali e le sotto-intestazioni sono tre segni uguali e così via, in cosa risulta un segno uguale? Bene, il testo circostante con un segno uguale risulta in un Intestazione Titolo, che rende il testo massiccio e distraente. Questi dovrebbero essere evitati nelle pagine, in quanto contrariamente al loro nome, non cambiano il titolo effettivo della pagina; fanno solo testo molto grande e distraente. Per motivi di pulizia, un Intestazione Titolo non verrà utilizzata, ma un esempio di esso può essere trovato nella parte superiore della pagina; Testo formattato come titolo della pagina ed apparirà come "Guida al Wikitesto". Un modo migliore per ottenere testo di grandi dimensioni è tramite il codice <big> e </big>.

Editing del Testo Base

Questa è una sezione riguardante la parte più basilare della modifica del testo: le opzioni di formattazione in alto nell'Editor Visivo.

Testo in Grassetto

Il testo in grassetto negli articoli viene utilizzato principalmente per il nome di un determinato livello o entità ogni volta che viene menzionato nel proprio articolo. Ad esempio, nell'articolo del Livello 0, ogni volta che viene detto "Livello 0", viene messo in grassetto. Questo permette una migliore organizzazione e dà una sensazione più pulita alla pagina.

Testo in grassetto nell'Editor Sorgente:
'''Testo'''

Risultato: Testo

Testo in Corsivo

Il testo in corsivo è meno comunemente usato nelle pagine, ma ha ancora i suoi usi. Sottolineare un punto in un articolo con il testo in corsivo risulta più gradevole piuttosto che, diciamo, completamente in maiuscolo; testo come "NON ENTRATE, per nessuna ragione, in questo livello" sembra inadatto negli articoli. Se qualcosa è così importante da sottolineare, si consiglia di usare il corsivo.

Testo in corsivo nell'Editor Sorgente:
''Testo''

Risultato: Testo

Testo Sottolineato

Pur essendo una delle tre semplici opzioni di formattazione elencate nella parte superiore dell'Editor visivo, il testo sottolineato viene scritto nell'Editor di origine circondando il testo con <u> e </u>, piuttosto che con gli apostrofi.

Testo sottolineato nell'Editor Sorgente:
<u>Testo</u>

Risultato: Testo

Testo Barrato

Se si desidera che il testo sembri cancellato, basta circondalo con <s> e </s>. Questo può essere usato per informazioni che sono state modificate dopo una nuova scoperta.

Testo barrato nell'Editor Sorgente:
<s>Testo</s>

Risultato: Testo

Modifica Intermedia del Testo

Il testo può essere ulteriormente modificato in molti modi interessanti e utili, come l'aggiunta ombre, codice, o anche testo colorato. Questi sono meno comunemente usati negli articoli, ma possono ancora servire a qualcosa ogni tanto (evitare di abusarne).

Testo Codice

Il testo circostante con <code> e </code> cambierà il suo carattere in un look più computerizzato. Questo può essere usato per molte cose diverse, come nel caso di questa pagina, dove tutti gli esempi di codice di Modifica sorgente sono impostati sul font del codice. In rare circostanze, il carattere di un'intera pagina potrebbe essere impostato su questo aspetto, cambiando completamente la sua sensazione.

Testo codice nell'Editor Sorgente:
<code>Testo</code>

Risultato: Testo

Testo Sfocato

Questa funzionalità aggiunta di recente permette di sfocare il testo fino a quando non viene spostato con il mouse. Ci sono molti usi creativi per esso!

Testo sfocato nell'Editor Sorgente:
<span class="spoilerblur">Testo Esempio</span>

Risultato: Testo Esempio

Testo Colorato

Puoi anche colorare il testo usando l'Editor Sorgente, con tante opzioni diverse. Questo dovrebbe essere usato solo in circostanze molto specifiche, come il testo pieghevole, che sarà affrontato in seguito. Non colorare l'intero testo di una pagina; è difficile da leggere e rende la tua pagina simile a un blog dal 2008.

Testo colorato nell'Editor Sorgente:
<span style="color:green;">Testo</span>

Risultato: Testo

Ci sono molte opzioni di colore oltre al verde, come ad esempio: il blu, il rosso, e il giallo. Tuttavia, il testo da colorare non è limitato solo ai colori semplici; con i codici colore HTML è possibile rendere il testo qualsiasi tonalità specifica si desidera. Basta sostituire "color: NOME COLORE;" con qualsiasi esadecimale HTML, formattato come "color:#FFFFFF;" (non dimenticare il "#" prima del codice esadecimale, poiché il colore non apparirà senza di esso).

Testo Ondulato

Anche se non comunemente usato, il testo può essere
ondulato
! Basta usare il seguente codice nell'editor sorgente:
<div class="wavy-text"><span>lettera-1</span><span>lettera-2</span><span>lettera-3</span><span>lettera-4</span></div>

Nota: All resulting letters will be capitalized, and the font cannot be changed. The text color, however, can be changed, along with shadows.

ondulato
<span style="color: #3A3A3A; text-shadow: 2px 1px 0 #7A7A7A"><div class="wavy-text"><span>o</span><span>n</span><span>d</span><span>u</span><span>l</span><span>a</span><span>t</span><span>o</span></div></span>

Testo con Ombre

L'aggiunta di ombre al testo può farlo risaltare e apparire molto più unico! Ecco alcuni esempi delle molte cose che si possono fare con le ombre nel testo:

Ombra Base
Ombra base nell'Editor sorgente:

<span style="color: #3A3A3A; text-shadow: 2px 1px 0 #7A7A7A">Testo d'Esempio</span>

Un esempio di testo con un'ombra di base.

> Apri la Lista degli Stili d'Ombra
> Chiudi la Lista degli Stili d'Ombra

Ombra Distante
Ombra Distante nell'Editor sorgente:

<span style="color: white; text-shadow: 1px 3px 0 #969696, 1px 9px 5px #aba8a8">Testo d'Esempio</span>

Un esempio di testo con ombra distante.

Bagliore Spesso
Testo luminoso nell'Editor Sorgente:

<span style="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red">Testo d'Esempio</span>

un esempio di testo rosso con bagliore rosso e spesso.

Ombra di Fuoco
Testo di fuoco nell'Editor Sorgente:

<span style="color: red; text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;">Example text</span>

Un esempio di testo di FUOCO.

Delineare Usando l'Ombra
Testo delineato nell'Editor Sorgente:

<span style="color: white; text-shadow: 2px 2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, -2px -2px 0 #000000, 2px 0px 0 #000000, 0px 2px 0 #000000, -2px 0px 0 #000000, 0px -2px 0 #000000">Testo d'Esempio</span>

Un esempio di Testo delineato usando le ombre.

Ombra in Stile Fumetto
Ombra in Stile Fumetto nell'Editor Sorgente:

<span style="color: white; text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd">Testo d'Esempio</span>

Un esempio di testo in stile fumetto.

Ombra Spaziata
Ombra Spaziata nell'Editor Sorgente:

<span style="color: white; text-shadow: -3px 3px 0px #00e6e6, -8px 8px 0px #01cccc, -13px 13px 0px #00bdbd">Testo d'Esempio</span>

Un esempio di testo spaziato, e ombreggiato.

Ombra Stratificata
Ombra Stratificata nell'Editor Sorgente (aggiungi <big> per compensare le dimensioni):

<big><span style="color: red; text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9)">Testo d'Esempio</span></big>

Un esempio di un bellissimo testo stratificato.

Posizionamento del Testo

Il testo può essere posizionato in molti modi diversi, come ad esempio:
a destra,
al centro,
e a sinistra!
Testo posizionato nell'Editor Sorgente:
<div style="text-align:left">

"Left" può essere sostituito con "center" e "right" per ottenere la posizione desiderata! Inoltre, si può usare <center> e </center> per centrare il testo in modo più veloce, ma questa scorciatoia non funziona con sinistra o destra.

Font

I font personalizzati sono una recente aggiunta a questo wiki; questi font includono: IM Fell English, Kavivanar, Akaya Telivigala, Pacifico, e Major Mono Display, solo per citarne alcuni. Come suggerisce il loro nome, sostituiscono il carattere degli articoli predefinito di Fandom.

> Apri Lista di Font
> Chidi Lista di Font

Georgia

Georgia nell'Editor Sorgente:
<span style="font-family:Georgia;">Testo d'Esempio</span>

Result: Questa è una frase d'esempio.

IM Fell English

IM Fell English nell'Editor Sorgente:
<span style="font-family:IM Fell English;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Kavivanar

Kavivanar nell'Editor Sorgente:
<span style="font-family:Kavivanar;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Akaya Telivigala

Akaya Telivigala nell'Editor Sorgente:
<span style="font-family:Akaya Telivigala;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

PT Mono

PT Mono nell'Editor Sorgente:
<span style="font-family:PT Mono;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Mate SC

Mate SC nell'Editor Sorgente:
<span style="font-family:Mate SC;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Pacifico

Pacifico nell'Editor Sorgente:
<span style="font-family:Pacifico;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Lobster

Lobster nell'Editor Sorgente:
<span style="font-family:Lobster;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Qahiri
Qahiri nell'Editor Sorgente (usare "font-size:30px;" perché il carattere è molto piccolo di default):

<span style="font-family:Qahiri;font-size:30px;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Major Mono Display

Major Mono Display nell'Editor Sorgente:
<span style="font-family:Major Mono Display;">Testo d'Esempio</span>

Risultato: Questa è una frase d'esempio.

Composizione Pagina Intermedia

Divbox

Div Colorati

Div Colorati che contengono testo può essere utilizzato per trasmettere una certa "sensazione" all'interno della tua pagina, o per organizzare la tua pagina in sezioni facilmente distinguibili. Assicurati sempre che il colore del testo e il colore di sfondo non si mescolino bene insieme, o il testo sarà difficile da leggere.

<div style="background-color: (Questo è il colore che andrà nello sfondo. Usa il codice esadecimale o il nome del colore.); color: (Questo è il colore che avrà il testo. Proprio come il colore dello sfondo, usa il codice esadecimale o il nome del colore.); margin:2em; padding:5px 10px; border:2px solid #FFFFFF; (Qui è dove si cambia il colore del bordo. Si consiglia di farlo nero o bianco, ma puoi farlo come preferisci.) border-radius: 3px"> (Questo cambia la curvatura del bordo. Più alto è il numero, più i bordi sono arrotondati.)

Div Colorati nell'Editor Sorgente (Bianco):

<div style="background-color:#FFFFFF; color: black; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">Testo d'Esempio>


Risultato:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Div Colorati nell'Editor Sorgente (Nero):

<div style="background-color:#000000; color: white; margin:1em; padding:5px 10px; border:2px solid #FFFFFF; border-radius: 3px">Testo d'Esempio</div>


Risultato:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ci sono alternative più stilizzate hai semplici div colorati, ovvero, diversi tipi di div-box con diversi disegni disponibili per l'uso, quindi mescolali e abbinali al contenuto della tua pagina!

Quote Box

1106333

Questo è un Template:Blurquote!

Qualsiasi testo può essere messo all'interno del modello - anche altri Div!

Uso: {{Blurquote|image=imagename.imagefile|quote-text=text|person=name}}

Vedi anche: Template:Blurimage

Personalizzazione:
Usa |size=###px| in questo template per modificare la dimensione dell'immagine
<div class="blurquote-noperson">{{Blurquote}}</div>: Rimuove "~ Nome" alla fine
<div class="blurquote-noborder">{{Blurquote}}</div>: Rimuove il bordo superiore e inferiore
<div class="blurquote-noborder blurquote-noperson">{{Blurquote}}</div>: Fa entrambe le cose
~ Nome

Box a Tema

Queste caselle rispecchiano il tema del wiki, il che le rende abbastanza adatte alle pagine. Infatti, in realtà cambiano il loro colore per adattarsi se siete in modalità scura o chiaro!

Tema più chiaro nell'Editor Sorgente:

<div class="lightblock">Testo d'Esempio</div>


Risultato:

Testo d'Esempio



Tema più scuro nell'Editor Sorgente:

<div class="darkblock">Testo d'Esempio</div>


Risultato:

Testo d'Esempio



Le linee possono anche essere aggiunte al lato delle caselle per farli apparire come "blocchi citazione".

Questo div si chiama "styled-quote"


Questo div è chiamato "dark-styled-quote"


> Apri gli Stili dei Box
> Chiudi gli Stili dei Box

Blocchi col Logo

Questo div si chiama "logoblock"




Questo div si chiama "light-logoblock"




Questo div si chiama "border-logoblock"




Questo div si chiama "light-border-logoblock"




Blocchi col Bordo

Questo div si chiama "borderblock"




Questo div si chiama "light-borderblock"




Blocchi col Titolo

TITOLO
Questo div si chiama "titleblock"
per aggiungere il titolo, aggiungi <span class="titlebox">TITOLO</span> dopo <div class="titleblock">



TITOLO
Questo div si chiama "dark-titleblock"
Per aggiungere il titolo, aggiungi <span class="dark-titlebox">Titolo</span> dopo <div class="dark-titleblock">



Blocchi Gruppi

Questo div si chiama "kauer-block"




Questo div si chiama "kauer-logoblock"




Questo div si chiama "meg-fandom-block"




Questo div si chiama "meg-fandom-logoblock"




Questo div si chiama "backrooms-pioneers-block"




Questo div si chiama "backrooms-pioneers-logoblock"




Questo div si chiama "mountain-coalition-block"




Questo div si chiama "mountain-coalition-logoblock"




Questo div si chiama "aea-block"




Questo div si chiama "aea-logoblock"



Parole Magiche

Parole Magiche fanno riferimento alle parole chiave del Wikitesto che possono modificare o rappresentare i dati in una pagina. Hanno un'ampia varietà di usi, come cambiare il titolo di una pagina, sbarazzarsi dell'Indice e molto altro.

Cambiare il Titolo di una Pagina

{{DISPLAYTITLE}}, come suggerisce il nome, può essere usato per cambiare il titolo di una pagina. Viene utilizzato in scenari in cui un autore desidera che il nome visualizzato di una pagina differisca dal titolo dell'URL. È più comunemente usato nei livelli di denominazione, formattato come tale:

{{DISPLAYTITLE: Livello ##: "Nome Livello"}}

Rimuovere il TOC

__NOTOC__ viene utilizzato per rimuovere l'Indice da una pagina. Questo comando è utile in pagine che sono sul lato più corto, o che non richiedono un organizzazione di quel livello. Il comando può essere posizionato ovunque in una pagina, anche se in genere è posizionato in basso.

Spostare il TOC

__TOC__ fa esattamente il contrario di __NOTOC__; posiziona l'indice esattamente dove viene inserito in una pagina. Questo ha pochissime applicazioni, ma può rivelarsi utile in rari casi.

ToolTip

Le possibilità sono davvero infinite quando si tratta di personalizzare il testo su Fandom! Questa funzione si aggiunge scrivendo hover-tooltip al testo, utile per aggiungere in quei dettagli extra.

ToolTip nell'Editor Sorgente:
<span class="top-tip" data-tips="Sono un ToolTip!">Passa il mouse sopra di me!</span>

Risultato: Passa il mouse sopra di me!

Composizione Pagine Avanzata

Cambiare lo Sfondo delle Pagine

Gli sfondi delle pagine possono realmente essere alterati a qualunque cosa si possa desiderare! Si possono usare sia le immagini normali e anche i GIF, in modo da ottenere un lavoro più creativo!

Sfondo con Immagine Personalizzata nell'Editor Sorgente:
{{Background|File=NOME IMMAGINE.FILE}}</div>

Il risultato non verrà visualizzato, poiché l'immagine fornita è semplicemente un file di esempio. Assicuratevi che il rapporto immagine/GIF utilizzato in 16:9 così da riempire completamente lo sfondo!

Tabella

Le tabelle sono strumenti utili per organizzare i dati in caselle pari. Hanno varie applicazioni, ma di solito non si vedono in articoli comuni. Il "background-color: #ffffff" può essere modificato in qualsiasi codice di colore esadecimale desiderato.

Tabelle nell'Editor Sorgente:

{| class="article-table"

! style="background-color: #d3d3d3" |Esempio 1
! style="background-color: #d3d3d3" |Esempio 2
! style="background-color: #d3d3d3" |Esempio 3
! style="background-color: #d3d3d3" |Esempio 4
|-
| style="background-color: #ffffff" |Sotto Esempio 1
| style="background-color: #ffffff" |Sotto Esempio 2
| style="background-color: #ffffff" |Sotto Esempio 3
| style="background-color: #ffffff" |Sotto Esempio 4
|-
| style="background-color: #ffffff" |Sotto Sotto Esempio 1
| style="background-color: #ffffff" |Sotto Sotto Esempio 2
| style="background-color: #ffffff" |Sotto Sotto Esempio 3
| style="background-color: #ffffff" |Sotto Sotto Esempio 4

|}


Risultato:

Esempio 1 Esempio 2 Esempio 3 Esempio 4
Sotto Esempio 1 Sotto Esempio 2 Sotto Esempio 3 Sotto Esempio 4
Sotto Sotto Esempio 1 Sotto Sotto Esempio 2 Sotto Sotto Esempio 3 Sotto Sotto Esempio 4

Tabelle Stilizzate
Come visto sopra, i colori e gli stili delle tabelle possono essere modificati in qualsiasi cosa si possa desiderare! Un esempio può essere questo:

{| class="article-table" style="border: 2px solid #d8ad26; margin:0;"
|+
|Testo d'Esempio
|style="border-left:solid 2px #d8ad26" | Testo
|Più Testo
|-
|Testo d'Esempio
|style="border-left:solid 2px #d8ad26" | Testo
|Più Testo
|-
|Testo d'Esempio
|style="border-left:solid 2px #d8ad26" | Testo
|Più Testo
|}


Risultato:

Testo d'Esempio Testo Più Testo
Testo d'Esempio Testo Più Testo
Testo d'Esempio Testo Più Testo

Tabber

Nelle pagine più lunghe, l'uso esclusivo di intestazioni per l'organizzazione non è sempre la scelta migliore. I tabber sono uno strumento molto utile per ridurre piacevolmente le informazioni in pezzi eleganti e leggibili. Le circostanze in cui potrebbero essere necessarie saranno spiegate dopo questo esempio.

Tabber nell'Editor Sorgente:

<tabber>

|-| Tabber=
Parola
|-| Hanno=
Parola2
|-| Questo=
Parola3
|-| Aspetto=
Parola4

</tabber>


Questo testo nell'Editor Sorgente dovrebbe dare il seguente formato:

Parola

Parola2

Parola3

Parola4

Tutto può esser messo dentro i Tabber, compresi altri Tabber! Tuttavia, dovrebbero essere usati con un po' di cautela; prima di tutto, se una pagina è costruita con intestazioni, potrebbe essere pensata per essere letta dall'alto verso il basso, ma a causa dei Tabber che fanno passare il lettore da sinistra a destra tra le schede, quello stile potrebbe scontrarsi. Inoltre, i Tabber prendono parte della "carne" da una pagina, diminuendone sostanzialmente la lunghezza; questo fa sembrare che la tua pagina abbia poco contenuto, anche se ha una quantità decente e nel complesso la fa sentire a metà.

Tabber Stilizzati
In alternativa, i Tabber possono essere disponibili in altre due forme, entrambe più "moderne" del tabber predefinito. Una di queste forme è un tabber verticale!

Tabber moderni nell'Editor Sorgente:

<div class="tabs">
<ul class="tabs__caption">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tabs__content active">Testo 1</div>
<div class="tabs__content">Testo 2</div>
<div class="tabs__content">Testo 3</div>

</div>


Risultato:

  • Tab 1
  • Tab 2
  • Tab 3
Testo 1
Testo 2
Testo 3


Il codice per un tabber verticale moderno nell'Editor Sorgente è identico al segmento di codice precedente, ma utilizza <div class="tabs vertical"> apposto di <div class="tabs">

Risultato:

  • Tab 1
  • Tab 2
  • Tab 3
Testo 1
Testo 2
Testo 3



Utilizzali come un bel sostituto per i Tabber normali!

Menu a Discesa

Selezione a Discesa

Un'alternativa opzionale ai Tabber è la selezione del contenuto a discesa, in cui le opzioni possono essere scelte tramite una scatola di apertura! Questo dovrebbe essere inserito nell'editor sorgente come segue:

<div class="sel-container"></div>
<div class="fields">
<div class="name">Campo 1</div>
<div class="field">Contenuto campo 1</div>
<div class="name">Campo 2</div>
<div class="field">Contenuto campo 2</div>
<div class="name">Campo 3</div>
<div class="field">Contenuto campo 3</div>
</div>


Risultato (questa funzione può essere lenta; ricarica la pagina se la lista non appare):

Campo 1
Contenuto campo 1
Campo 2
Contenuto campo 2
Campo 3
Contenuto campo 3

Liste Interattive

Oltre a usarli per scegliere il contenuto della pagina, i Menu a Discesa possono anche assumere la forma di elenchi cliccabili che indirizzano il lettore altrove. Questo può essere ottenuto con un template, che può essere inserito nell'Editor Sorgente come segue:

{{Dropdown|<big>Livelli</big>|[[Livello 0]]|[[Livello 1]]|[[Livello 2]]}}


Risultato:


Può essere utilizzato in molti modi diversi, sii creativo!

Barre di Caricamento

Le barre di avanzamento sono una caratteristica di nicchia ma di bell'aspetto che può essere utile in alcuni casi! Hanno molte opzioni personalizzabili! Questi stili sono elencati di seguito:

Base
Codice nell'Editor Sorgente:

<div class="progress"><span class="text">A basic bar without a label</span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

Una barra di base senza etichetta50%
> Apri Lista degli Stili delle Barre di Caricamento
> Chiudi Lista degli Stili delle Barre di Caricamento

Senza Testo
Codice nell'Editor Sorgente:

<div class="progress"><span class="text"></span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

50%


Dark
Codice nell'Editor Sorgente:

<div class="progress dark"><span class="text">Una barra scura</span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

Una barra scura50%


Fantasiosa
Codice nell'Editor Sorgente:

<div class="progress gradient"><span class="text">Una barra fantasiosa</span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

Una barra fantasiosa50%


Arrotondata
Codice nell'Editor Sorgente:

<div class="progress round"><span class="text">Una barra con bordi arrotondati</span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

Una barra con bordi arrotondati50%


Animata
Codice nell'Editor Sorgente:

<div class="progress animated"><span class="text">Una barra animata</span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

Una barra animata50%


Stili Combinati
Codice nell'Editor Sorgente:

<div class="progress dark round animated"><span class="text">Una barra scura, arrotondata e animata</span><span class="bar" style="width: 50%">50%</span></div>


Risultato:

Una barra scura, arrotondata e animata50%


Divertiti a mescolare e abbinare questi vari stili a tuo piacimento!

Testo Pieghevole

Il testo pieghevole è uno strumento molto utile negli articoli. Può essere utilizzato per cose come i documenti recuperati e file, in cui il lettore deve fare clic su qualcosa come "APRI FILE: DOCUMENTO RECUPERATO" per accedere al suo contenuto. Può essere molto difficile da applicare e il Wikitesto ama rovinarlo spesso. È dettata dall'uso di <div> e </div> con classi che indicano la collassabilità. Ecco un esempio di testo pieghevole (in grassetto quindi è ovvio che si può interagire con esso):

<div class="mw-customtoggle-first">'''APRI ADDENDUM'''</div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-first">TESTO D'ESEMPIO</div>


Questo renderà il testo "APRI ADDENDUM" interattivo. Una volta cliccato, rivelerà il testo "CONTENUTO DI ESEMPIO", ma questo potrebbe essere sostituito con tutto ciò che desideri! Terminare la stringa con </div> ti permetterà di continuare il testo della pagina dopo di esso, senza che sia incluso nel pieghevole. Ecco come il testo dovrebbe funzionare in pratica:

Apri Addendum

TESTO D'ESEMPIO


Per includere più testi pieghevoli in un documento, basta fare la stessa cosa di nuovo, ma sostituire il "primo" in "Mw-customtoggle-first" e "Mw-customcollapsible-first" con "secondo," e così via. È possibile modificare i testi pieghevoli, per renderli più stilizzati, come ad esempio la stratificazione all'interno di un altro testo, l'aggiunta di testo sottolineato o colorato, e anche con il cambiamento del titolo del pieghevole quando aperto e chiuso! Un esempio di questo potrebbe essere questo grande mucchio di codice:

<span class="mw-customtoggle-finalchanging mw-customtoggle-initialchanging"><div class="mw-collapsible" id="mw-customcollapsible-initialchanging">

<span style="color:green">'''> Apri Addendum'''</span></div></span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-finalchanging"> <div class="mw-customtoggle-finalchanging mw-customtoggle-initialchanging"> <span style="color:green">'''> Chiudi Addendum'''</span></div> </div> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-finalchanging"> TESTO D'ESEMPIO

<div>


Risultato:

> Apri Addendum
> Chiudi Addendum

TESTO D'ESEMPIO

Login Collassabile

Alcune pagine piene di lore includono un falsa casella di "login" che richiede all'utente di inserire un codice di accesso. Tuttavia, non è necessario alcun input reale, in quanto facendo clic sulla casella si rivelerà la sezione successiva del contenuto e "compilare automaticamente" la password. Questo può essere ottenuto con questo pasticcio di codice:

<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">

<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">Password</div></span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><div class="mw-customtoggle-password mw-customtoggle-password2"> PASSWORD INSERITA AUTOMATICAMENTE</div></div></div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><big>Password inserita automaticamente. Benvenuto, {{USERNAME}}.</big><br /><br />[CONTENUTO D'ESEMPIO]</div>

...Basta non pensarci. In pratica, quel codice creerebbe questo risultato:

Password
PASSWORD INSERITA AUTOMATICAMENTE
Password inserita automaticamente. Benvenuto, Gary.

[CONTENUTO D'ESEMPIO]


In alcuni casi, la pagina a volte può rovinare il testo pieghevole durante il salvataggio, come ad esempio l'aggiunta di un pulsante [Espandi] accanto ad esso, che sembra disordinato. Se questo accade, sostituisci di nuovo il testo <div> intorno ad esso con il codice fornito in questa pagina. Il testo pieghevole ha molte possibilità e la sua utilità non può essere sottovalutata.

Randomizzazione

E' possibile randomizzare anche con il Wikitesto! Per randomizzare un risultato di testo, formattare il codice come segue:

<choose>

<option> Opzione1 </option>

<option> Opzione2 </option>

<option> Opzione3 </option>

<option> Opzione4 </option>

<option> Opzione5 </option>

</choose>


This is the <choose> function, and it is used to randomly generate from a list of defined options. Using it would yield the following randomized result:

Opzione2 


Questo produce un'opzione randomizzata ogni volta che la pagina viene aggiornata e potrebbe essere usata per creare un tipo di pagina "roulette", dove cambia dinamicamente.

Eventi Basati sul Tempo

Mentre le funzioni come queste sono interessanti da usare per divertirsi, sono anche molto rare da trovare. Ad esempio, la data e l'ora correnti possono essere visualizzate in un articolo in questo modo:

Sono al momento {{#time: g}}:{{#time: i}}:{{#time:s}} {{#time: A}} {{#time: e}} del {{#time: l}}, {{#time: F}}, {{#time: j}} .

Questo codice forma il seguente testo::

Sono al momento 6:14:22 PM UTC del giovedì, gennaio, 15.

L'anno corrente può anche essere aggiunto con la funzione
{{#time: Y}}

Gli eventi basati sul tempo nel Wikitesto sono incredibilmente imperfetti e poco attendibili, e Javascript è indispensabile per creare qualcosa di più di un sistema rudimentale. Se volessimo fare una pagina che cambia su una base di 30 minuti, useremmo questo sistema:

{{#ifexpr {{#time: i}} > 30 | contenuto pagina 1 | contenuto pagina 2}}

Il difetto più evidente è che questo non viene eseguito ogni volta che una pagina viene caricata, ma piuttosto quando una pagina viene analizzata. Ciò significa che ci vorrebbero realisticamente circa due giorni per passare alla seconda versione del contenuto della pagina se la pagina non viene modificata. Nel complesso, Javascript fa il lavoro molto meglio, in parte, di questa funzione.

Funzioni

Ci sono molti strumenti di base che puoi usare per costruire la tua pagina. Il primo di questi è {{#expr}}. Questo esegue una logica di base o un comando matematico e stampa la risposta. I dati stampati da questo comando non possono essere utilizzati in un'altra funzione e vengono visualizzati solo quando si visualizza una pagina.

{{#ifexpr}} è una semplice funzione true/false, che stampa qualcosa in base al fatto che un comando {{#expr}} sia vero o falso. È formattato {{#ifexpr (Inserisci l'operazione matematica qui) | Testo vero | Testo falso}}. Per esempio, se fai {{#ifexpr 40 = 50 | Testo vero | Testo falso}}, otterresti testo falso. Questo testo può essere sostituito con qualsiasi cosa, fino a un intero livello.

{{#ifeq}} Confronta se due cose sono uguali. È formattato come {{#ifeq input1 | input2 |output1 |output2}}, e può essere utilizzato sia per testo che per numeri.

La funzione {{#switch}} è estremamente complesso e sarà rara da incontre. Esegue una lista di casi di istruzione. Tuttavia, fino a quando gli input degli utenti non diventano una cosa, questo probabilmente sarà usato solo su eventi temporali se ci sono tre o più risultati. La sintassi è {{#switch: (Input) |(Caso 1) = (Output 1)|(Caso 2) = (Output 2)|…(Caso k) = (Output k) | (Output se nessuno dei casi è vero)}}. Per esempio, {{#switch: x |1 = True|2 = False|Non valido}} restituisce True se x=1, False se x=2 e non Valido se x non è uguale a uno dei due.

Altri Codici

Qui sono presenti alcune novità, per lo più estetiche, che potete inserire nella vostra pagina! Notare però che questi codici non sono indispensabili.

Testo Lampeggiante

Con "Testo Lampeggiante" si intende un tipo di testo in grado di apparire e sparire all'infinito. Può risultare utile quando in alcune pagine si va a rappresentare il cmd del computer. Puoi vederlo in azione nel Buco della Disgrazia.

Testo Lampeggiante nell'Editor Sorgente:
<span class="visibility-animation">Testo d'Esempio</span>


Risultato: Testo d'Esempio

Puoi vederlo in azione nel Buco della Disgrazia.