Author Topic: BB-Code  (Read 3084 times)

0 Members and 1 Guest are viewing this topic.

Offline Warband4Ever

  • Major
  • *
  • Posts: 169
  • Tapfer und treu zum Schutze der Krone
    • View Profile
    • Kaiserliches Heer
  • Nick: kk_Ins_Bat_Inf_Bat_Ins_kk
  • Side: Neutral
BB-Code
« on: September 24, 2016, 01:51:49 pm »
BB-Code

Das Flying Squirrel Entertainment-Forum ermöglicht uns sogenannte BB-Codes beim Bearbeiten unserer Beiträge anzuwenden. Diese BB-Codes sind eine Vereinfachung von html und werden auch in html-Codes umgewandelt. Welche Formatierungsmöglichkeiten es gibt erfahren sie hier.

Struktur von BB-Codes
BB-Codes starten immer mit einem "Anfangs-Tag" und enden mit einem "End-Tag".
Möchten wir beispielsweise ein Wort unterstreichen benötigt man folgenden "Anfangs-Tag":
Code
[u]
Danach folgt der gewünschte Text.
Code
[u]So einfach gehts!
Und nun schließen wir den BB-Code mit folgendem "End-Tag":
Code
[u]So einfach gehts![/u]

Ergebnis:

So einfach gehts!

[close]


Grundlagen

Schriftstil
Fett

Code: normaler BB-Code
[b]Fett[/b]
Code: HTML-Code
<b>Fett</b>
Tastenkürzel
         
Symbol
(Strg+b)


Schräg

Code: normaler BB-Code
[i]Schräg[/i]
Code: HTML-Code
<i>Schräg</i>
Tastenkürzel
         
Symbol
(Strg+I)


Unterstrichen

Code: normaler BB-Code
[u]Unterstrichen[/u]
Code: HTML-Code
<u>Unterstrichen</u>
Tastenkürzel
         
Symbol
(Strg+u)


Durchgestrichen

Code: normaler BB-Code
[s]Durchgestrichen[/s]
Code: HTML-Code
<s>Durchgestrichen</s>
Symbol


Glühen

Code: normaler BB-Code
[glow=red,2,300]Glühen[/glow]
Symbol

Anmerkung
Element
Mögliche Werte
Was wird verändert?



glow=red,2,300black
red
yellow
pink
green
orange
purple
blue
beige
brown
teal
navy
maroon
limegreen
white
darkred
Sienna
DarkOliveGreen
DarkGreen
DarkSlateBlue
DarkSlateGray
DarkOrange
Olive
SlateGray
DimGray
SandyBrown
YellowGreen
MediumTurquoise
Magenta
Lime
Cyan
DeepSkyBlue
DarkOrchid
Silver
Wheat
LemonChiffon
PaleGreen
PaleTurquoise
LightBlue
Plum

RGB-Farben
(Wird noch bearbeitet)
Die Farbe
glow=red,2,300Von 0 bis 299Funktion unbekannt
glow=red,2,300---Funktion unbekannt
[close]


Schatten

Code: normaler BB-Code
[shadow=red,left]Schatten[/shadow]
Symbol

Anmerkung
Element
Mögliche Werte
Was wird verändert?



shadow=red,rightright
left
Ausrichtung des Schattens
(Links/Rechts)
shadow=red,leftblack
red
yellow
pink
green
orange
purple
blue
beige
brown
teal
navy
maroon
limegreen
white
darkred
Sienna
DarkOliveGreen
DarkGreen
DarkSlateBlue
DarkSlateGray
DarkOrange
Olive
SlateGray
DimGray
SandyBrown
YellowGreen
MediumTurquoise
Magenta
Lime
Cyan
DeepSkyBlue
DarkOrchid
Silver
Wheat
LemonChiffon
PaleGreen
PaleTurquoise
LightBlue
Plum

RGB-Farben
(Wird noch bearbeitet)

Farbe des Schattens
[close]


Hochgestellt(Normaler Text)

Code: normaler BB-Code
[sup]Hochgestellt[/sup]
Symbol

Tiefgestellt(Normaler Text)

Code: normaler BB-Code
[sub]Tiefgestellt[/sub]
Symbol


Schreibmaschine

Code: normaler BB-Code
[tt]Durchgestrichen[/tt]
Symbol
[close]
Ausrichtung

Vorformatierter Text

Code: normaler BB-Code
[pre]Vorformatierter Text[/pre]
Symbol

Linksbündig
Code: normaler
 BB-Code
[left]Linksbündig[/left]
Symbol

Zentriert
Code: normaler BB-Code
[center]Zentriert[/center]
Symbol

Rechtsbündig
Code: normaler BB-Code
[right]Rechtsbündig[/right]
Symbol
[close]
Links
Normaler Querverweis


Code: normaler BB-Code
[url]https://www.fsegames.eu/forum/index.php?topic=24967.0[/url]
Code: ohne BB-Code
https://www.fsegames.eu/forum/index.php?topic=24967.0
Symbol


Querverweis mit Linktext


Code: normaler BB-Code
[url=https://www.fsegames.eu/forum/index.php?topic=24967.0]Deutsches Bannerpack[/url]
Code: HTML-Code
<a href="https://www.fsegames.eu/forum/index.php?topic=24967.0">Deutsches Bannerpack</a>
Symbol
[close]
Bilder

Code: normaler BB-Code
[img]https://www.fsegames.eu/images/media/fse.png[/img]
Code: HTML-Code
<img src="https://www.fsegames.eu/images/media/fse.png">
Symbol


Bild mit angepasster Bildbreite


Code
[img width=200]https://www.fsegames.eu/images/media/fse.png[/img]

Zur Anpassung der Breite muss diese Zahl verändert werden: width=200
Die Bildhöhe verhält sich direkt proportional zur Bildbreite.


Bild mit angepasster Bildhöhe


Code
[img height=50]https://www.fsegames.eu/images/media/fse.png[/img]

Zur Anpassung der Höhe muss diese Zahl verändert werden: height=50
Die Bildbreite verhält sich direkt proportional zur Bildhöhe.


Bild mit angepasster Bildbreite und Bildhöhe


Code
[img width=300 height=50]https://www.fsegames.eu/images/media/fse.png[/img]

Zur Anpassung der Breite muss diese Zahl verändert werden: width=300
Zur Anpassung der Höhe muss diese Zahl verändert werden: height=50


Bilder mit alternativem Text (Falls das Bild gelöscht wurde)

Hier sollte eigentlich ein Bild sein.

Code: HTML-Code
<img src="http://www.Bildnichtmehrvorhanden.oderdefekt.png" alt="Hier sollte eigentlich ein Bild sein.">

[close]
Schriftart, Schriftgröße, Schriftfarbe

Schriftart

Code: normaler BB-Code
[font=courier]Schriftart[/font]
Symbol

Anmerkung
Element
Mögliche Werte
Was wird verändert?



font=couriercourier
arial
arial black
impact
verdana
times new roman
georgia
andale mono
trebuchet ms
comic sans ms
Die Schriftart
[close]


Schriftgröße(18pt) Schriftgröße(14pt)

Code: normaler BB-Code
[size=18pt]Schriftgröße[/size]
Symbol

Anmerkung
Element
Mögliche Werte
Was wird verändert?



size=18ptVon 1pt bis 99pt
Die Schriftgröße
[close]


Schriftfarbe

Code: normaler BB-Code
[color=red]Schriftfarbe[/color]
Symbol

Anmerkung
Element
Mögliche Werte
Was wird verändert?



color=redblack
red
yellow
pink
green
orange
purple
blue
beige
brown
teal
navy
maroon
limegreen
white
darkred
Sienna
DarkOliveGreen
DarkGreen
DarkSlateBlue
DarkSlateGray
DarkOrange
Olive
SlateGray
DimGray
SandyBrown
YellowGreen
MediumTurquoise
Magenta
Lime
Cyan
DeepSkyBlue
DarkOrchid
Silver
Wheat
LemonChiffon
PaleGreen
PaleTurquoise
LightBlue
Plum

RGB-Farben
(Wird noch bearbeitet)

Die Schriftfarbe
[close]

[close]
Tabellen
Tabellen (Anleitung)

Schritt1
Mit dem Grundelement table wird eine neue Tabelle definiert. (table= Tabelle)
Code
[table]
[/table]


Schritt2
Jede Tabelle wird nun in einzelne Zeilen unterteilt. Diese Unterteilung wird mit dem tr-Tag realisiert. (tr= table row; Tabellenzeile)
Code
[table]
[tr]     [/tr]
[tr]     [/tr]
[/table]


Schritt3
Nun kann jede Zeile mit einzelnen Zellen gefüllt werden, welches mittels dem td-Tag realisiert wird. Die einzelnen Zellen nebeneinander in einer Zeile bilden die Spalten der Tabelle. (td= table data; Daten/Inhalt der Tabelle)
Code
[table]
[tr][td]Zeile 1; Spalte 1[/td][td]Zeile 1; Spalte 2[/td][/tr]
[tr][td]Zeile 2; Spalte 1[/td][td]Zeile 2; Spalte 2[/td][/tr]
[/table]


Ergebnis:

Zeile 1; Spalte 1     Zeile 1; Spalte 2
Zeile 2; Spalte 1     Zeile 2; Spalte 2

Symbol


Tabellen (weitere Beispiele)

Zeile 1; Spalte 1         Zeile 1; Spalte 2        Zeile 1; Spalte 3       
Zeile 2; Spalte 1Zeile 2; Spalte 2Zeile 2; Spalte 3
Zeile 3; Spalte 1Zeile 3; Spalte 2Zeile 3; Spalte 3

Code: Normaler BB-Code
[table]
[tr][td]Zeile 1; Spalte 1[/td][td]Zeile 1; Spalte 2[/td][td]Zeile 1; Spalte 3[/td][/tr]
[tr][td]Zeile 2; Spalte 1[/td][td]Zeile 2; Spalte 2[/td][td]Zeile 2; Spalte 3[/td][/tr]
[tr][td]Zeile 3; Spalte 1[/td][td]Zeile 3; Spalte 2[/td][td]Zeile 3; Spalte 3[/td][/tr]
[/table]
[close]
Listen
Unsortierte Liste (Kreis)

  • Oben
  • Mitte
  • Unten

Code: Normaler BB-Code
[list]
[li]Oben[/li]
[li]Mitte[/li]
[li]Unten[/li]
[/list]

Code: Normaler BB-Code
[list type=disc]
[li]Oben[/li]
[li]Mitte[/li]
[li]Unten[/li]
[/list]

Code: Ohne schließendem-Tag
[*]Oben
[*]Mitte
[*]Unten

Symbol


Unsortierte Liste (Ring)

  • Oben
  • Mitte
  • Unten

Code: Normaler BB-Code
[list type=circle]
[li]Oben[/li]
[li]Mitte[/li]
[li]Unten[/li]
[/list]

Unsortierte Liste (Quadrat)

  • Oben
  • Mitte
  • Unten

Code: Normaler BB-Code
[list type=square]
[li]Oben[/li]
[li]Mitte[/li]
[li]Unten[/li]
[/list]


Sortierte Liste (Aufzählung)

  • Oben
  • Mitte
  • Unten


Code: Normaler BB-Code
[list type=decimal]
[li]Oben[/li]
[li]Mitte[/li]
[li]Unten[/li]
[/list]

Symbol
[close]
Horizontale Linie

Horizontale Linie



Code: normaler BB-Code
[hr]
Code: html-Code
<hr />
Symbol
[close]
Spoiler
Normaler Spoiler

Spoiler
[close]
Code
[spoiler][/spoiler]
Symbol


Spoiler mit Beschreibung

Beschreibung
[close]
Code
[spoiler=Beschreibung][/spoiler]
[close]
code
Code

Code

Code
[code][ /code]
*Bitte das Leerzeichen vor den Zeichen "/code]" entfernen
Symbol
[close]
Zitate
Zitat

Quote
Hier steht ein Zitat.

Code
[quote]Hier steht ein Zitat.[/quote]
Symbol


Zitat (Name)

Quote from: NAME
Hier steht ein Zitat.

Code
[quote author=NAME]Hier steht ein Zitat.[/quote]
Symbol
Anmerkung
Element
Was wird verändert?



quote author=NAMEName des Erstellers
[close]


Zitat (mit Name, Link, Datum)

Hier steht ein Zitat.
Code: normaler BB-Code
[quote author=NAME link=topic=33506.msg1444453#msg1444453 date=942315071]Hier steht ein Zitat.[/quote]
Symbol

Anmerkung
Element
Was wird verändert?



quote author=NAME link=topic=33506.msg1444453#msg1444453 date=942315071Name des Erstellers
quote author=NAME link=topic=33506.msg1444453#msg1444453 date=942315071Forumverweis des Beitrags
quote author=NAME link=topic=33506.msg1444453#msg1444453 date=942315071Datum im Unix-Timestamp format
Unix Timestamp Rechner [www.pagerenk.de]
[close]
[close]
E-Mail-Adresse
E-Mail-Adresse

Beispiel@email.de

Code
[email]Beispiel@email.de[/email]
Symbol

[close]
FTP-Link
FTP-Link

ftp://ftp.rz.uni-wuerzburg.de

Code
[ftp=ftp://Hier FTP-Link einfügen]Hier FTP-Link einfügen[/ftp]
Symbol

[close]
Soundcloud
Soundcloud (Einzelstück)


Code
[soundcloud]https://soundcloud.com/jonas-auerswald/preusischer-und-osterreichischer-schlachtruf-5[/soundcloud]
Symbol


Soundcloud (Playlist)


Code
[cloudset]https://soundcloud.com/jonas-auerswald/sets/preussische-und-sterreichische[/cloudset]
Symbol
[close]
Emoticons
Emoticons

:)
Code
:)

;)
Code
;)

:D
Code
:D

;D
Code
;D

>:(
Code
>:(

:(
Code
:(

:o
Code
:o

8)
Code
8)

???
Code
???

::)
Code
::)

:P
Code
:P

:-[
Code
:-[

:-X
Code
:-X

:-\
Code
:-\

:-*
Code
:-*

:'(
Code
 :'(
[close]


Tipps

YouTube-Videos einfügen
YouTube


Code: Normaler BB-Code
https://www.youtube.com/watch?v=nX4N_G9dwuo
[close]
Bilder verlinken

Code: normaler BB-Code
[url=https://www.fsegames.eu/forum/index.php?topic=24967.0][img]https://www.fsegames.eu/images/media/fse.png[/img][/url]
Symbole
[close]
Listen mittig anordnen
Listen werden immer links angeordnet und können nicht zentriert werden. Erstellt man eine Liste innerhalb einer Tabelle lässt sich die Tabelle und damit auch die Liste mittig anordnen.

  • Oben
  • Mitte
  • Unten

Code
[center][table][tr]
[td][list]
[li]Oben[/li]
[li]Mitte[/li]
[li]Unten[/li]
[/list][/td]
[/tr][/table][/center]
[close]
Absätze einfügen
Absätze einfügen

Absätze lassen sich nur schwer visulisieren.
Hier also viel nichts:












Code: html-Code
<br />
*Natürlich lässt sich ein Absatz auch mit der Enter-Taste ohne diesen Code einfügen.
[close]
Text einrücken
Text einrücken

Normaler Text
    Text einrücken

      Text einrücken

        usw...

Code
normaler text
[list]
Text einrücken
[list]
Text einrücken
[list]
usw...
[/list][/list][/list]
[close]
Vertikale Linie (einfach)

Normale Zeilenhöhe


Code
[img]https://www.fsegames.eu/forum/Themes/Battle%20Cry%20of%20Freedom/images/bbc/divider.gif[/img]

Angepasste Höhe


Code
[img width=2 height=50]https://www.fsegames.eu/forum/Themes/Battle%20Cry%20of%20Freedom/images/bbc/divider.gif[/img]

Um die Höhe anzupassen muss man die rot markierte Zahl anpassen: height=50
[close]
Vertikale und Horizontale Linien mit verschiedenen Farben. (In Bearbeitung)
[close]
php-Code anzeigen lassen
$myvar 'Hallo Welt!';
for (
$i 0$i 10$i++)
{
    echo 
$myvar "\n";

#Kommentar


Code
[php]
$myvar = 'Hallo Welt!';
for ($i = 0; $i < 10; $i++)
{
    echo $myvar . "\n";
}
#Kommentar
[/php]
[close]
« Last Edit: October 06, 2018, 11:20:06 pm by Warband4Ever »

Offline Warband4Ever

  • Major
  • *
  • Posts: 169
  • Tapfer und treu zum Schutze der Krone
    • View Profile
    • Kaiserliches Heer
  • Nick: kk_Ins_Bat_Inf_Bat_Ins_kk
  • Side: Neutral
Re: BB-Codes
« Reply #1 on: September 24, 2016, 01:52:01 pm »
Neuigkeiten

~Soundcloud hinzugefügt~ [2018/10/06]
~diverse Symbole hinzugefügt~ [2016/09/30]
~Zitate hinzugefügt~ [2016/09/30]
~Abspeichern von Beiträgen entfernt~ [2016/09/30]
~Emoticons hinzugefügt~ [2016/09/24]
~Anleitung für die Erstellung von Tabellen hinzugefügt~ [2016/09/24]

In Bearbeitung

*"Vertikale und Horizontale Linien mit verschiedenen Farben" hinzufügen
*RGB-Farben hinzufügen


Querverweise

Forenregeln [Deutsch]
Forum Rules [Englisch]
BB Code Help [Englisch]
Deutsche NW Regimenter Liste [Deutsch]
Unterstützende Regimentsarbeit [Deutsch]
M&B Serveranbieter [Englisch]
« Last Edit: October 06, 2018, 11:16:10 pm by Warband4Ever »

Offline Animalorian

  • Captain
  • *
  • Posts: 1243
  • Die Fehde der Romanovs und Regimentshilfe
    • View Profile
    • Homepage der Preobrazhensky Leib-Garde
  • Side: Neutral
Re: BB-Code
« Reply #2 on: September 24, 2016, 08:11:20 pm »
Schöne Sache gut für jeden Forum Nutzer!
Hoffentlich führt das zu besser ausschauenden Threads.

Offline Ngolo

  • Volunteer
  • *
  • Posts: 10
    • View Profile
  • Side: Neutral
Re: BB-Code
« Reply #3 on: December 31, 2016, 03:16:47 pm »
BBcode, pff, zu einfach, html css für Profis