"Tutorial" - BB-Code/Formatierungen

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

"Tutorial" - BB-Code/Formatierungen

Beitrag#1 » Dienstag, 14.11.2017, 18:37

Bild
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

Es können auch mehrere Formatierungen auf eine Phrase angewandt werden.
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)
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


-> 2.2.2 ungeordnete Listen

Funktionieren gleich, wie geordnete Listen, nur dass diesmal keine Ordnungsvariable angegeben werden muss.

Code: Alles auswählen

[list] [*]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

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

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 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: 1039
10 x

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



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast