Achtung
Dieses Tutorial bezieht sich auf die alte Version der Iconbar (vor dem Update im März 2011) und ist nur noch als Archiv gedacht.

Für Informationen zur Gestaltung der aktuellen Iconbar besuchen Sie bitte unser Iconbar-Tutorial

Einstellungen über das Admin Menü
Mehrteilige Forencodes
Warum kein HTML in Beiträgen?
Was kann man mit Forencode anstellen?
Beispiel 1: Grafik in Symbol-Bar einfügen
Beispiel 2: Schrift individuell formatieren
Beispiel 3: Wir basteln einen Anker
              3.1 Anker mit Variablen für Fortgeschrittene
              3.2 Anker für Einsteiger
Fazit
---


Forencodes bieten Ihnen und Ihren Mitgliedern eine einfache Möglichkeit, Beiträge, Signaturen und Kommentare individuell zu gestalten. Mit Sicherheit haben Sie selbst schon einmal Forencodes benutzt. Aber was genau sind Forencodes und wie lassen sich Forencodes im Board einbauen?

Das ist ein Forencode ->
Das ist ein Forencode ->

1
 

[b]Mit Forencode formatierter Text![/b]
 

Grafische Ausgabe: Mit Forencode formatierter Text



Platzhalter für HTML

Kennen Sie die Symbol-Bar? Dann kennen Sie auch Forencode. Jedes mal, wenn Sie Elemente aus der Bar benutzen - indem Sie beispielsweise Text formatieren oder Smileys einfügen - kommt Forumscode zum Einsatz. Dieser "versteckt" sich hinter der grafischen Ausgabe, also hinter den Symbolen. Es ist doch praktischer mit einem Klick eine Grafik einzufügen, anstatt den gesamten Code auszuschreiben.





Forencodes sind ganz einfach Platzhalter, die mit HTML Befehlen "gefüllt"- und durch eine Grafik in der Symbolbar visuell dargestellt werden. So lautet der Forumscode für den gelben Smiley schlicht:

1
 

[grin]
 

In diesem "Behälter" steckt folgender HTML-Code, der den Pfad zum Speicherort der Smiley Grafik beinhaltet:

1
 

<img src='http://img.homepagemodules.de/grin.gif'>
 

*Anmerkung: da dies ein HTML und kein XHTML Befehl ist, muss der IMG-Tag nicht geschlossen werden. Sofern Sie mit XHTML arbeiten, schließen Sie Ihre IMG-Tags mit einem Slash.



Zweiteilige Forencodes seit dem Update

Seit dem Update können auch komplexere zweiteilige Forencodes angelegt- und HTML Befehle, die einen Endtag benötigen, eingesetzt werden. Vor dem Update standen nur HTML Befehle ohne Endtags zu Verfügung, wie sie beispielsweise bei Bildern und Smileys vorkommen.

Beispiel:
<img src="http://img.homepagemodules.de/grin.gif"><- Kein Endtag
<table></table><- Endtag



Einstellungen über das Admin Menü

Forencodes werden über das Admin Menü via Admin->Einstellungen->Codes/Smileys erstellt und können dann in die Symbol Bar (oder direkt in das "Smiley-Fenster") über Admin->Einstellungen->Symbol-Bar integriert werden. Als Forumscode verwendet homepagemodules.de BBCode (Bulletin Board Code), eine an HTML angelehnte Auszeichnungssprache mit vereinfachter Syntax. Sie könnten theoretisch auch jedes beliebige Wort als Platzhalter zwischen die eckigen Klammern setzen, solange sie den richtigen HTML Code zuweisen, siehe Screenshot.


Beispiel:

1
 

[b]das wird fett dargestellt[/b]
 

...so kann der Forencode auch genannt werden

1
 

[fetterText]immer noch fett dargestellt[/fetterText]
 

Egal wie Sie Ihren Forumscode benennen, um Schrift fett zu formatieren muss folgender HTML Befehl den Forencode ersetzen

1
 

<bold></bold>
 

Admin-->Einstellungen>Codes/Smileys




Warum nicht gleich HTML in Beiträgen erlauben?

Mit vordefinierten Forencodes entscheiden Sie als Admin, welche Möglichkeiten Ihre Mitglieder zur Formatierung des Textes oder zur Integration von weiteren Inhalten wie beispielsweise Videos, Bilder etc. haben. Natürlich könnten Sie von vorne herein – und mit weit weniger Aufwand - HTML in Ihren Beiträgen erlauben. Dies wird jedoch aus mehreren Gründen nicht empfohlen.

Über HTML besteht die Möglichkeit, schädlichen Code (beispielsweise Javascript, welches Ihre Cookies ausliest oder Werbung "unterschummelt") in Ihr Forum "einzuschleusen"

Möglicherweise wird Ihr Design ungewollt verändert oder gar zerstört

Forencodes (Platzhalter / BBCode) bergen den Vorteil, dass auch komplexe HTML Befehle einfach "verpackt" und in die Symbol Bar integriert werden können. So profitieren auch Mitglieder ohne Programmier-Kenntnisse davon



Was kann man mit Forencode anstellen?

Hier nun eine kleine Auswahl, was sich mit Forencode alles "anstellen" lässt. Anspruch auf Vollständigkeit besteht nicht, auf weitere kreative Lösungen sind wir gespannt!

      - Animierte Gifs einsetzen
      - Neue Smileys integrieren
      - Mail Adresse einfügen
      - Ankerpunkte in einem langen Artikel setzen
      - Text formatieren
      - Flash Objekte einbetten
      - Videos einbetten
      - Tabellen erstellen
      - ...



Beispiel 1: Eigene Grafik in die Symbol Bar integrieren (einfacher Forencode)

1.1 Bilder hinzufügen, HTML Code kopieren


Um eigene Bilder einzufügen, einen Forencode zu erstellen und in die Symbol Bar zu integrieren gehen Sie über das Admin Menü zu Admin->Einstellungen-->Code/Smileys.

Klicken Sie auf "laden Sie eine neue Grafik hoch".

Wählen Sie die gewünschte Datei über "Durchsuchen" oder nehmen Sie ein bereits hochgeladenes Bild.


Kopieren Sie den HTML Code:

[meinAvatar]
 

Beim Punkt "Mit" fügen Sie Ihren HTML Code ein, der den Forencode ersetzen wird. In diesem Fall ist das ein IMG-Tag, der auf den Speicherort Ihrer Grafik verweist.

<img src="http://files.homepagemodules.de/b59262/a_11.png" width="30" height="30">
 

Die Option "Erweitert" muss in diesem Beispiel nicht aktiviert werden, da wir einen einteiligen Forencode ohne Endtag erstellen. Mehrteilige Forencodes werden in Beispiel 2 behandelt. Die Priorität lassen Sie erst einmal auf 100 stehen und beachten die Einstellung nicht weiter. Die Priorität kommt erst zum Einsatz, wenn Forencodes miteinander verknüpft werden.

Sichern Sie Ihre Eingabe mit "Speichern".
Über "Bearbeiten der vorhandenen Forencodes" taucht nun Ihr hochgeladenes Bild auf, sofern alle Eingaben richtig gemacht wurden. Das Symbol der "geschlossenen Klammer" zu Beginn des Forencodes signalisiert den Typ, in diesem Beispiel also den einteiligen Forencode.

->

<A HREF="javascript:returnTag('[smile]')" onclick="document.getElementById('tab_smilies').style.display='none';"><img src="http://img.homepagemodules.de/smile.gif" alt="[smile]" border=0 width="15" height="15"></A>
 

Info: Dies ist der Code des 1. Gelben Smileys in Ihrem Smiley-Fenster.




Tipp: Kopieren Sie den Code mit STRG+C. Klicken sie in das Code Fenster, drücken STRG+F, fügen in das sich öffnende Suchfeld (FF links unten, IE separates Fenster) die kopierte Code-Zeile mit STRG+V ein und drücken ENTER. Der Mauszeiger sollte dann zur gesuchten Stelle springen.


Nun können Sie vor oder nach dieser Zeile Ihren Avatar platzieren. Den einteiligen Forencode haben Sie schon kopiert, Sie müssen nur den Platzhalter [meinAvatar] mit der eigenen Bezeichnung ersetzen, sowie Höhe und Breite der Grafik anpassen (height & width):

<A HREF="javascript:returnTag('[meinAvatar]')"onclick="document.getElementById('tab_smilies').style.display='none';"><img src="http://files.homepagemodules.de/b59262/a_11.png" width="30" height="30"></A>
 

Was hat es mit dem Code auf sich?

('[meinAvatar]') -> der Name Ihres Platzhalters / Forencodes
<img src="http://files.homepagemodules.de/b59262/a_11.png"> -> die Bildadresse, bei der die Grafik gespeichert ist
width="30" -> Breite der Grafik, 30 Pixel
height="30" -> Höhe der Grafik, 30 Pixel


Achten Sie darauf, dass Bilder die im Smiley Fenster integriert werden sollen, zwischen diese Zeilen kopiert werden:

<div id="tab_smilies" …>
Hier stehen die Smiley Codes + Ihr eigener Code
</div>
 

1.4 Zu guter Letzt: Speichern

Klicken Sie auf Speichern und Ihr Bild wird in das Smiley Fenster eingefügt:





Beispiel 2: Mehrteiliger Forencode - Schrift individuell formatieren

Im folgenden Beispiel erstellen wir mehrteiligen Forencode. Mehrere Style Eigenschaften wie Fett-Schrift, Schrift-Grösse, Schrift-Art werden "auf einen Klick" in einem Forencode vereint. Beim mehrteiligen Forencode kommt HTML mit Endtags zum Einsatz.

Der Name des Forencodes lautet:

[meinText]Mein Dicker Blauer Text[/meinText]
 

Vorschau: Grafische Ausgabe des formatierten Textes

[meinText]
 

Im zweiten Feld "Ersetze" direkt daneben den schließenden Endtag einsetzen, hier ist der Befehl "zu Ende".

[/meinText]
 

Im ersten Feld "Mit" setzen Sie Ihren HTML Code ein:

<p style="font-family:courier new; color:#35CCFF; font-size:20px">
 

Im Zweiten Feld "Mit" schließen Sie Ihren HTML Tag.

</p>
 

Leider können wir an dieser Stelle keinen HTML Einführungskurs geben - Aber beim genauen Hinsehen sind die Angaben evtl. schlüssig: Font-Family->Schriftart, Color->Schriftfarbe, Font-Size->Schriftgröße. Sie können natürlich in Ihren Tag so viel HTML reinpacken, wie Sie möchten.

Herzlichen Glückwunsch! Sie haben Ihren ersten, mehrteiligen Forencode erstellt. Um den Forencode im Anschluss in die Symbolbar zu integrieren, gehen Sie bitte wie in [anker]Abschnitt 1.3[/anker] beschrieben vor.



Fortgeschrittenen-Info: Die "drei Pünktchen" zwischen den Feldern sind eine Variable für die Eingabe der Nutzer. Der Forencode mit Anfangs- und End-Tag wird die Nutzereingabe umschließen. ->[meinText]Nutzereingabe[/meinText].


Tipp für Admins: Wenn Sie einen persönlichen Forencode erstellen möchten, auf den kein anderer Nutzer Zugriff hat: definieren Sie Forencode wie in den Beispielen beschrieben, aber integrieren Sie diesen nicht in die Symbol Bar! Der Forencode kann direkt in ein Eingabefeld geschrieben werden, z. B. [meinAvatar] Im Quelltext erscheint der BBCode nicht, dort wird der Forencode als HTML ausgegeben und kann somit auch nicht "aus Versehen" ausgelesen werden. Et voilà: Exklusive Admin Forencodes.



Beispiel 3 - Wir basteln einen Anker (Mehrteiliger Forencode)


"Anker" sind Links, die innerhalb eines Textes gesetzt werden, um flink von einer Stelle im Beitrag zu einer anderen zu springen und sich so lästiges Scrollen zu sparen. Für das Inhaltsverzeichnis, über welches Sie in diesem Beitrag direkt zu einzelnen Themenabschnitten steuern können, kamen Anker zum Einsatz.

Es gibt zwei Möglichkeiten, Anker zu definieren: 1. Indem Sie den Ankernamen durch eine Variable ersetzen- oder 2. Indem Sie den Ankernamen direkt beim Anlegen des Forencode zuweisen. Die 2. Variante eignet sich dabei für alle Anwender - ob Fortgeschritten oder Einsteiger. Die Variablen-Variante wird für fortgeschrittene Forenbetreiber empfohlen.

Bitte beachten Sie: Um von einem Ankerverweis zu einem Ankerziel navigieren zu können, müssen Sie dem Ziel als auch dem Verweis den gleichen Namen geben.



3.1 Anker mit Variablen für Fortgeschrittene


Schritt 1:
Forencodes definieren und dem Anker-Ziel einen Namen geben. Klicken Sie auf "Erweitert", da wir einen mehrteiligen Forencode mit Endtag erstellen.

Forencode 1 - Der Anker bekommt einen Namen

[ankername={{x}}][/ankername]
 

Ersetzen mit:

<a name="{{x}}"></a>
 

Priorität: 99

[ankerverweis={{y}}][/ankerverweis]
 

<a href="#{{y}}"></a>
 

Priorität: 100

[anker1][/anker1]
 

...und ersetzen den BBCode durch folgenden HTML-Code:

<a name="1"></a>
 

Schritt 2:
Speichern - auf Erweitert klicken - 2. Forencode anlegen. Dieser Link verweist später auf das Ankerziel.

[anker1_jump][/anker1_jump]
 

...und mit folgendem Code ersetzen:

<a href="#1"></a>