Iconbar 2.0Smileys mit wenigen Mausklicks in die Symbolbar übernehmen und per Drag and Drop an die richtige Stelle verschieben - komfortabler geht es kaum. Mit dem neuen Zip-Import können auch große Iconsets einfach und schnell in das Forum übernommen werden. Dieses Tutorial soll euch dabei helfen, das Maximum aus der neuen Symbolbar herauszuholen.
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
EinleitungForencodes 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
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:
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.
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 EinstellungenUnter 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-CodeEin 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-CodesForen-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: [LIN
K={{url}}]...[/L
INK]
mit: <a hr
ef="{{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 EinstellungenNeben der Einstellung für die Sichtbarkeit des Codes für verschiedene Benutzergruppen, finden sich bei den Foren Codes zwei weitere Optionen:
PrioritätDie 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-FunktionUm 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 werdenEinfache 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 davon1.3 TextbausteinTextbausteine 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 GruppeEin 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 EinstellungenNeben 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 ElementeDies 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. [xob
or][/xob
or]. 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 HTMLAuch 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.
2. - Anpassung2.1 Drag & DropAlle 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 
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öschenDrücken Sie auf das
löschen-icon 
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-ImportDer 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 VorschauIn diesem Abschnitt sehen Sie immer eine aktuelle Vorschau auf die Symbolbar - so wie sie auch im Forum angezeigt wird.
Screenshot Preview
5. - Beispiele5.1 Hintergrundfarbe einer Gruppe ändernZiel: 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-Bausteon 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
22.12.2009 17:44
Hilfe zum Xobor-Blog
Sonstige Verbesserungen mit dem Update
Weitere Infos zur Beta Phase
Hinweis
Besucher
Forum Statistiken
Foren Chat
1