BB-Codes zum Einbau mit Beschreibungen

Fragen zur Bedienung von phpBB 3.0.x, Probleme bei der Benutzung und alle weiteren Fragen inkl. Update auf die neuste phpBB 3.0.14 Version
Forumsregeln
phpBB 3.0 hat das Ende seiner Lebenszeit überschritten
phpBB 3.0 wird nicht mehr aktiv unterstützt. Insbesondere werden - auch bei Sicherheitslücken - keine Patches mehr bereitgestellt. Der Einsatz von phpBB 3.0 erfolgt daher auf eigene Gefahr. Wir empfehlen einen Umstieg auf die neuste phpBB-Version, welches aktiv weiterentwickelt wird und für welches regelmäßig Updates zur Verfügung gestellt werden.
Benutzeravatar
dieweltist
Mitglied
Beiträge: 1966
Registriert: 25.07.2006 13:28
Wohnort: Thüringen
Kontaktdaten:

BB-Codes zum Einbau mit Beschreibungen

Beitrag von dieweltist »

Nachfolgende BB-Codes 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 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.

Der Text für die Tipp-Anzeige erklärt jeweils nicht nur die Anwendung, sondern es sollte auch schon möglichst aus den BB-Code-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 " vewenden!

Leider haben alle BB-Codes 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 BB-Code, 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 BB-Code ist, kann es sein, dass ein oder mehrere Angaben, jeweils mit einer Leerstelle voneinander getrennt, zwischen die beiden BB-Code-Tags gemacht werden müssen. Oder dass statt dessen ein Objekt (Text und/oder Grafik) zu markieren ist, bevor man oben auf den entsprechenden BB-Code-Link klickt. Oder keines von beiden Möglichkeiten.

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

Sämtliche BB-Codes 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 BB-Codes 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 BB-Codes nicht finden kann.

I.d.R. kann man diese BB-Codes auch jeweils kombiniert, bzw. ineinander verschachtelt, anwenden. Auch wenn zwischen zwei BB-Code-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 style="text-align:center">{TEXT}</div>
Damit dieser BB-Code auch wirksam ist, falls ein englischsprachig benannter BB-Code 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 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: [versteckt]Text[/versteckt]

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

<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

Googlesuche - Das Web: [google]Suchbegriffe[/google]

[google]{TEXT}[/google]

<a href="http://www.google.de/search?q={TEXT}" target="_blank"><span style="color:#AA0000; text-decoration:underline">{TEXT}</span></a>

Code: Alles auswählen

Googlesuche deutsch: [google-d]Suchbegriffe[/google-d]

[google-d]{TEXT}[/google-d]

<a href="http://www.google.de/search?q={TEXT}&meta=lr%3Dlang_de" target="_blank" title="Interne Forensuche nach dem Begriff "{TEXT}""><span style="color:#AA0000; text-decoration:underline">{TEXT}</span></a>

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

Youtube Video: [youtube]Video-ID (nach 'youtube.com/v/' und vor '=en')[/youtube]

[youtube]{TEXT}[/youtube]

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/{TEXT}"></param><embed src="http://www.youtube.com/v/{TEXT}" type="application/x-shockwave-flash" width="425" height="349"></embed></object>

Code: Alles auswählen

Amazon-Link: [amazon]Produkt-Nummer[/amazon]

[amazon]{NUMBER}[/amazon]

Die Html-Ersetzung würde diesen Thread zu sehr in die Breite gehen lassen. Diese ist auf dieser Webseite:
http://sekuro.se.funpic.de/phpbb3/viewt ... p=169#p169

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 BB-Code-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-BB-Code 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 BB-Codes 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 BB-Code-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>
Man möchte ein bestimmtes Wort, Wortgruppe, Textlink, Grafik oder Grafiklink in einem Beitrag markieren, sodass man mit einer bestimmten URL bzw. Link zu dieser Position gelangen kann, indem sich entweder ein neues Fenster öffnet, wo der Browser zu dieser Stelle automatisch scrollt; oder dass innerhalb desselben Dokuments, bzw. Beitrags oder Threadseite ein Link ist, wo der Browser zu der Position des Ankers springt bzw. scrollt, wenn man auf diesen Link klickt. Dazu setzt man zuerst einen Anker.

Hinter dem Gleichheitszeichen gibt man den Namen des Ankers an; also die Bezeichnung, die dann auch in der URL am Ende hinter dem Rautesymbol # sein wird. Das jenige Wort, Wörter und/oder Grafik, das im Text erscheint, und zu dem/den/der dann mit einem entsprechenden Link gesprungen werden kann (automatisches Scrollen), wird/werden markiert, bevor man oben auf diesen BB-Code-Link klickt, damit dieses Wort zwischen den beiden BB-Code-Tags ist.

Code: Alles auswählen

Anker setzen (zu dem vom selben Dokument gesprungen oder von einem anderen Dokument verlinkt werden kann zu dieser Position mit Scrolling): [anker=Ankername]Im Beitrag angezeigter unterstrichener Text oder Grafik mit Ankername als Tooltip[/anker]

[anker={IDENTIFIER}]{TEXT}[/anker]
[jump={IDENTIFIER}]{TEXT}[/jump]
[setjump={IDENTIFIER}]{TEXT}[/setjump]

<a name="{IDENTIFIER}" title="{IDENTIFIER}">{TEXT}</a>
Um im selben Dokument, bzw. von derselben Threadseite oder vom selben Beitrag aus zu diesem Anker zu springen, verwendet man nachfolgenden BB-Code, um so einen internen Link zu erzeugen:

Code: Alles auswählen

Sprung (Link) zum Anker im selben Beitrag bzw. Threadseite: [sprung=Ankername]Beliebiger Text und/oder Grafik[/sprung]

[sprung={IDENTIFIER}]{TEXT}[/sprung]

<a href="#{IDENTIFIER}" title="Klick auf diesen Link, um auf dieser Seite zur gewünschten Position zu springen!">{TEXT}</a>
Um von einem anderen Dokument, bzw. von einer anderen Threadseite, Thread oder Forum zum Anker zu verlinken plus Scrolling, fügt man der URL zu diesem Dokument am Ende ein Rautezeichen # und dahinter den Ankernamen an. Von außerhalb des Forenboards muss man dazu die komplette (absolute) URL verwenden; und innerhalb des Forenboards genügt die relative URL (also ohne www.domain.de/).

So einen internen Link kann man auch mit diesem BB-Code erzeugen, wenn dieser zu irgendeinem Anker innerhalb dieses Forenboards verweisen soll. Dazu gibt man hinter = die Beitrags-ID des Beitrags an, in dem man mit vorvorigem BB-Code den Anker setzte. Die Beitrags-ID findet man bspw. in der URL, das ist die Nummer, die hinter 'p=' angegeben ist. Und/oder diese ist aus dem Ankerparameter ablesbar, derjenigen URL, die zu diesem Beitrag mit Anker führt, was dann die Zahl hinter #p am URL-Ende wäre.

Als Ankername gibt man nicht den sichtbaren Text oder Grafik im Beitrag an; sondern das, was man beim vorvorigen BB-Code hinter dem = angegeben hatte. Das ist der Ankername, der dann in der URL ganz am Ende geschrieben stehen wird hinter dem Rautesymbol #. Der so erzeugte Link kann am Ende natürlich auch auf beliebig anderen Webpräsenzen veröffentlicht werden. Nachfolgende Version ist nur für die Nicht-SEO-Variante des phpBB3 bestimmt.

Code: Alles auswählen

Zum Anker im neuen Fenster verlinken mit Scrolling: [zumanker=Beitrags-ID des Beitrags des Ankers Ankername]Beliebiger Text und/oder Grafik[/zumanker] Zwischen Beitrags-ID und Ankername eine Leerstelle setzen

[zumanker={NUMBER} {IDENTIFIER}]{TEXT}[/zumanker]

<a href="./viewtopic.php?p={NUMBER}#{IDENTIFIER}" title="Klick auf diesen Link, um zur gewünschten Position zu gelangen!" target="_blank">{TEXT}</a>
Nachfolgender BB-Code ist nur für die SEO-Version des phpBB3 (klick) bestimmt. Weil es derzeit bei der SEO-Version keine Möglichkeit gibt, nur aufgrund einer Beitrags-ID eine URL zu kreieren, die zu diesem Beitrag führt, die auch dann funktioniert, wenn der Beitrag nicht auf der ersten Threadseite ist, funktioniert nachfolgender BB-Code nur, wenn der im Beitrag gesetzte Anker auf der ersten Threadseite ist.

Code: Alles auswählen

Zum Anker im neuen Fenster verlinken mit Scrolling: [zumanker=Thread-ID, wo der Anker auf erster Threadseite gesetzt wurde Ankername]Beliebiger Text und/oder Grafik[/zumanker] Zwischen Thread-ID und Ankername eine Leerstelle setzen

[zumanker={NUMBER} {IDENTIFIER}]{TEXT}[/zumanker]

<a href="./-f1/-t{NUMBER}.html#{IDENTIFIER}" title="Klick auf diesen Link, um zur gewünschten Position zu gelangen!" target="_blank">{TEXT}</a>
Oder benutze für die SEO-Variante des phpBB3 nachfolgenden etwas weniger komfortablen BB-Code, der auch dann funktioniert, wenn der Anker nicht auf der ersten Threadseite ist. Wo anstatt einer ID die relative URL angegeben werden muss. Also, der Teil der URL hinter www.domain.de/. Jedoch ohne eine ggf. vorhandene lange ID-Ziffernfolge am URL-Ende.

Code: Alles auswählen

Zum Anker im neuen Fenster verlinken mit Scrolling: [zumanker=Relative URL der Threadseite, wo der Anker gesetzt wurde Ankername]Beliebiger Text und/oder Grafik[/zumanker] Zwischen relativer URL und Ankername eine Leerstelle setzen

[zumanker={LOCAL_URL} {IDENTIFIER}]{TEXT}[/zumanker]

<a href="./{LOCAL_URL}#{IDENTIFIER}" title="Klick auf diesen Link, um zur gewünschten Position zu gelangen!" target="_blank">{TEXT}</a>
Um Links mit kurzen URLs zu Ankern innerhalb von Beiträgen bei der normalen Nicht-SEO-Version des phpBB3 (klick) mit BB-Codes zu erzeugen; man könnte diese auch problemlos manuell schreiben, weil sie so kurz und einfach sind; müssen mindestens nachfolgende ein oder zwei URL-Umwandlungsanweisungen in die Datei .htaccess eingefügt werden.

Falls man das Forenboard wie ich ein zweites mal in den Ordner a/ installierte, das mit denselben Datenbanktabellen läuft, wie das erste unmittelbar auf der Domain installierte, um Beiträge wahlweise jeweils mit einem oder 10 Beitrag je Threadseite anzeigen und verlinken zu können (klick), müssen mindestens die zwei nachfolgenden RewriteRules in die .htaccess eingefügt werden. Andernfalls braucht man nur die erste RewriteRule in verkürzter Form einfügen (zweiter Code). Dann funktioniert aber auch nur der erste BB-Code für kurze URLs.

Code: Alles auswählen

RewriteEngine On
RewriteBase /
RewriteRule ^(a/)?p([0-9]+)$ $1viewtopic.php?p=$2 [L]
RewriteRule ^(a/)?l([0-9]+)$ a/viewtopic.php?p=$2 [L]

Code: Alles auswählen

RewriteEngine On
RewriteBase /
RewriteRule ^p([0-9]+)$ viewtopic.php?p=$1 [L]

Code: Alles auswählen

Zum Anker im neuen Fenster verlinken mit Scrolling: [zumanker=Beitrags-ID des Beitrags des Ankers Ankername]Beliebiger Text und/oder Grafik[/zumanker] Zwischen Beitrags-ID und Ankername eine Leerstelle setzen

[zumanker={NUMBER} {IDENTIFIER}]{TEXT}[/zumanker]

<a href="./p{NUMBER}#{IDENTIFIER}" title="Klick auf diesen Link, um zur gewünschten Position zu gelangen!" target="_blank">{TEXT}</a>

Code: Alles auswählen

Zum Anker im neuen Fenster verlinken mit Scrolling, ein Beitrag je Threadseite: [zumanker=Beitrags-ID des Beitrags des Ankers Ankername]Beliebiger Text und/oder Grafik[/zumanker] Zwischen Beitrags-ID und Ankername eine Leerstelle setzen

[zumanker1={NUMBER} {IDENTIFIER}]{TEXT}[/zumanker1]

<a href="./l{NUMBER}#{IDENTIFIER}" title="Klick auf diesen Link, um zur gewünschten Position zu gelangen!" target="_blank">{TEXT}</a>
Und jetzt wird es interessant. Um zweispaltig zu schreiben markiere man etwa die erste Hälfte des Textes und benutze nachfolgenden BB-Code! 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%"><p></p>{TEXT}</div>
Dann markiere man die zweite Hälfte des Textes und benutze nachfolgenden BB-Code! Dieser Text würde zwar auch ohne diesen zweiten BB-Code rechts neben der ersten Spalte erscheinen; so ist aber sichergestellt, dass der Abstand zwischen beiden Blöcken ausreichend ist, auch wenn diese beiden BB-Codes 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%"><p></p>{TEXT}</div><br style="clear: both" />

Nachfolgend die nichtvalide Version.

<div style="float:right; width:48%"><p></p>{TEXT}</div><BR CLEAR=ALL>
Diese BB-Codes 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 BB-Codes ü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 BB-Codes 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%"><p></p>{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%"><p></p>{TEXT}</div><br style="clear: both" />

Nachfolgend die nichtvalide Version.

<div align="justify" style="float:right; width:48%"><p></p>{TEXT}</div><BR CLEAR=ALL>
Man kann auch Zweispaltigkeit mit Blocksatz als einen gemeinsamen BB-Code 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%"><p></p>{TEXT}</div><div style="text-align:justify; float:right; width:48%"><p></p>{TEXT1}</div><br style="clear: both;" />

Die nicht valide Html-Ersetzung:

<div align="justify" style="float:left; width:48%"><p></p>{TEXT}</div><div align="justify" style="float:right; width:48%"><p></p>{TEXT1}</div><BR CLEAR=ALL>
Und nachfolgend ein BB-Code 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:22px"><p></p>{TEXT}</div><div style="text-align:justify; float:left; width:31%"><p></p>{TEXT1}</div><div style="text-align:justify; float:right; width:32%"><p></p>{TEXT2}</div><br style="clear: both;" />

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

Die nicht valide Html-Ersetzung:

<div align="justify" style="float:left; width:32%; margin-right:22px"><p></p>{TEXT}</div><div align="justify" style="float:left; width:31%"><p></p>{TEXT1}</div><div align="justify" style="float:right; width:32%"><p></p>{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 BB-Code! Dieser funktioniert natürlich auch bei mehrspaltigem Text, wenn dieser BB-Code 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 BB-Codes (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 BB-Code 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 BB-Codes machen den vom BB-Code eingeschlossenen Text nicht nur zum Absatz (wie alle anderen BB-Codes 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"><p></p>{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"><p></p>{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 BB-Codes 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 BB-Code 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 BB-Code 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: [gl][/gl]

[gl][/gl]

&nbsp;

oder (gleiche Wirkung)

&#160
Eine andere Möglichkeit ist es, dass man die ganze Zeichenfolge markiert und mit nachfolgendem BB-Code 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]

[nt]{TEXT}[/nt]

<span style="white-space:nowrap">{TEXT}</span>
Nachfolgende zwei BB-Codes 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

MP3 Player für alle Audiodateien mit der Endung mp3: [mp3]www.xxx.mp3[/mp3]

[mp3]{URL}[/mp3]
=> Html-Code siehe diesen Beitrag von @4seven dieses Threads: Klick! Zudem muss im Root-Verzeichnis des Forums ein Ordner /media/ erstellt werden, die Zip-Datei entpackt und der Ordner \mp3_player\ in \mp3\ umbenannt und in den Ordner /media/ hochgeladen werden. In der Html-Ersetzung muss an zwei Stellen "yourforum.de" durch die eigene Domain des Forums ersetzt werden.

Ein anderer Player wäre dieser: Klick! Bei diesem könnte man aus der Html-Ersetzung dieses entfernen:

Code: Alles auswählen

<img style="border: medium none ; text-decoration: none" src="http://beforeyougopostal.com/MainForum/adm/images/icon_edit.gif" title="Podcast" alt="Podcast" align="absbottom">
Und vielleicht am besten den p-Tag (Absatz) am Anfang und Ende durch einen span-Tag (funktionslos) ersetzen.

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

BB-Codes für externe und interne Links habe ich in diesem Beitrag: Klick! veröffentlicht, die aber bei der Nicht-SEO-Variante des phpBB3 nur mit der dort angegebenen zusätzlichen Einfügung in die Datei .htaccess funktionieren. Man könnte die aber auch für normale lange (dynamische) URLs umschreiben.

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.
Zuletzt geändert von dieweltist am 26.01.2009 23:58, insgesamt 55-mal geändert.
4seven
Mitglied
Beiträge: 5869
Registriert: 21.04.2007 06:18

Beitrag von 4seven »

Super Arbeit dieweltist,

hier auch noch eine Sammlung, etwas komprimierter im premodded_pack der BBCodeBox3.

Zu finden in der bbcodes_german.txt

http://sekuro.se.funpic.de/mods/bbcodeb ... german.txt

Bis auf den "Spaß-Tag" marquee sind alle BBCodes ausnahmslos xhtml 1.0 strict valide
Benutzeravatar
nickvergessen
Ehrenadmin
Beiträge: 11559
Registriert: 09.10.2006 21:56
Wohnort: Stuttgart, Germany
Kontaktdaten:

Beitrag von nickvergessen »

Code: Alles auswählen

Forensuche

[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=200&t=0">{TEXT}</a>
ich würde hier nicht ./search.php sondern http://www.domain.tdl/path/search.php nehmen. Dann geht der BBCode auch in der Gallery, Knowledge-Base etc.
kein Support per PN
Benutzeravatar
dieweltist
Mitglied
Beiträge: 1966
Registriert: 25.07.2006 13:28
Wohnort: Thüringen
Kontaktdaten:

Beitrag von dieweltist »

Ich hatte den BB-Code vergessen, der einen Stopp des Umfließens von Text um bspw. eine Grafik bewirkt. Kann ggf. sehr wichtig sein. Siehe hier: Klick! Die Xhtml-valide Version ist diese

Code: Alles auswählen

Abbruch des Umfließens des Textes um ein schwebendes Objekt

[stop][/stop]

<br style="clear: both;" />
Und die nichtvalide Variante ist diese

Code: Alles auswählen

Abbruch des Umfließens des Textes um ein schwebendes Objekt

[stop][/stop]

<BR CLEAR=ALL>
Standardisierung ist ja sehr wichtig. Ursprünglich begonnen hatte diese übrigens der Bibel zufolge, als die ersten Menschen damit begannen, den Tieren ihren Namen zu geben. Denn nur wenn jeder jeweils jedes Tier gleich benennt, ist eine Kommunikation überhaupt erst möglich.

Zu den schwebenden Objekten möchte ich noch erklären (Ich hatte mich erst gestern dazu etwas eingelesen, siehe dazu hier und hier!) In Wirklichkeit ist aber alles viel einfacher mit den Floats, bzw. den schwebenden Objekten, wenn man nicht unbedingt so hoch hinaus möchte.

Wenn man sich mit den von mir kreierten BB-Code-Floatanwendungen begnügt, ist es meines Erachtens doch sehr einfach. Man muss nur wissen, was so ein Float bewirkt. Was den linksschwebenden BB-Code betrifft, möchte ich erklärend hinzufügen, dass deswegen das betreffende Objekt nicht unbedingt auf der linken Seite sein muss.

Linksschwebend bedeutet nur, dass es sich, wie alle anderen Objekte auch, möglichst weit links setzt. Das bedeutet also, dass so ein linksschwebendes Objekt sich auch ganz rechts befinden kann, wenn da ausreichend Platz ist. Es setzt sich eben nur möglichst so weit links wie möglich. Und links von dem Objekt muss sich nicht unbedingt der linke Rand befinden, sondern es können andere Links-Float-Objekte sein.

So kann es sein, dass sich ganz links ein linksschwebendes Objekt befindet, rechts daneben setzt sich ein weiteres linksschwebendes Objekt, und ganz rechts könnte sich dann noch eines befinden, falls noch genug Platz ist.

Wird die Fensterbreite verringert, "schwebt" das ganz rechte Element irgendwann von dieser rechten Position weg, wenn nicht mehr genug Platz dort ist, und setzt sich unter die beiden anderen Objekte. So kann es bei weiterer Verkleinerung des Fensters dann auch mit dem nächsten Objekt geschehen.

Ein schwebendes Objekt, bzw. ein Float, ist aber nicht deswegen ein schwebendes, weil es selbst so schweben kann, das können grundsätzlich alle Objekte, außer die fest positionierten; sondern deswegen, weil bspw. Text an ihm vorbeifließen kann, oder andere Objekte sich rechts oder links neben dieses setzen können, falls der freie Platz ausreicht.

Floats sind meines Erachtens zum Positionieren von Elementen besonders gut in Foren geeignet, weil die Seitenbreite oftmals verringert ist, bzw. die Breite oftmals eher gering ist; bspw. wenn der Admin das Style so verändert, dass er die Tabelle schmaler macht. Oder wenn Nutzer das Fenster absichtlich schmaler machen, um so die Zeilenlänge zu verkürzen, um besser lesen zu können.

Bei absolut positionierten Elementen würde sich das ganze weigern, schmaler zu werden, und man müsste sich mit lästigem vertikalen Scrollen zufrieden geben. Aber da sind schwebende Elemente viel besser geeignet, weil sie je nach vorhandenem Platz einfach dorthin wandern, wo genug Platz ist; bzw. besser gesagt, anderen Objekten dieses Wandern ermöglichen.

Übrigens hatte ich den entscheidenden Hinweis in diesem Forumsthread: Klick! gefunden, wie man in einem Forum zweispaltig schreiben könnte. Leicht abgewandelt machte ich dann aus diesem Vorschlag die 4 BB-Codes für das zweispaltige Schreiben und die zwei für links- und rechtsschwebende Objekte.


Inzwischen habe ich auch BB-Codes für Tabellen geschrieben (klick), die man jeweils miteinander kombiniert anwendet, die ohne zusätzlich installierten Mod funktionieren; vergleichbar mit den BB-Codes für Aufzählungen. Leider ist das aber problematisch, weil jeder BB-Code für sich nur unvollständigen Html-Code liefert. Vergisst bspw. ein User, den BB-Code für das Tabellenende zu setzen, wird die Formatierung der ganzen Threadseite zerstört. Bei meinem Forum ist das aber nicht so gravierend, weil jeder User notfalls auf einen Beitrag je Threadseite umschalten kann: Klick!
Zuletzt geändert von dieweltist am 19.09.2008 21:23, insgesamt 36-mal geändert.
4seven
Mitglied
Beiträge: 5869
Registriert: 21.04.2007 06:18

Beitrag von 4seven »

dieweltist hat geschrieben:Ich hatte auch hier einen BB-Code für eine Tabelle gefunden. Das System nimmt diesen zwar erst mal an; er kann aber dann nicht korrekt angewendet werden.

Code: Alles auswählen

Tabelle

[table][tr][td][td][/td][/td][/tr][/table]

<table><tr><td></td><td></td></tr></table>
Beim Klick auf die Schaltfläche für diesen BB-Code erscheint dann leider nur: [table][/table].
Dazu die ultimative Bequem-Lösung hier
- phpBB3-Tablemaker (Update 24.05.2008)
Benutzeravatar
dieweltist
Mitglied
Beiträge: 1966
Registriert: 25.07.2006 13:28
Wohnort: Thüringen
Kontaktdaten:

Rahmen, vertikale Linien, Code-Box kürzen und weitere BB-Cod

Beitrag von dieweltist »

Inzwischen habe ich auch diese vier z.T. verbesserten BB-Codes für Rahmen geschrieben.

Code: Alles auswählen

Grauer Standardrahmen mit Rahmendicke und linkem und rechtem Innenabstand von jeweils 3 Pixel: [r]Text[/r] Rahmt nur den Inhalt ein

[r]{TEXT}[/r]

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

Code: Alles auswählen

Grauer Standardrahmen mit Rahmenliniendicke und linkem und rechtem Innenabstand von jeweils 3px: [re]Text[/re] Rahmen reicht bis ans Ende der Zeile und bewirkt Zeilenumbruch am Ende des Rahmens

[re]{TEXT}[/re]

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

Code: Alles auswählen

Individueller Rahmen, rahmt nur Inhalt ein: [r=Rahmenfarbe Hintergrundfarbe Rahmendicke Innenrand Rahmenstyle]Text[/r] Leerstellen dazwischen! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset

[r={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/r]

<span style="border-color:{COLOR}; background-color:{COLOR1}; border-width:{NUMBER}px; border-style:{IDENTIFIER}; padding:{NUMBER1}px">{TEXT}</span>

Code: Alles auswählen

Individueller Rahmen, reicht bis ans Ende der Zeile: [re=Rahmenfarbe Hintergrundfarbe Rahmendicke Innenrand Rahmenstyle]Text[/re] Leerstellen dazwischen! Rahmenstyles: solid,dotted,dashed,double,ridge,groove,outset,inset

[re={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/re]

<div style="border-color:{COLOR}; background-color:{COLOR1}; border-width:{NUMBER}px; border-style:{IDENTIFIER}; padding:{NUMBER1}px">{TEXT}</div>
Wenn man bspw. E-Mails veröffentlicht, die Zitate enthalten, die jeweils links durch eine vertikale (senkrechte) Linie als solche gekennzeichnet sind, sind nachfolgende BB-Codes geeignet, wobei mit CSS ein Text eingerahmt wird, wo nur dessen linke Linie sichtbar ist.

Code: Alles auswählen

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

[rl]{TEXT}[/rl]

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

Code: Alles auswählen

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

[rl={COLOR} {COLOR1} {NUMBER} {NUMBER1} {IDENTIFIER}]{TEXT}[/rl]

<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>
Man kann auch einzelne Tabellenzellen als Rahmen verwenden. Insbesondere der Standard-Rahmen ohne Einstellungsmöglichkeiten hat einen meines Erachtens sehr gut gelungenen 3D-Effekt beim Internet Explorer. Hier drei Versionen von Rahmen, die eigentlich einzellige Tabellen sind.

Interessant ist auch die Möglichkeit, einen Computercode, den man mit dem BB-Code 'Code' umschließt, ein weiteres mal mit einem solchen Rahmen zu umschließen. Auf diese Weise schließt dann das Textfeld mit dem Code nur noch den Code ein. Wählt man den Rahmen mit der Liniendicke Null, so ist dieser unsichtbar und man hat nur noch den verkürzenden Effekt.

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
[/rt0] Dazu zuerst den Computercode mit BB-Code "Code" umschließen!

[rt0]{TEXT}[/rt0]

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

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>
BB-Code um Begriffe als Videosuchlinks erscheinen zu lassen.

Code: Alles auswählen

Video-Googlesuche - Videos im gesamten Web: [google-v]Suchbegriffe[/google-v]

[google-v]{TEXT}[/google-v] 

<a href="http://video.google.de/videosearch?q={TEXT}" target="_blank"><span style="color:#AA0000; text-decoration:underline">{TEXT}</span></a>
Einige BB-Code-Vorschläge von dieser Webseite

http://www.quefi.de/forum/index.php?topic=481

habe ich in den nachfolgenden BB-Codes umgesetzt und ausprobiert.

Code: Alles auswählen

Absatzmarke: [a]Text[/a] Bei eingeschlossenem Text oder bei Einfügung am Zeilenende großer Abstand zum nächsten Absatz. Bei Einfügung am Zeilenanfang darüber mittelgroßer Absatand

[a]{TEXT}[/a]

<p style="font-size:1em">{TEXT}</p>

Code: Alles auswählen

Absatz: [p=Ausrichtung Leerstellen Zeilenhöhe Einrückung Schriftgröße Abstand-oben Abstand-unten Abstand-links(%) Abstand-rechts(%)]Absatztext[/p] Ausrichtung:left,center,right,justify Leerstellen:normal,pre,nowrap,pre-wrap,pre-line Nicht-%-Angaben in em

[a={IDENTIFIER} {IDENTIFIER1} {SIMPLETEXT} {SIMPLETEXT1} {SIMPLETEXT2} {SIMPLETEXT3} {SIMPLETEXT4} {NUMBER} {NUMBER1}]{TEXT}[/a]

<p style="text-align:{IDENTIFIER}; white-space:{IDENTIFIER1}; line-height:{SIMPLETEXT}em; text-indent:{SIMPLETEXT1}em; font-size:{SIMPLETEXT2}em; margin-top:{SIMPLETEXT3}em; margin-bottom:{SIMPLETEXT4}em; margin-left:{NUMBER}%; margin-right:{NUMBER1}%">{TEXT}</p>
Nachfolgende Erklärungen laut http://de.selfhtml.org/css/eigenschafte ... chtung.htm.

text-align
left = linksbündig ausrichten (Voreinstellung).
center = zentriert ausrichten.
right = rechtsbündig ausrichten.
justify = als Blocksatz ausrichten.

white-space
normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags. Bei CSS 2.1 nachfolgende weitere Werte:
pre-wrap = wie pre, jedoch erfolgt ein Umbruch, wenn die Breite der Box zur Anzeige der Zeile nicht ausreicht.
pre-line = Mehrere Whitespaces werden wie bei normal zusammengefasst, es erfolgt aber ein Zeilenumbruch wie bei pre-wrap.

Code: Alles auswählen

Zeilenumbruch einfügen

[zu][/zu]

<br/>

Code: Alles auswählen

Geschützte Leerstelle mit einstellbarer Höhe: [gl=Höhe in pt][/gl] pt nicht mitschreiben! 10pt normale Höhe. Geeignet um Leerzeile mit einstellbarer Höhe oder schmale geschützte Leerstelle zu realisieren

[gl={NUMBER}][/gl]

<span style="font-size:{NUMBER}pt; line-height:116%">&nbsp;</span>

Code: Alles auswählen

Leerzeile mit einstellbarer Höhe: [l=Höhe in pt][/l] pt nicht mitschreiben! 10pt normale Höhe. Unmittelbar an den Anfang einer Zeile setzen, um darüber eine Leerzeile mit einstellbarer Höhe einzufügen


[l={NUMBER}][/l]

<span style="font-size:{NUMBER}pt; line-height: 116%">&nbsp;</span><br/>
Zuletzt geändert von dieweltist am 19.01.2009 02:17, insgesamt 14-mal geändert.
Benutzeravatar
dieweltist
Mitglied
Beiträge: 1966
Registriert: 25.07.2006 13:28
Wohnort: Thüringen
Kontaktdaten:

Beitrag von dieweltist »

ACHTUNG! Die BB-Codes im Basisbeitrag für das zweispaltige Schreiben, den Blocksatz und für links- und rechtsschwebende Objekte, also diejenigen, die 'float' in der Html-Entsprechung haben, hatten leider den Fehler, dass ggf. der Text etwas größer dargestellt wurde. Mit der Editierung des Basisbeitrages vom 19. Juni 2008 konnte ich das in Ordnung bringen.
Germanicus
Mitglied
Beiträge: 25
Registriert: 09.06.2008 19:14

Beitrag von Germanicus »

Code: Alles auswählen

[abs][/abs]

<p>
Hat kein schliessendes Element, somit in jeder html-Version falsch. Sehe den Sinn grade nicht...

Code: Alles auswählen

[zu][/zu]

<br>
Warum nicht einfach [br] (anstatt von zwei Elementen). Es empfielt sich auch die Benutzung von <br/> als html-Code anstelle von <br>...
Gaius Iulius Caesar Germanicus, Imperium Romanum
Benutzeravatar
dieweltist
Mitglied
Beiträge: 1966
Registriert: 25.07.2006 13:28
Wohnort: Thüringen
Kontaktdaten:

Beitrag von dieweltist »

Dann versuche doch einfach [br] anzugeben! Ich bekomme jedenfalls dann die Fehlermeldung, dass das schließende Element fehlt.

OK, wenn <br/> besser ist, dann benutzen wir eben diesen Html-Code! Ich habe den Beitrag zuvor entsprechend editiert.

Und wenn <p> ohne schließendes Element falsch ist, dann benutze den mit dem schließenden Tag!, nämlich [abs-t][/Abs-t] ('t' wie 'Text', der von diesen beiden Tags eingeschlossen wird) Man muss aber nicht unbedingt mit diesen beiden Tags Text einschließen, sondern füge diese einfach an dem Satzende ein, hinter dem ein neuer Absatz beginnen soll!

Schließt man aber mit diesen beiden Tags Text ein, so erscheint dieser etwas größer. Ich habe keine Ahnung weshalb. Und wenn ich auf der Tastatur die Absatztaste (Return) drücke, habe ich doch auch keinen schließenden Tag.

Einen simplen Zeilenumbruch erzeugt man übrigens grundsätzlich mit gedrückter Umschalttaste und <Return>; aber das wissen die wenigsten. 'zu' wie Zeilen-Umbruch finde ich verständlicher als 'br' wie 'break'. Ich hasse die englische Sprache. :wink: Siehe dazu auch die BB-Codes von mir für den externen Link und die internen Links in Verbindung mit kurzen Urls Klick!

Edit: Inzwischen habe ich weitere BB-Codes geschrieben. Einen zur Erzeugung eines externen Links, der auch für interne Links verwendet werden kann; und weitere, um ganz einfach interne Links mit kurzen URLs zu erzeugen. Es muss dann aber auch was in die Datei .htaccess eingefügt werden: Klick!
Zuletzt geändert von dieweltist am 03.07.2008 22:51, insgesamt 5-mal geändert.
4seven
Mitglied
Beiträge: 5869
Registriert: 21.04.2007 06:18

Beitrag von 4seven »

Ich lese immer wieder gern in deinen Beiträgen.
Inspirierend und Eigen :)
Antworten

Zurück zu „[3.0.x] Administration, Benutzung und Betrieb“