BBCodes zum Einbau mit Beschreibungen für das Forensystem phpBB3

Beitrag 1288 von UFO-Peter » 26.03.2009, 21:25

BBCodes zum Einbau mit Beschreibungen für das Forensystem phpBB3

Nachfolgende BBCodes sind zum Teil weitreichend, und ich habe sie auch (fast) alle getestet. Dabei habe ich diese möglichst in deutscher Sprache gemacht. Leider konnte ich aber die bereits vorhandenen System-BBCodes nicht eindeutschen.

Damit es aber auch möglich ist, dass, wenn man Texte aus anderen Foren einfügt, diese funktionieren, sollte man auch die jeweiligen englischen Versionen ins Forum aufnehmen. Ggf. braucht man diese aber nicht im Postformular anzeigen zu lassen.

Damit man ggf. mehr als nur 104 BBCodes abspeichern kann, Siehe dazu diesen Beitrag: Klick! Man braucht also nur in der Datenbank mit PHP-MyAdmin unter SQL entweder nachfolgenden Befehl ausführen, falls man bei der Installation die Vorgabe für das Präfix 'phpbb' so gelassen hatte:

Code: Alles auswählen
ALTER TABLE `phpbb_bbcodes` CHANGE `bbcode_id` `bbcode_id` SMALLINT( 3 ) NOT NULL DEFAULT '0'

Oder mit PHP-MyAdmin in der Tabelle phpbb_bbcodes in der Tabellenspalte bbcode_id den Typ TINIYNT in SMALLINT ändern! Und vorher natürlich auch nicht das Datenbank-Backup unter >Admin-Bereich - Wartung - Backup< vergessen zu machen! Um letztes herauszufinden, hatte ich mich übrigens auch hier (unter der 5. Tabelle) informiert.

Der Text für die Tipp-Anzeige erklärt jeweils nicht nur die Anwendung, sondern es sollte auch schon möglichst aus den BBCode-Namen einigermaßen zu erkennen sein, für welchen Zweck diese jeweils sind.

Einfache gerade Apostrophs ' (Hochkomma) dürfen nicht vorkommen, sonst wird der Tooltipp nicht angezeigt. Gegebenenfalls das doppelte Anführungszeichen " verwenden!

Leider haben alle BBCodes technisch einen öffnenden und einen schließenden Tag, wie bspw. [linie][/linie]; auch dann, wie in diesem Fall, gar kein markiertes Objekt (Text und/oder Grafik) vorhanden ist, der von diesen beiden Tags umschlossen werden muss; und stattdessen diese beiden Tags, so wie sie hier sind, nur an beliebiger Textposition eingefügt werden.

Grundsätzlich gilt, dass hinter jedem Gleichheitszeichen = genau eine Angabe gemacht werden muss. Ggf. kann diese Angabe sogar Null 0 sein, wie beim BBCode, der eine Grafik zu einem schwebendem Objekt macht, damit diese von Text umflossen werden kann; und/oder in dem Fall, dass es ein Textobjekt ist, schmaler gemacht werden kann.

Falls kein Gleichheitszeichen im BBCode ist, kann es sein, dass ein oder mehrere Angaben, jeweils mit einer Leerstelle voneinander getrennt, zwischen die beiden BBCode-Tags gemacht werden müssen. Oder dass statt dessen ein Objekt (Text und/oder Grafik) zu markieren ist, bevor man oben auf den entsprechenden BBCode-Link klickt. Oder keines von beiden Möglichkeiten.

Beginnt die Bezeichnung eines BBCodes mit i- (wie individuell), bedeutet das, dass dieser eine erweiterte Version ist, der gegenüber einem anderen Standard-BBCode, eine oder mehrere zusätzliche Angaben erfordert, damit dieser somit individuell ausgeführt wird.

Sämtliche BBCodes dieser Webseite Klick! sind hier enthalten. Manche von diesen habe ich sogar im Funktionsumfang verbessert und in deren Bezeichnung abgeändert, bzw. jeweils für die deutsche Sprache erweitert.

Aber die zahlreichen BBCodes dieses Testforums Klick! sind hier leider noch nicht berücksichtigt. Vielleicht werde ich mich diesen noch widmen und hier bekannt geben mit entsprechenden Anleitungen. Ich finde es sehr seltsam, dass ich in diesem Testboard die dort verwendeten BBCodes nicht finden kann.

I.d.R. kann man diese BBCodes auch jeweils kombiniert, bzw. ineinander verschachtelt, anwenden. Auch wenn zwischen zwei BBCode-Tags {TEXT} geschrieben steht, so kann man i.d.R. auch Grafik-Objekte von diesen verarbeiten.

Code: Alles auswählen
Text oder Grafik zentrieren: [mitte]Text-oder-Grafik[/mitte]

[mitte]{TEXT}[/mitte]
[center]{TEXT}[/center]

<div align="center">{TEXT}</div>
<div style="text-align:center">{TEXT}</div>

Damit dieser BBCode auch wirksam ist, falls ein englischsprachig benannter BBCode in einem Text vorhanden ist, am besten diesen auch komplett mit [center]{TEXT}[/center] im >Administrationsbereich - Beiträge< hinzufügen! Alle Überschriften hier sind als Tipp-Anzeige vollständig genau so anzugeben, damit jeder Benutzer weiß, wie diese jeweils anzuwenden sind.

Code: Alles auswählen
Text oder Grafik rechtsbündig: [rechts]Text oder Grafik[/rechts]

[rechts]{TEXT}[/rechts]
[right]{TEXT}[/right]

<div align="right">{TEXT}</div>
<div style="text-align:right">{TEXT}</div>

Code: Alles auswählen
Text durchgestrichen: [d]Text[/d]

[d]{TEXT}[/d]
[s]{TEXT}[/s]
[strike]{TEXT}[/strike]

<strike>{TEXT}</strike> oder mit CSS:
<span style="text-decoration:line-through">{TEXT}</span>

Code: Alles auswählen
Text verstecken mit Textlink: [versteckt]Text[/versteckt]

[versteckt]{TEXT}[/versteckt]
[spoiler]{TEXT}[/spoiler]

<dl class="codebox"><dt>Versteckt:<a href="javascript:void(0);" onClick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = 'hide'; } else { spoiler.style.display = 'none'; this.innerHTML = 'show'; };">Versteckten Text anzeigen</a></dt><dd style="display:none">{TEXT}</dd></dl>

Code: Alles auswählen
Text verstecken mit Button: [hide]Text[/hide]

[hide]{TEXT}[/hide]

<input value="Show" style="width:45px; font-size:1em" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'} else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'}" type="button"><div><div style="display:none;">{TEXT}</div></div>

Code: Alles auswählen
Forensuche: [such]Suchbegriffe[/such]

[such]{TEXT}[/such]
[search]{TEXT}[/search]

<a href="./search.php?keywords={TEXT}&terms=all&author=&sc=1&sf=all&sr=posts&sk=t&sd=d&st=0&ch=1000&t=0"><span style="color:#008000; text-decoration:underline">{TEXT}</span></a>

Code: Alles auswählen
Amazon-Link: [amazon]Produkt-Nummer[/amazon]

[amazon]{NUMBER}[/amazon]

<!--[if IE 7]><a href="http://www.amazon.de/gp/product/{TEXT}?ie=UTF8&amp;tag=PARTNER-ID&amp;linkCode=as2&amp;camp=1638&amp;creative=6742&amp;creativeASIN={TEXT}"><img src="http://images-eu.amazon.com/images/P/{TEXT}.03.MZZZZZZZ.jpg" style="border:none" /></a><img src="http://www.assoc-amazon.de/e/ir?t=PARTNER-ID&amp;l=as2&amp;o=3&amp;a={TEXT}" width="1" height="1" alt="" style="border:none !important; margin:0px !important;" /><br /><a href="http://www.amazon.de/gp/product/{TEXT}?ie=UTF8&tag=PARTNER-ID&linkCode=as2&camp=1638&creative=6742&creativeASIN={TEXT}">Amazon-Link</a><noscript><img src="http://www.assoc-amazon.de/s/noscript?tag=PARTNER-ID" alt="" /></noscript><![endif]-->
<!--[if lt IE 7]><object data="http://rcm-de.amazon.de/e/cm?t=PARTNER-ID&amp;o=3&amp;p=8&amp;l=as1&amp;asins={TEXT}&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr&amp;nou=1" style="width:120px; height:240px;" type="text/x-scriptlet"></object><![endif]-->
<!--[if !IE]>-->
<object data="http://rcm-de.amazon.de/e/cm?t=PARTNER-ID&amp;o=3&amp;p=8&amp;l=as1&amp;asins={TEXT}&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr&amp;nou=1" style="width:120px; height:240px;" type="text/xml"></object><!--<![endif]-->



Code: Alles auswählen
Blinkender Text [blink]Text[/blink] Funktioniert nicht bei jedem Browser

[blink]{TEXT}[/blink]

<BLINK>{TEXT}</BLINK>

Die Standardrichtung ist das Laufen des Textes nach links. Bspw. extrem lange Zeilen bekommt man so in einer Zeile effektvoll unter. Würde diese aber nach rechts laufen, müsste man diese rückwärts lesen, was natürlich nicht sinnvoll wäre. Nachfolgender Effekt funktioniert möglicherweise nicht beim Internet Explorer, aber beim FireFox.

Code: Alles auswählen
Laufschrift nach links: [lauf-l]Text[/lauf-l]

[lauf-l]{TEXT}[/lauf-l]
[lauf]{TEXT}[/lauf]
[run]{TEXT}[/run]

<marquee direction="left">{TEXT}</marquee>

Code: Alles auswählen
Laufschrift nach rechts: [lauf-r]Text[/lauf-r]

[lauf-r]{TEXT}[/lauf-r]

<marquee direction="right">{TEXT}</marquee>

Code: Alles auswählen
Laufschrift hin und her: [lauf-h]Text[/lauf-h]

[lauf-h]{TEXT}[/lauf-h]

<marquee behavior="alternate">{TEXT}</marquee>

Code: Alles auswählen
Laufschrift aufwärts: [lauf-auf]Text[/lauf-auf]

[lauf-auf]{TEXT}[/lauf-auf]
[run-up]{TEXT}[/run-up]

<marquee direction="up" height=50px scrollamount=2>{TEXT}</marquee>

Code: Alles auswählen
Laufschrift abwärts: [lauf-ab]Text[/lauf-ab]

[lauf-ab]{TEXT}[/lauf-ab]
[run-down]{TEXT}[/run-down]

<marquee direction="down" height=50px scrollamount=2>{TEXT}</marquee>

Code: Alles auswählen
Hintergrundfarbe: [hgfarbe={COLOR}]Text[/hgfarbe]

[hgfarbe={COLOR}]{TEXT}[/hgfarbe]
[bgcolor={COLOR}]{TEXT}[/bgcolor]

<span style="background-color:{COLOR}">{TEXT}</span>

Code: Alles auswählen
Schriftart: [schrift=Schriftart]Text[/schrift]

[schrift={SIMPLETEXT}]{TEXT}[/schrift]
[font={SIMPLETEXT}]{TEXT}[/font]

<span style="font-family:{SIMPLETEXT}">{TEXT}</span>

Code: Alles auswählen
Horizontale Standardlinie über die ganze Breite (grau und 3px dick)

[linie][/linie]
[line][/line]

<hr style="color:gray; height:3px">

Bei nachfolgender individuell konfigurierbaren Linie über die gesamte Breite gibt man hinter dem = die Farbe an, bspw. green (grün) oder #0B3960 (grünliches dunkelblau). Zwischen den beiden BBCode-Tags gibt man die Liniendicke bzw. -höhe an in px (Pixel). Aber nur den Zahlenwert (also ohne px oder Pixel) angeben!

Ich empfehle übrigens den Color Cop, die Farbtabelle des Postformulars (Selbstverständlich müsste man nach der Einfügung durch den Farb-BBCode nur die dadurch eingefügte Farbangabe nutzen) oder diverse Farbtabellen im Web.

Code: Alles auswählen
Einstellbare horizontale Linie über die ganze Breite: [linie=Linienfarbe]Liniendicke in px[linie] px nicht mitschreiben

[linie={COLOR}]{NUMBER}[/linie]

<hr style="color:{COLOR}; background:{COLOR}; height:{NUMBER}px">

Bei nachfolgendem 3 BBCodes für individuell konfigurierbare Linien wo man zudem die Linienlänge in Prozent angeben kann, gibt man hinter dem = die Farbe an. Zwischen den beiden BBCode-Tags gibt man zuerst (links) die Liniendicke bzw. -höhe an in px. Dann eine Leerstelle und dann die Angabe der Linienlänge in % (Prozent). Aber nur den Zahlenwert (also ohne px, %, Pixel oder Prozent) angeben! Der Platzhalter {SIMPLETEXT} findet hier deswegen Verwendung, weil dadurch auch bspw. ein halber Prozent 0.5 einstellbar ist, um eine senkrechte Linie erzeugen zu können.

Code: Alles auswählen
Zentrisch ausgerichtete horizontale Linie (mittig): [linie-m=Linienfarbe]Liniendicke in px Linienlänge in %[/linie-m] Eine Leerstelle zwischen Liniendicke und Linienlänge, px und % nicht mitschreiben

[linie-m={COLOR}]{NUMBER} {SIMPLETEXT}[/linie-m]

<hr style="color:{COLOR}; background:{COLOR}; height:{NUMBER}px; width:{SIMPLETEXT}%">

Code: Alles auswählen
Links ausgerichtete horizontale Linie: [linie-l=Linienfarbe]Liniendicke in px Linienlänge in %[/linie-l] Eine Leerstelle zwischen Liniendicke und Linienlänge, px und % nicht mitschreiben! Für vertikale Linie bspw. 0.5 für Linienlänge angeben!

[linie-l={COLOR}]{NUMBER} {SIMPLETEXT}[/linie-l]

<div align="left"><hr style="color:{COLOR}; background:{COLOR}; height:{NUMBER}px; width:{SIMPLETEXT}%"></div>

Code: Alles auswählen
Rechts ausgerichtete horizontale Linie (mittig): [linie-r=Linienfarbe]Liniendicke in px Linienlänge in %[/linie-r] Eine Leerstelle zwischen Liniendicke und Linienlänge, px und % nicht mitschreiben

[linie-r={COLOR}]{NUMBER} {SIMPLETEXT}[/linie-r]

<div align="right"><hr style="color:{COLOR}; background:{COLOR}; height:{NUMBER}px; width:{SIMPLETEXT}%"></div>


rl – Graue vertikale (senkrechte) Standardrahmenlinie links mit Liniendicke und Abstand zum Text oder Grafik von 3 px. Wenn man bspw. E-Mails veröffentlicht, die Zitate enthalten, die jeweils links durch eine vertikale (senkrechte) Linie als solche gekennzeichnet sind, sind nachfolgende zwei BBCodes geeignet.

Code: Alles auswählen
[rl]{TEXT}[/rl]

<div style="border-color:gray; width:0; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:3px; border-style:solid; padding-left:3px">{TEXT}</div>

Graue vertikale (senkrechte) Standardrahmenlinie links mit Liniendicke und Abstand zum Text oder Grafik von 3 px: [rl]Text[/rl]


rl= – Individuell einstellbare vertikale (senkrechte) Rahmenlinie links

Code: Alles auswählen
[rl={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/rl]

<table border="0"><tr><td><div style="border-color:{COLOR}; background-color:{COLOR1}; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:{NUMBER}px; border-style:{IDENTIFIER}; padding:{NUMBER1}px">{TEXT}</div></td></tr></table>

Individuelle vertikale (senkrechte) Rahmenlinie links: [rl=Rahmenfarbe Hintergrundfarbe Rahmendicke Innenrand Rahmenstyle]Text[/rl] Leerstellen zwischen den Angaben! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset


rr - Die Standard-Rahmenlinie erscheint rechts vom Text oder anderem Objekt.

Code: Alles auswählen
[rr]{TEXT}[/rr]

<table border="0"><tr><td><div style="border-color:gray; border-top-width:0; border-right-width:3px; border-bottom-width:0; border-left-width:0; border-style:solid; padding-right:3px">{TEXT}</div></td></tr></table>

Graue vertikale (senkrechte) Standardrahmenlinie rechts mit Liniendicke und Abstand zum Text oder Grafik von 3 px: [rr]Text[/rr]


rr= - Die einstellbare Rahmenlinie erscheint rechts vom Text oder anderem Objekt.

Code: Alles auswählen
[rr={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/rr]

<table border="0"><tr><td><div style="border-color:{COLOR}; background-color:{COLOR1}; border-top-width:0; border-right-width:{NUMBER}px; border-bottom-width:0; border-left-width:0; border-style:{IDENTIFIER}; padding:{NUMBER1}px">{TEXT}</div></td></tr></table>

Individuelle vertikale (senkrechte) Rahmenlinie rechts: [rr=Rahmenfarbe Hintergrundfarbe Rahmendicke Innenrand Rahmenstyle]Text[/rr] Leerstellen zwischen den Angaben! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset


Nachfolgend ein Rahmen mit sehr vielen Einstellungsmöglichkeiten; nämlich Rahmenfarbe, Hintergrundfarbe, Rahmendicke-oben, Rahmendicke-rechts Rahmendicke-unten, Rahmendicke-links Innenrand und Rahmenstyle. Wenn man 0 (Nulle) angibt für eine Rahmenseite, ist diese nicht vorhanden.

Code: Alles auswählen
[ri={COLOR} {COLOR1} {NUMBER} {NUMBER0} {NUMBER1} {NUMBER2} {NUMBER3} {IDENTIFIER}]{TEXT}[/ri]

<div style="border-color:{COLOR}; background-color:{COLOR1}; width:0; border-top-width:{NUMBER}; border-right-width:{NUMBER0}; border-bottom-width:{NUMBER1}; border-left-width:{NUMBER2}px; border-style:{IDENTIFIER}; padding:{NUMBER3}px">{TEXT}</div>

Individueller Rahmen: [ri=Rahmenfarbe Hintergrundfarbe Rahmendicke-oben rechts unten links Innenrand Rahmenstyle]Text[/ri] Leerstellen zwischen den Angaben! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset


Wenn man bspw. E-Mails veröffentlicht, die Zitate enthalten, die jeweils links durch eine vertikale (senkrechte) Linie als solche gekennzeichnet sind, sind nachfolgende zwei BBCodes geeignet.

Code: Alles auswählen
[rl]{TEXT}[/rl]

<div style="border-color:gray; width:0; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:3px; border-style:solid; padding-left:3px">{TEXT}</div>

Graue vertikale (senkrechte) Standardrahmenlinie links mit Liniendicke und Abstand zum Text oder Grafik von 3 px: [rl]Text[/rl]


Code: Alles auswählen
[rl={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/rl]

<div style="border-color:{COLOR}; background-color:{COLOR1}; width:0; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:{NUMBER}px; border-style:{IDENTIFIER}; padding:{NUMBER1}px">{TEXT}</div>

Individuelle vertikale (senkrechte) Rahmenlinie links: [rl=Rahmenfarbe Hintergrundfarbe Rahmendicke Innenrand Rahmenstyle]Text[/rl] Leerstellen zwischen den Angaben! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset


Bei nachfolgenden zwei BBCodes erscheint die Rahmenlinie rechts vom Text.

Code: Alles auswählen
[rr]{TEXT}[/rr]

<table border="0"><tr><td><div style="border-color:gray; border-top-width:0; border-right-width:3px; border-bottom-width:0; border-left-width:0; border-style:solid; padding-right:3px">{TEXT}</div></td></tr></table>

Graue vertikale (senkrechte) Standardrahmenlinie rechts mit Liniendicke und Abstand zum Text oder Grafik von 3 px: [rr]Text[/rr]


Code: Alles auswählen
[rr={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/rr]

<table border="0"><tr><td><div style="border-color:{COLOR}; background-color:{COLOR1}; width:0; border-top-width:0; border-right-width:{NUMBER}px; border-bottom-width:0; border-left-width:0; border-style:{IDENTIFIER}; padding:{NUMBER1}px">{TEXT}</div></td></tr></table>

Individuelle vertikale (senkrechte) Rahmenlinie rechts: [rr=Rahmenfarbe Hintergrundfarbe Rahmendicke Innenrand Rahmenstyle]Text[/rr] Leerstellen zwischen den Angaben! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset


Code: Alles auswählen
Einzelne Tabellenzelle als Rahmen mit 0px Rahmendicke um Textfeld von BB-Code "Code" für Computercode zu kürzen: [rt0][code]Computer-Code[/code][/rt0] Dazu zuerst den Computercode mit BB-Code "Code" umschließen!

[rt0]{TEXT}[/rt0]

<table border="0"><tr><td>{TEXT}</td></tr></table>


Code: Alles auswählen
Einzelne Tabellenzelle als Rahmen mit 3px Rahmendicke: [rt3]Text[/rt3] Auch geeignet, um Textfeld von BB-Code "Code" für Computercode zu kürzen. Dazu ggf. zuerst den Computercode mit BB-Code "Code" umschließen!

[rt3]{TEXT}[/rt3]

<table border="3"><tr><td>{TEXT}</td></tr></table>


Code: Alles auswählen
Einzelne Tabellenzelle als Rahmen mit individueller Liniendicke: [rt=Rahmendicke in px]Text[/rt] px nicht mitschreiben! Auch geeignet, um Textfeld von BB-Code "Code" für Computercode zu kürzen. Dazu ggf. zuerst den PC-Code benutzen!

[rt={NUMBER}]{TEXT}[/rt]

<table border="{NUMBER}"><tr><td>{TEXT}</td></tr></table>


Und jetzt wird es interessant. Um zweispaltig zu schreiben markiere man etwa die erste Hälfte des Textes und benutze nachfolgenden BBCode! Der Text wird dadurch so schmal (48%), dass die linke Seite der Beitragsfläche von diesem ausgefüllt wird.

Code: Alles auswählen
Text zweispaltig schreiben - Linke Spalte (schwebend): [spalte-l]Text[/spalte-l]

[spalte-l]{TEXT}[/spalte-l]

<div style="float:left; width:48%">{TEXT}</div>

Dann markiere man die zweite Hälfte des Textes und benutze nachfolgenden BBCode! Dieser Text würde zwar auch ohne diesen zweiten BBCode rechts neben der ersten Spalte erscheinen; so ist aber sichergestellt, dass der Abstand zwischen beiden Blöcken ausreichend ist, auch wenn diese beiden BBCodes keine Randangaben enthalten. Und zum anderen, dass die rechte Textspalte exakt genauso breit ist wie die linke.

Diese Html-Ersetzung hat am Ende einen Code für das Ende das Umfließens von Text. Andernfalls würde nachfolgender Text im Freiraum der linken Spalte erscheinen, falls unter der linken Spalte ein Freiraum ist.

Code: Alles auswählen
Zweispaltigen Text schreiben - Rechte Spalte (schwebend): [spalte-r]Text[/spalte-r]

[spalte-r]{TEXT}[/spalte-r]

<div style="float:right; width:48%">{TEXT}</div><br style="clear: both" />

Nachfolgend die nichtvalide Version.

<div style="float:right; width:48%">{TEXT}</div><BR CLEAR=ALL>

Diese BBCodes bewirken, dass die erste Textspalte an den linken Rand ausgerichtet wird, und die zweite Textspalte an den rechten Rand positioniert wird, ohne dass diese beiden BBCodes über Html eine zusätzliche Randangabe haben. Natürlich ergibt sich automatisch zwischen beiden Text-Spalten aufgrund der vorhandenen Html-Angaben ein ausreichender Zwischenraum.

Insbesondere beim zweispaltigen Schreiben ist meines Erachtens Blocksatz vorteilhaft. Deswegen verwende am besten anstatt der vorigen beiden BBCodes diese nachfolgenden zwei!

Code: Alles auswählen
Zweispaltig und Block - linke Spalte: [spalte-lb]Text[/spalte-lb]

[spalte-lb]{TEXT}[/spalte-lb]

<div align="justify" style="float:left; width:48%">{TEXT}</div>

Code: Alles auswählen
Zweispaltig und Block - rechte Spalte: [spalte-rb]Text[/spalte-rb]

[spalte-rb]{TEXT}[/spalte-rb]

<div align="justify" style="float:right; width:48%">{TEXT}</div><br style="clear: both" />

Nachfolgend die nichtvalide Version.

<div align="justify" style="float:right; width:48%">{TEXT}</div><BR CLEAR=ALL>

Man kann auch Zweispaltigkeit mit Blocksatz als einen gemeinsamen BBCode machen, was für den Anwender viel einfacher anzuwenden ist. Drei Rautezeichen ### dienen dabei als Trennung. Diese Rautezeichen dürfen deswegen nicht in Folge in der linken Spalte sein.

Code: Alles auswählen
Zweispaltig und Blocksatz: [s2]Linke Spalte###Rechte Spalte[/s2]

[s2]{TEXT}###{TEXT1}[/s2]

<div style="text-align:justify; float:left; width:48%">{TEXT}</div><div style="text-align:justify; float:right; width:48%">{TEXT1}</div><br style="clear: both;" />

Die nicht valide Html-Ersetzung:

<div align="justify" style="float:left; width:48%">{TEXT}</div><div align="justify" style="float:right; width:48%">{TEXT1}</div><BR CLEAR=ALL>

Und nachfolgend ein BBCode für dreispaltigen Text und Blocksatz.

Code: Alles auswählen
Dreispaltig und Blocksatz: [s3]Linke Spalte###Mittlere Spalte###Rechte Spalte[/s3]

[s3]{TEXT}###{TEXT1}###{TEXT2}[/s3]

<div style="text-align:justify; float:left; width:32%; margin-right:2%">{TEXT}</div><div style="text-align:justify; float:left; width:32%; margin-right:2%">{TEXT1}</div><div style="text-align:justify; float:left; width:32%">{TEXT2}</div><br style="clear:both" />

Die nicht valide Html-Ersetzung:

<div align="justify" style="float:left; width:32%; margin-right:2%">{TEXT}</div><div align="justify" style="float:left; width:32%; margin-right:2%">{TEXT1}</div><div align="justify" style="float:left; width:32%">{TEXT2}</div><BR CLEAR=ALL>

Von Blocksatz wird zwar grundsätzlich abgeraten wegen der bei Html nicht vorhandenen Möglichkeit der automatischen Silbentrennung; wer aber trotzdem unbedingt Blocksatz bei nicht mehrspaltigem Text anwenden möchte, der benutze diesen BBCode! Dieser funktioniert natürlich auch bei mehrspaltigem Text, wenn dieser BBCode innerhalb der Verschachtelungshierarchie für jede Spalte einzeln verwendet wird.

Code: Alles auswählen
Blocksatz - Kein Flatterrand: [block]Text[/block]

[block]{TEXT}[/block]

<div align="justify">{TEXT}</div>

Diese vorigen 4 BBCodes (mit Ausnahme des letzten für Blocksatz, ich meine also, die vier davor) funktionieren zwar auch für Grafiken, sind aber nicht von mir dafür gedacht. Um die Html-Float-Funktion auch für andere Objekte (Texte und/oder Grafiken) anwenden zu können, habe ich speziell diesen BBCode kreiert, bei dem man einstellen kann, wie breit (in %) das Objekt sein soll.

Diese Angabe ist nämlich grundsätzlich bei solchen "schwebenden" Objekten unbedingt nötig; mit Ausnahme, wenn nur eine oder mehrer Grafiken betroffen sind, weil sich deren Breite aus sich selbst ergeben. Nur in diesem letzten Fall kann man 0 (Null) für die Breite in % angeben.

Man kann aber auch bei einer Grafik einen anderen Wert angeben, um das Objekt so künstlich zu verbreitern. Umfließender Text oder andere Grafiken würden dann ggf. einen größeren Abstand zu diesem schwebenden Objekt einhalten. Bei Text muss aber unbedingt eine angemessene Breitenangabe erfolgen.

So ein schwebendes Objekt bewirkt u.a., dass andere Objekte (Text und/oder Grafik) rechts oder links am schwebendem Objekt vorbeifließen; bzw. sich rechts oder links neben dieses setzen, falls jeweils genug Platz vorhanden ist.

Nachfolgende zwei BBCodes machen den vom BBCode eingeschlossenen Text nicht nur zum Absatz (wie alle anderen BBCodes für schwebende Objekte hier auch), sondern bei nachfolgenden zwei ist auch jeweils eine hier notwenige Angabe für den rechten bzw. linken Rand in px notwendig; vorbeifließender Text hätte nämlich sonst unter dem Objekt keinen ausreichenden Abstand.

Code: Alles auswählen
Linksschwebender Text oder Grafik: [float-l=Breite-in-% Rechter-Rand]Text oder Grafik[/float-l] Breite ohne % angeben! Nur bei Grafik Angabe 0 möglich. Angabe für rechten Rand in px. Eine Leerstelle zwischen beiden Angaben

[float-l={NUMBER} {NUMBER1}]{TEXT}[/float-l]

<div style="float:left; width:{NUMBER}%; margin-right:{NUMBER1}px">{TEXT}</div>

Code: Alles auswählen
Rechtsschwebender Text oder Grafik: [float-r=Breite-in-% Linker-Rand]Text oder Grafik[/float-r] Breite ohne % angeben! Nur bei Grafik Angabe 0 möglich. Angabe für linken Rand in px. Eine Leerstelle zwischen beiden Angaben

[float-r={NUMBER} {NUMBER1}]{TEXT}[/float-r]

<div style="float:right; width:{NUMBER}%; margin-left:{NUMBER1}px">{TEXT}</div>

Damit Flatterränder nicht zu extrem ausgeprägt sind, sollten möglichst zu lange 'Bandwurmwörter' vermieden werden. Siehe dazu diese Webseite: Klick! Sämtliche Lösungsvorschläge können mit nachfolgenden BBCodes entsprechend angewendet werden.

Das nachfolgende bedingte (weiche) Trennzeichen ist im Text unsichtbar. Sobald aber das Wort am Zeilenende ist, wird es ggf. umgebrochen, wodurch dieses Trennzeichen - dann automatisch erscheint. Ggf. könnte man einen Text mit einem Textverarbeitungsprogramm mit bedingten Trennstrichen in fast jedem Wort durchsetzen.

Das ginge bspw., indem man den Rand so extrem schmal macht, dass in jede Zeile nur jeweils ein bis zwei Zeichen passt. Mit der Funktion der manuellen Einfügung von bedingten Trennzeichen, würde das Textverarbeitungsprogramm (bspw. MS Word) bei jedem Wort, wo eine Trennmöglichkeit rechtschreiblich möglich ist, vorschlagen, dieses Wort dort zu trennen, wo man das jeweils einzeln mit der Enter-Taste bestätigen würde.

Der Trick dabei ist aber, dass man einfach nur die Return-Taste einige Zeit gedrückt zu halten bräuchte, um schon nach kurzer Zeit bei (fast) allen Wörtern (wo es jeweils möglich ist) solche bedingte Trennzeichen einzufügen. Danach müsste man alle diese Trennzeichen mit der automatisch arbeitenden Ersetzungsfunktion (unter Suchen) dieses Textverarbeitungsprogramms oder eines anderen Editors durch den BBCode für das bedingte Trennzeichen ersetzen.

Code: Alles auswählen
Bedingtes (weiches) Trennzeichen. Trennt automatisch Wörter am Zeilenende. Das Trennzeichen erscheint jeweils automatisch: [x][/x]

[x][/x]

&shy;

Dieser Text würde dann optimal am Zeilenende auch unter Html optimal umbrechen. Leider werden dadurch aber die Texte erheblich größer, weswegen man diesen BBCode ggf. (auch) mit einem möglichst kurzen Namen im Forum aufnehmen sollte.

Damit bspw. 'Windows 98' oder '17 °C' nicht inmitten des Ausdrucks am Zeilenende getrennt wird, kann man nachfolgende geschützte Leerstelle benutzen.

Code: Alles auswählen
Geschützte Leerstelle - Keine Trennung am Zeilenende und Erzwingen von mehreren Leerstellen in Folge: [l][/l], [l1][/l1] oder [gl][/gl]

[l][/l]
[l1][/l1]
[gl][/gl]

&nbsp;

oder (gleiche Wirkung)

&#160;

Eine andere Möglichkeit ist es, dass man die ganze Zeichenfolge markiert und mit nachfolgendem BBCode umgibt. In der ganzen Zeichenfolge einschließlich aller Leerstellen ist dann eine Trennung nicht möglich.

Code: Alles auswählen
Innerhalb der gesamten Zeichenfolge auch bei Leerstellen kein Zeilenumbruch: [nt]Text[/nt] nt wie nicht trennen

[nt]{TEXT}[/nt]

<span style="white-space:nowrap">{TEXT}</span>


Zwei geschützte Leerstellen in Folge

Code: Alles auswählen
[l2][/l2]

&#160;&#160;


Drei geschützte Leerstellen in Folge

Code: Alles auswählen
[l3][/l3]

&#160;&#160;&#160;


4 geschützte Leerstellen in Folge

Code: Alles auswählen
[l4][/l4]

&#160;&#160;&#160;&#160;


5 geschützte Leerstellen in Folge

Code: Alles auswählen
[l5][/l5]

&#160;&#160;&#160;&#160;&#160;


6 geschützte Leerstellen in Folge

Code: Alles auswählen
[l6][/l6]

&#160;&#160;&#160;&#160;&#160;&#160;


7 geschützte Leerstellen in Folge

Code: Alles auswählen
[l7][/l7]

&#160;&#160;&#160;&#160;&#160;&#160;&#160;


8 geschützte Leerstellen in Folge

Code: Alles auswählen
[l8][/l8]

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;


9 geschützte Leerstellen in Folge

Code: Alles auswählen
[l9][/l9]

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;


10 geschützte Leerstellen in Folge

Code: Alles auswählen
[l0][/l0] oder
[l10][/l10]

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;


Nachfolgende zwei BBCodes bewirken, dass, wenn in einem Wort dieses eingefügt wird, dass dieses am Zeilenende getrennt wird an dieser Stelle; wobei aber kein Trennstrich erscheint. (wu - wie Wortumbruch)

Code: Alles auswählen
Leerstelle ohne Breite: [lob][/lob] Für Zeilenumbruch bei "Kapitäns-Mütze" hinter -. Leider nicht in jeder Schriftart enthalten, was ggf. zur Darstellung eines Kästchens führt

[lob][/lob]

&#8203;

Code: Alles auswählen
Bedingter Wortumbruch: [uw][/uw] Für Zeilenumbruch bei "Kapitäns-Mütze" hinter -. Leider ist die Webseite dadurch nicht mehr valide

[uw][/uw]

<wbr />


Code: Alles auswählen
Teamspeak - Sprachkonferenzsoftware: [ts=TEXT]Nummer[/ts] www.teamspeak-einstieg.de

[ts={TEXT}]{NUMBER}[/ts]

=> Html-Code siehe nachfolgend verlinkte Webseite

Weil sonst die Breite dieses Threads sehr groß wäre, poste ich den Code hier nicht.

BBCode Sammlung • SEO phpBB - phpbb-seo.de

Um den Tooltip länger und falls gewollt größer anzuzeigen, siehe diese Anleitung: Klick! Lässt sich übrigens auch auf die Anzeige von Tooltips in Beiträgen anwenden. Dabei müsste bestimmt auch die Datei /styles/xxxxx/template/viewtopic_body.html verändert werden. Seit phpBB-Version 3.0.4 funktioniert diese Anleitung aber leider nicht mehr.

Mehr BBCode von mir auf phpBB.de siehe hier: Klick! BBCodes für Tabellen für das Forensystem phpBB3 siehe hier: Klick! BBCodes für Auswahl- und Dropdown-Listen für das Forensystem phpBB3: Klick! Und wie man ohne BBCodes Links mit kurzen URLs zu Kategorien, Foren, Threads und Beiträgen schreiben und erzeugen kann, siehe hier: Klick! Wie man ein phpBB3 mit kurzen URLs ausstattet, siehe hier: Klick!
Liebe Leser! Wenn Sie die Schildbürgerstreiche der Politik(er) schon lange satt haben, unter­stützen Sie bitte dieses Forum, indem Sie es auf anderen Seiten verlinken, oder nur aufs 'Welt­rettungs­forum' aufmerk­sam machen!
 
Falls Sie aber meinen, dass ein Staat gemäß Grund­gesetz schon dann demo­kratisch ist, wenn das Wahlvolk alle vier Jahre wählen gehen darf, wer die Dikta­toren sein sollen. Lügenpresse? Lügen­medien? Fall­bei­spiele!
 
Oder es in Ordnung wäre, dass im Gegensatz zur ehe­ma­ligen DDR, Menschen so wenig ver­dienen, dass es nicht zum Leben reicht und vieler­orts unver­schuld­ete Ob­dach­losig­keit herrscht; während dem­gegen­über einige wenige Multi­million­äre in uner­mess­lichem Reich­tum schwelgen.
 
Oder, wenn Sie meinen, dass AfD und PEGIDA rechts­radikal wären, weil beide gegen das Gut­menschen­tum sind, das alle Flücht­linge inte­grieren will ein­schließ­lich Deutsch­lern­pflicht; obwohl sie doch in einem Lager mit Wohn­con­tainern viel besser auf­ge­hoben wären.
 
Oder, wenn Sie abstreiten, dass auch Deutschland den Flüchtlingsstrom mit verursachte, indem die deutsche Regierung verantwortlich dafür war, dass Deutschland 2014 nur noch die Hälfte an den UNHCR zahlte, wodurch eine Hungersnot in den Flüchtlingslagern ausgelöst wurde.
 
Oder, wenn Sie die BRD für einen Rechts­staat halten, obwohl Richter und An­wälte durch per­ma­nente Rechts­beugung vor­ein­ge­nom­men um den Er­halt ihrer Arbeits­plätze be­müht sind; und mich deswegen Richter Rüdiger Richel rechtskräftig dazu verurteilte, Kinder zu ermorden. Wir brauchen eine un­vor­ein­ge­nom­me­ne Justiz anstatt eine unab­hängige Justiz. Genauso brauchen wir un­ab­häng­ige Lehrer anstatt ein (staat­lich ge­steu­er­tes) Bildungs­system.
 
Oder, wenn Sie glauben, dass die Kirche mit ihrer geistes­kranken Wahn­vor­stellung recht hat; dass einst Gott seinen (angeb­lich) einzigen Sohn sandte, damit dieser als Opfer­lamm brutal er­mordet wird zwecks Sünden­ver­gebung. Juden unschuldig an der Kreuzigung Jesu.
 
Oder, wenn Sie allen Ernstes meinen, dass soge­nannte "Lesben" und "Schwule" sexuell so orien­tiert sind, dass unbe­dingt die Ge­nital­ien nicht zu­ein­an­der passen dürfen; oder, dass der Terror­an­schlag in Paris nichts mit dem Islam zu tun hat.
 
Oder die sexuelle Neigung zu 'vor­puber­tärem' Kind ab­artig sei, obwohl manche Mädchen fast schon im Klein­kind­alter ge­schlechts­reif sind und trotzdem zur Prüderie gezwungen werden; Sie aber demgegenüber Zwangs­be­berg­steigung, Zwangs­artistik und Zwangs­leistungs­be­sportung von Kindern OK finden; brauchen Sie dieses Forum natürlich nicht unter­stützen.