"Tutorial" - BB-Code/Formatierungen

Ein Ort, an dem man ein Bier trinken kann.
A_Timelord
Alpha-Tester
Alpha-Tester
Rekrut
Rekrut
Beiträge: 17

"Tutorial" - BB-Code/Formatierungen

Beitrag#1 » Dienstag, 14.11.2017, 18:37

Bild

Edit: Habe gerade eine Entdeckung gemacht. So verschwendet man vier Stunden seines Lebens...
Ich empfehle jedem diese Anleitung!


Floating_Matter @ Forumdesign - Bugreport hat geschrieben:Und noch etwas ganz anderes: werden die Eingabefelder für neue Beiträge eigentlich noch überarbeitet? Ich denke nämlich, dass es einige Spieler geben wird, die mit den BB-Code-Optionen nicht so gut zurechtkommen und sich eher eine Eingabe mit Dropdown-Menüs für Schriftgröße, Schriftart etc. und einer extra Funktion zum Einfügen bzw. Hochladen von Bildern wünschen werden.


Ich weiß zwar nicht, ob noch eine Überarbeitung in Planung Ist, allerdings werde ich dennoch einmal versuchen, möglichst alle Funktionen des BB-Codes zusammenzufassen.

-> 1. Allgemeine Nutzungsweise <-


-> 1.1 markierter Text

Dies ist die, meiner Meinung nach, einfachste Methode den BB-Code zu nutzen.
Zuerst schreibt man den zu formatierenden Text.
Bsp:
Hallo, wie geht es dir?

Daraufhin markiert man diesen Text mit der Maus.
Bild

Und wählt dann über der Textbox einfach die gewünschte Formartierung aus.
Bild

Einfache Formatierungen:

Code: Alles auswählen

[b]fett[/b]


fett

Code: Alles auswählen

[i]kursiv[/i]


kursiv

Code: Alles auswählen

[u]unterstrichen[/u]


unterstrichen

Code: Alles auswählen

[stroke]durchgestrichen[/stroke]


durchgestrichen

Es können auch mehrere Formatierungen auf eine Phrase angewandt werden.
Hierbei ist zu beachten, dass die Tags immer korrekt geschlossen werden.

Code: Alles auswählen

[b][i][u] fett, kursiv und unterstrichen [/u][/i][/b]


Bsp:
fett, kursiv und unterstrichen


-> 1.2 geschriebener Text

Die zweite Methode besteht darin, zuerst eine Formatierung zu wählen und anschließend erst den Text zu schreiben.
Dabei wird der Text einfach zwischen die zwei, in eckige Klammern gesetzte, "Argumente" der Formatierung geschrieben.

Code: Alles auswählen

[Argument=Option] Text [/Argument]

Bsp:

Code: Alles auswählen

[size=150] Hier dein Text (Standartschriftgröße = 100) [/size]


wird zu:
Hier dein Text (Standartschriftgröße = 100)



-> 1.3 geschriebene Formatierung

Natürlich kann man auch die komplette Formatierung selbst tippen, dies benötigt hoffentlich keine weitere Erklärung.


-> 2. Spezialfälle & Optionen <-


-> 2.1 Zitate

Bei Zitaten kann eine zusätzliche Option angegeben werden, welche festlegt, wen man zitiert.
Hierbei ist zu beachten, dass man die Option in Anführungszeichen setzt.

Code: Alles auswählen

[quote="SUBJEKT"]Beispieltext[/quote]


Bsp:

Code: Alles auswählen

[quote="Mein Nachbar"]Was für ein herrlicher Tag![/quote]


Mein Nachbar hat geschrieben:Was für ein herrlicher Tag!


Dieser Zusatz muss allerdings nicht angegeben werden

Code: Alles auswählen

[quote]Dies ist ein Beispielsatz[/quote]


Dies ist ein Beispielsatz



-> 2.2 Listen

-> 2.2.1 geordnete Listen

Geordnete Listen beinhalten Zahlen oder Buchstaben, um eine Reihenfolge vorzugeben.
Die mir bekannten, gültigen Variablen, zum Ordnen einer Liste, sind:
  • 1 - (arabische ("normale") Zahlen)
  • a - (lateinisches ("normales") Alphabet)
  • i - (römische Zahlen)
  • A - (lateinisches ("normales") Alphabet (groß))
  • I - (römische Zahlen (groß))
Die einzelnen Punkte einer Liste werden mit [*] unterteilt

Code: Alles auswählen

[list=VARIABLE] [*]Punkt eins [*]Punkt zwei [*]Punkt drei [/list]


Beispiele:

Code: Alles auswählen

[list=1] [*]Punkt eins [*]Punkt zwei [*]Punkt drei [/list]



  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei

Code: Alles auswählen

[list=a] [*]Punkt eins [*]Punkt zwei [*]Punkt drei [/list]



  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei

Code: Alles auswählen

[list=i] [*]Punkt eins [*]Punkt zwei [*]Punkt drei [/list]



  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei

Code: Alles auswählen

[list=A] [*]Punkt eins [*]Punkt zwei [*]Punkt drei [/list]



  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei

Code: Alles auswählen

[list=I] [*]Punkt eins [*]Punkt zwei [*]Punkt drei [/list]



  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei


-> 2.2.2 ungeordnete Listen

Funktionieren gleich, wie geordnete Listen, nur dass diesmal keine Ordnungsvariable angegeben werden kann.
Stattdessen können nun die Aufzählungszeichen verändert werden.

Code: Alles auswählen

[list] [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [/list]


  • ein ungeordneter Punkt
  • ein ungeordneter Punkt
  • ein ungeordneter Punkt


Die Verschiedenen Aufzählungszeichen sind:

  • circle - Kreis
  • disc - Punkt
  • square - Quadrat

Code: Alles auswählen

[list=circle] [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [/list]



  • ein ungeordneter Punkt
  • ein ungeordneter Punkt
  • ein ungeordneter Punkt

Code: Alles auswählen

[list=disc] [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [/list]



  • ein ungeordneter Punkt
  • ein ungeordneter Punkt
  • ein ungeordneter Punkt

Code: Alles auswählen

[list=square] [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [*]ein ungeordneter Punkt [/list]



  • ein ungeordneter Punkt
  • ein ungeordneter Punkt
  • ein ungeordneter Punkt


-> 2.3 Schriftgröße

Wie bereits vorhin angedeutet, kann die Schriftgröße ebenfalls komplett frei gewählt werden und ist nicht auf die vorgegebenen fünf Größen beschränkt.

Code: Alles auswählen

[size=Zahl] Beispieltext [/size]


Dabei können sehr große, aber auch sehr kleine Größen gewählt werden.

Die maximale Schriftgröße ist bei 200 festgelegt.

Code: Alles auswählen

[size=200] Beispieltext [/size]


Beispieltext

Code: Alles auswählen

[size=50] Beispieltext [/size]


Beispieltext


-> 2.4 Bilder

Bilder können eingefügt werden, indem man diese bei einem Anbieter hochläd und dann den Link dazu angibt.

In diesem Beispiel verwende ich Imgur.

Code: Alles auswählen

[img]www.deine-url.net/##########.png[/img]


Bsp:

Code: Alles auswählen

[img]https://i.imgur.com/JpaiRzW.png?1[/img]


Bild

Es ist wichtig, dass der Link mit .png oder .jpg oder einem anderen Bilddateiformat endet.
Im Fall von Imgur gibt es sogar schon einen vorgefertigten BB-Code, den man nur noch kopieren muss.

Bild


-> 2.5 Links

Links verhalten sich ähnlich, wie Bilder.


Code: Alles auswählen

[url]https://www.dein-link.net[/url]


Bsp:

Code: Alles auswählen

[url]https://rpg-minecraft.de[/url]


https://rpg-minecraft.de

Hier müssen die Tags nicht zwingend gesetzt werden.

Code: Alles auswählen

https://rpg-minecraft.de


https://rpg-minecraft.de

Alternativ kann man den Link auch in Text einbinden.

Code: Alles auswählen

[url=https://www.dein-link.net] Beispieltext [/url]


Bsp:

Code: Alles auswählen

[url=https://rpg-minecraft.de] klick mich! [/url]


Bitte klick mich!


-> 2.6 Schriftfarbe

Es steht zwar bereits eine große Farbpalette zur Auswahl, allerdings kann auch die Schriftfarbe unabhängig angepasst werden.

Hier gibt es zwei Möglichkeiten:

1.

Code: Alles auswählen

[color=Farbe] farbiger Text [/color]


Als "Farbe"-Variabel wird die englische Bezeichnung eingesetzt.

Bsp:

Code: Alles auswählen

[color=blue] farbiger Text [/color]


farbiger Text


oder

Code: Alles auswählen

[color=transparent] transparenter Text [/color]


transparenter Text

2.

Code: Alles auswählen

[color=#Farbe] farbiger Text [/color]


Als "Farbe"-Variabel wird eine sechsstellige Hexadezimalzahl eingesetzt.

Bsp:

Code: Alles auswählen

[color=#008040] farbiger Text [/color]


farbiger Text

Falls nun eine bestimmte Farbe gesucht wird, verlinke ich hier eine Wikipediaseite mit Farbcodes.

-> 2.7 Schriftausrichtung

Schrift kann links, mittig oder rechts angezeigt werden.
Hier gibt es ebenfalls zwei verschiedene Varianten.

1.

Code: Alles auswählen

[center]mittig[/center]


mittig


Code: Alles auswählen

[right]rechts[/right]


rechts

2.

Code: Alles auswählen

[align=left]links[/align]


links

Code: Alles auswählen

[align=center]mittig[/align]


mittig

Code: Alles auswählen

[align=right]rechts[/align]


rechts


-> 2.8 Spielerköpfe

Spielerköpfe können auch mithilfe von BB-Code angezeigt werden.

Code: Alles auswählen

[head]Spielername[/head]


Bsp:

Code: Alles auswählen

[head]IrusVirus[/head]




-> 2.9 Code

Um Codezeilen darzustellen kann ebenfalls BB-Code verwendet werden.

Code: Alles auswählen

[code][b]Hier wird kein BB-Code angewandt![b][/code]


wird zu.

Code: Alles auswählen

[b]Hier wird kein BB-Code angewandt![b]


Es kann auch ein Parameter für PHP Code gesetzt werden.

Code: Alles auswählen

[code=php]<?php
    echo 'Hallo Welt!';
?>[/code]


wird zu

Code: Alles auswählen

<?php
    echo 
'Hallo Welt!';
?>



-> 2.10 Email-Addressen

Email Addressen können ebenfalls angegeben werden

Code: Alles auswählen

[email]deine.email@domain.com[/email]


deine.email@domain.com

-> 2.11 Spoiler

Spoiler können verwendet werden, um Inhalte zu verstecken.

Code: Alles auswählen

[spoiler] Versteckter Text [/spoiler]


Spoiler: anzeigen
Versteckter Text



-> 2.12 Youtube-Videos

Um Youtube-Videos anzuzeigen, benötigt man die Video-ID, diese befindet sich am Ende des Links, hinter dem "="

Bild

Code: Alles auswählen

[youtube] Video-ID [/youtube]


Code: Alles auswählen

[youtube]knaKWvI2NuI[/youtube]




Abschließend kann ich nur sagen:

Herzlichen Glückwunsch! Du hast bis zum Ende durchgehalten und bist jetzt, hoffentlich, ein Stückchen schlauer! (oder du hast einfach nur bis hierhin hinuntergescrollt und dir nichts durchgelesen :(.)

Und falls du es noch nicht getan hast:

Schau dir den obrigen RPG-Minecraft-Teaser an!

Ich wüsche dir noch eine(n) schöne(n) Morgen/Vormittag/Nachmittag/Abend/Nacht

~ A_Timelord

PS: Feedback, in Form von konstruktiver Kritik und Ergänzungen zum Thema, ist erwünscht!
Wortzählung: 1397
10 x

Zurück zu „Allgemeine Diskussion – „Die Taverne““



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste