Icons

Inhalt


Einleitung
1. Elemente in der neuen Symbolbar
1.1 Smiley
1.2 Foren-Codes
1.3 Textbaustein
1.4 Gruppe
1.5 HTML-Baustein

2. Anpassung
2.1 Drag & Drop
2.2 Bearbeiten
2.3 Löschen

3. Zip-Import

4. Live-Vorschau

5. Beispiele
5.1 Hintergrundfarbe einer Gruppe ändern



Einleitung
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 ->

Grafische Ausgabe: Mit Forencode formatierter Text

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:

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

*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.

1. - Elemente der neuen Symbolbar

Es gibt 5 verschiedene Element-Typen, die der Symbolbar hinzugefügt werden können. Diese werden im Folgenden genauer erläutert:

1.1 Smileys

Die wohl häufigste Art des Foren-Codes ist ein Smiley. Hier wird der angegebene code einfach durch eine Grafik ersetzt:

z.B Beispiel: [grin]
wird zu <img src=\'http://img.homepagemodules.de/grin.gif\'>
und das wiederum wird dann so angezeigt:

Einen Smiley anzulegen ist mit der neuen Symbolbar kinderleicht. Sie müssen lediglich einen Namen angeben (z.B. grin) und eine Grafik für den Smiley festlegen (z.B <img src=\'http://img.homepagemodules.de/grin.gif\'> ).
Nach einem Klick auf speichern wird der Smileys automatisch in die Symbolbar übernommen.

Es gibt keine Begrenzung für die Anzahl oder die Größe der verwendeten Smileys - bedenken Sie jedoch, dass die Symbolbar durch eine zu hohe Anzahl an Smileys auch schnell unübersichtlich werden kann.

Smiley [grin]


Erweiterte Einstellungen
Unter dem Link weitere Einstellungen können Benutzergruppen festgelegt werden, für die der Smiley nicht in der Symbolbar angezeigt werden soll.
Wie auch im Menüpunkt Navigation betrifft diese Einstellung nur die Anzeige des Smileys. Gibt ein Mitglied den entsprechenden Tag direkt ein, wird dieser trotzdem durch den korrekten Smiley ersetzt.

1.2 Foren-Code
Ein Smiley ist ein ganz spezieller Foren-Code, bei dem immer ein Tag durch eine Grafik ersetzt wird.
Häufig kommt es jedoch vor, dass man über die Symbolbar verschiedene Optionen zur Formatierung des Inhaltes anbieten will. Diese können über die Foren-Codes realisiert werden.

Ein Forencode besteht (fast) immer aus 3 Teilen - dem Start-Tag, dem Inhalt, und dem End-Tag:
Ein einfaches Beispiel ist z.B. der Foren-Code "fett schreiben"

[b]Ich bin fett geschrieben[/b]
Start-Tag: [b]
Inhalt: Ich bin fett geschrieben
End-Tag: [/b]

Die [b] und [/b]-Tags werden intern durch die HTML-Tags <b> und </b> ersetzt.
Der Screenshot zeigt die Definition des [b]-Tags in der Administration.
[b]-Tag


fortgeschrittene Foren-Codes
Foren-Codes haben das Potenzial, nahezu jede HTML-Anweisung im Forum zu ermöglichen. Um maximale Flexibilität zu erreichen, können beliebig viele eigene Variablen verwendet werden.
Variablen werden durch 2 geschweifte Klammern gekennzeichnet ({{varname}}), als Variablenname sind nur alphabetische Werte (a - z) zugelassen. Der Name {{main}} ist außerdem schon vergeben für die Hauptbenutzereingabe (...).

Ein Beispiel wäre:
Ersetze: [LINK={{url}}]...[/LINK]
mit: <a href="{{url}}">...</a>.

Es können beliebig viele Variablen verwendet werden, in der ersetze Zeile, darf aber sinnvollerweise jede Variable nur einmal vorkommen.
Beispiel Forencode mit Variablen



Erweiterte Einstellungen
Neben der Einstellung für die Sichtbarkeit des Codes für verschiedene Benutzergruppen, finden sich bei den Foren Codes zwei weitere Optionen:
Priorität
Die Priorität bestimmt die Reihenfolge, in der die Ersetzungen ausgeführt werden. Für die Reihenfolge kann ein Wert zwischen 0 und 100 angegeben werden. Codes mit einem kleineren Wert werden zuerst umgewandelt. Dies wird bbenötigt, um abhängige Ersetzungen realisieren zu können (zum Beispiel um HTML <table>-Elemente nachzubilden.)

JS-Funktion
Um wirklich jeden Anwendungsfall zu ermöglichen, kann optional eine Javascript-Funktion angegeben werden, die beim Klick auf das Icon in der Symbolbar ausgeführt wird. So kann man z.B. nach Klick auf das Icon für "Video einfügen" eine Javascript-Abfrage nach der Videoadresse ausführen und dann den fertigen Tag in das Textfeld übertragen.
Wichtig: An dieser Stelle wird nur der Aufruf der Javascript-Funktion angegeben (also z.B. insertVideoTag()). Wird eine eigene Javascript-Funktion verwendet, muss diese in einem HTML-Element definiert werden

Einfache Foren-Codes
Über einen Klick auf die Schaltfläche erweiterten Foren-Code ein-/ausblenden kann ein einfacher Forencode erstellt werden. Ein einfacher Forencode besteht nur aus einem Tag, der durch etwas anderes (meist ein HTML-Tag) ersetzt wird. Alle Smileys sind z.B. einfache Forencodes. Ein anderes Beispiel wäre [hr], das durch <hr/> ersetzt wird.
Beispiel einfacher Forencode


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


1.3 Textbaustein
Textbausteine bieten eine einfache Möglichkeit, häufig verwendete Texte über die Symbolbar einzubinden.
Legen Sie dazu einfach einen Text fest, der dann per Klick in den Beitrag übernommen wird.

In diesem Beispiel wird keine Grafik angegeben. In diesem Fall erscheint in der Symbolbar der Name des Elements (Update)
Beispiel Textbaustein


1.4 Gruppe
Ein Gruppen-Element ist kein eigener Foren-Code. Vielmehr können andere Elemente per Drag&Drop in einer Gruppe zusammengefasst werden. Fährt ein Mitglied mit der Maus über ein solches Gruppen-Icon, wird ein Feld mit allen enthaltenen Elementen angezeigt (dropdown). Gruppen bieten eine komfortable Möglichkeit, auch Iconbars mit vielen Elementen noch übersichtlich zu gestalten. So können z.B. Smileys oder auch Formatierungen thematisch geordnet werden (z.B. Weihnachts-Smileys, Farben oder auch Schriften).

Gruppen Screenshot


erweiterte Einstellungen
Neben den Einstellungen zur Sichtbarkeit für verschiedene Benutzergruppen findet sich hier noch die Checkbox diese Gruppe nicht anzeigen. Wird diese angewählt, wird die Gruppe und alle enthaltenen Icons nicht in der Iconbar angezeigt. Auf diese Weise lassen sich Icons kurzfristig ein- bzw. ausblenden, ohne dass es nötig wäre diese zu löschen oder neu anzulegen.

Nicht angezeigte Elemente
Dies ist eine besondere Gruppe, die in jeder Iconbar enthalten ist. Elemente in dieser Gruppe werden - wie der Name schon sagt - nicht in der Symbolbar angezeigt. Sie dient als Platzhalter für Foren-Codes, die zwar ausgewertet werden, aber nicht in der Symbolbar stehen sollen. Ein Beispiel für einen solchen Code hier im Forum wäre z.B. [xobor][/xobor]. Dieser Code ist zwar nicht über die Symbolbar abrufbar - wird aber trotzdem ausgewertet, wenn er in einem Textfeld verwendet wird (Text innerhalb dieses Tags erscheint im gewohnten Xobor-Blau). Die Gruppe nicht angezeigte Elemente kann nicht bearbeitet oder gelöscht werden.

nicht angezeigte Elemente



1.5 HTML
Auch ein HTML-Element ist kein Foren-Code, sondern dient lediglich zur einfacheren Gestaltung der Iconbar.
Mit einem HTML-Element haben Sie die Möglichkeit, jeden noch so individuellen Design-Wunsch in ihrer Symbolbar zu realisieren. HTML-Elemente bestehen aus HTML oder Javascript Code. Dieser Code wird an der Stelle, an der das Element positioniert ist, direkt in den Quelltext der Symbolbar übernommen.

Der Screenshot zeigt die beiden HTML-Elemente blau_start und blau_end. Alle Elemente, die zwischen diesen beiden HTML-Elementen angeordnet werden, erhalten einen blauen Hintergrund.

Beispiel HTML-Elemente



2. - Anpassung

2.1 Drag & Drop

Alle Elemente der Symbolbar können per Drag&Drop an die gewünschte Stelle verschoben werden. Gruppen können allerdings nicht innerhalb einer anderen Gruppe abgelegt werden. Wenn Sie ein Element verschieben, wird die neue Reihenfolge automatisch gespeichert und die Live-Vorschau aktualisiert.

Screenshot Drag&Drop


2.2 Bearbeiten

Über das bearbeiten-icon http://105.achille.miranus.eu/admin/pencil.png haben Sie die Möglichkeit, ein einmal angelegtes Element im Nachhinein zu verändern. Sie könne alle Werte anpassen, lediglich der Typ des Elementes (also Smiley, Gruppe , Foren-Code etc.) lässt sich nicht mehr ändern.

2.3 Löschen
Drücken Sie auf das löschen-icon http://105.achille.miranus.eu/admin/cross-script.png um ein Element zu entfernen. Wenn Sie eine Gruppe löschen, werden darin enthaltene Elemente ebenfalls entfernt.
Achtung: Das Löschen eines Elementes lässt sich nicht Rückgängig machen. Sie können zwar jederzeit auf die Standard-Symbolbar zurücksetzen, eigene Elemente lassen sich aber nicht wiederherstellen.

3. - Zip-Import
Der Zip-Import ermöglicht das erstellen von beliebig vielen Smileys in einem Rutsch. Sie benötigen lediglich ein Zip-Archiv, das die gewünschten Bilddateien enthält.
Beim Upload wird automatisch für jedes Bild im Archiv ein Smiley-Elements mit dem Bildnamen erstellt. Außerdem wird eine Gruppe mit dem Namen des Archivs angelegt, die dann die neuen Smileys enthält.
Auf diese lassen sich auch große Iconsets komfortabel in die Symbolbar übertragen.

Screenshot Zip-Import


4 - Live Vorschau
In diesem Abschnitt sehen Sie immer eine aktuelle Vorschau auf die Symbolbar - so wie sie auch im Forum angezeigt wird.

Screenshot Preview


5. - Beispiele

5.1 Hintergrundfarbe einer Gruppe ändern

Ziel: Die Hintergrundfarbe für ein Untermenü soll geändert werden.

Lösung: Wir erstellen 2 HTML-Elemente und platzieren diese per Drag&Drop so, dass alle zwischenliegenden Elemente einen Hintergrund zugewiesen bekommen.

Fallbeispiel: Das Untermenü "Farben" soll grün Hinterlegt werden.

1) HTML-Baustein 1 erstellen: Der Baustein öffnet eine <div> und weist dieser den grünen Hintergrund zu. Die margin-Eigenschaft sorgt dafür, dass die ganze Fläche grün gefüllt wird und nicht links ein kleiner Spalt in der Ursprungsfarbe bleibt.

Baustein gruen_start


2) Der zweite HTML-Baustein schließt die <div>
Baustein gruen_end


3) Schließlich müssen die Bausteine nur noch richtig positioniert werden:
Drag & Drop


4) Ergebnis:
Farben mit grünem Hintergrund