Icons

Icons






Iconbar 2.0
Smileys 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



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

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:

1
 
[grin]
 



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

1
 
<img src=\'https://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 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

Login
Activity Feed
rating rating
Mike48 hat sich bedankt!
Beitrag: Benutzerbilder optional ausblenden lassen
%usernames% hat sich bedankt!
forum_message forum_message
TripleM und 3 weitere haben 9 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Ok, das habe ich nicht mitbekommen das es schon zur Verfügung steht. Werde es testen.
forum_message forum_message
Nico1981 und 1 weitere haben 3 neue Beiträge im Thema Benutzerbilder optional ausblenden lassen geschrieben.
Danke, habe die neue Version installiert und es sieht jetzt alles so aus wie es soll!
rating rating
old-smokey hat sich bedankt!
Beitrag: Forum Zugriff nicht sicher
%usernames% hat sich bedankt!
rating rating
Nico1981 hat sich bedankt!
Beitrag: Benutzerbilder optional ausblenden lassen
%usernames% hat sich bedankt!
rating rating
%usernames% hat sich bedankt!
rating rating
%usernames% hat sich bedankt!
rating rating
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar und 1 weitere haben 2 neue Beiträge im Thema Forum Zugriff nicht sicher geschrieben.
Zitat von old-smokey im Beitrag #2Nachtrag, in der Admin zu sehen, https ist deaktiviert, obwohl weder ich noch mein Co-Admin daran was geändert habenDas wurde ziemlich sicher durch einen Fehler in einem unserer Domain-Wartungs-Skripts verursacht. Johannes ist auf der Fehlersuche.
forum_message forum_message
Habe eine ältere Kopie gefunden und aktiviert. Jetzt ist wieder fast alles iO. Muss ein paar Einträge ergänzen. Danke für die Geduld und Hinweise.Mir dem X6 werde ich im Testforum nochmal bearbeiten. Also auch hier das Problem bearbeitet und abgehackt.
rating rating
River hat sich bedankt!
Beitrag: neues Admin
%usernames% hat sich bedankt!
rating rating
River und 2 weitere haben sich bedankt!
Beitrag: neues Admin
%usernames% haben sich bedankt!
rating rating
River hat sich bedankt!
Beitrag: neues Admin
%usernames% hat sich bedankt!
forum_message forum_message
Mike48 und 5 weitere haben 6 neue Beiträge im Thema neues Admin geschrieben.
Zitat von Uschi im Beitrag #24also beim alten Admingehe ich über Farben Einstellungenzur Hintergrundkopfzeile und lade dort dann das bereits vorbereitete Bild hochspeichern und fertig(da kann ich auch das Hintergrundbild hoch laden)Die gezeigte Einstellung im Beitrag #24 ist V3 (Gaia) spezifisch un...
forum_topic forum_topic
old-smokey hat das Thema Forum Zugriff nicht sicher erstellt
@Ingmar Es kam eben in unserem Forum die Frage auf, weshalb plötzlich der Zugriff auf das Forum als nicht sicher angezeigt wird. Das ist seit irgendwann heute tatsächlich der Fall, egal mit welchem Browser.Ist ein Sicherheitszertifikat abgelaufen oder ist das durch ein Update von euch passiert? Auf...
rating rating
Mike48 hat sich bedankt!
Beitrag: In einem Album werden Bilder nicht angezeigt.
%usernames% hat sich bedankt!
rating rating
Franz-Jupp hat sich bedankt!
Beitrag: neues Admin
%usernames% hat sich bedankt!
forum_message forum_message
Lebenskünstler hat einen neuen Beitrag im Thema Kommentare in der Bildergalerie - Editiermöglichkeit geschrieben.
danke für die sachliche Erläuterung. Somit sind die Gründe auch nachvollziehbar.
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema In einem Album werden Bilder nicht angezeigt. geschrieben.
Das sieht so aus, als ob es dort einen Fehler bei der Erzeugung der Vorschaugrafiken gab. Jetzt liegen für die in der Alben-Ansicht gezeigten Grafiken fehlerhafte Bilder im Cache. Das sollte sich von alleine beheben, sobald der Cache sich erneuert.
forum_message forum_message
Damon Salvatore und 1 weitere haben 2 neue Beiträge im Thema Header geschrieben.
danke für die hilfe
rating rating
Damon Salvatore hat sich bedankt!
Beitrag: Header
%usernames% hat sich bedankt!
rating rating
Nico1981 hat sich bedankt!
Beitrag: Benutzerbilder optional ausblenden lassen
%usernames% hat sich bedankt!
forum_message forum_message
Mike48 hat 2 neue Beiträge im Thema Benutzerbilder optional ausblenden lassen geschrieben.
Hallo @Nico1981 ich habe das Plugin gefunden dass ich mal veröffentlichen wollte. Ob es vollständig fertig ist kann ich nicht sagen. Ich kann dir davon aber eine Version zum testen schicken. Diese Version kommt aber von einem anderen Forum und hat dementsprechend eine ander id und ist kein Update. M...
rating rating
Nico1981 hat sich bedankt!
Beitrag: Benutzerbilder optional ausblenden lassen
%usernames% hat sich bedankt!
forum_message forum_message
Nico1981 und 1 weitere haben 2 neue Beiträge im Thema Xobor APP bald für jedes Forum - Jetzt die APP hier Beta testen geschrieben.
Mit dem Xobor-Logo lässt sich die App unter Android installieren - allerdings erfolgen trotz Aktivierung keine Pushnachrichten, wenn es im AF Neuigkeiten oder eine neue PN gibt.Habe die App jetzt erstmal wieder deaktiviert und würde sie erst aktivieren, wenn sie korrekt mit Pushnachrichten und eigen...
rating rating
%usernames% hat sich bedankt!
forum_topic forum_topic
Damon Salvatore hat das Thema Header erstellt
Guten Morgen, Ich habe eine frage ? wie schaffen das im meine forum bei header rechts der text ganz lesbar ist? Es ist eine Code , und ich benutzen das , Gaia Template (v3) Und meine zweite Frage `wäre ? bei Team unten gif der text nicht so zusammengepresst aussieht.
forum_message forum_message
Gabriella hat einen neuen Beitrag im Thema Frage zum Handy geschrieben.
Zitat von Mike48 im Beitrag #11Ich würde eher sagen, der DNS Fehler liegt nicht am Mailprovider sondern an den Einstellungen im Handy.Da bin ich anderer Meinung, weil es an meinem Handy eine normale Funktion gibt, die sich EMail nennt. Dort kann man dann seine Email zum jeweiligen Provider abrufen. ...
rating rating
Gabriella hat sich bedankt!
Beitrag: Seitensprünge bei Suchtreffern funktionieren nicht.
%usernames% hat sich bedankt!
forum_message forum_message
creator hat einen neuen Beitrag im Thema Seitensprünge bei Suchtreffern funktionieren nicht. geschrieben.
Den Fehler habe ich bereits unter Suche im V6: Pagination sprint nicht zur richtigen Seite gemeldet. Auch Mitgliederliste ist noch offen.
forum_topic forum_topic
Foren-Nummer 641307V6 HPMBei umfangreichen Ergebnissen der Forensuche gibt es unten den Navigationsbereich zum schnellen Seitenwechsel.Dort funktioniert nur "1 Seite vor" und "1 Seite zurück". Die 3 anderen Funktionen "1. Seite", "letzte Seite" und "direkte Seiteneingabe" führen zu fehlerhaften Sprü...
forum_message forum_message
Uschi hat einen neuen Beitrag im Thema neues Admin geschrieben.
zurück in das alte Admin
forum_message forum_message
Nico1981 hat einen neuen Beitrag im Thema Benutzerbilder optional ausblenden lassen geschrieben.
Hallo Mike!Wie ist denn der Status bzgl. einer finalen Version für alle Foren?Ich frage deshalb, weil bei meiner Testversion ja noch der Fehler besteht, dass die Option zum Einstellen auch bei den Benachrichtigungseinstellungen und bei den Einstellungen für die Pushnachrichten erscheint, obwohl sie ...
rsummary rsummary
old-smokey und 1 weitere haben 5 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
River und 2 weitere haben 3 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
Mike48 und 1 weitere haben 2 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
Damon Salvatore und 1 weitere haben 2 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
Wer ist Online?
2 Mitglieder und 19 Gäste sind Online
Besucher Statistiken
21 Aktive User
2 Mitglieder und 19 Gäste sind Online:
Ingmar, Kipper-Spedition

Heute waren Online
Ingmar, kacz, Nico1981

Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)

Besucherzähler
Heute waren 155 Gäste und 3 Mitglieder, gestern 1571 Gäste und 38 Mitglieder online.

Statistiken
Themen 41406
Beiträge 302311
Mitglieder 12.392
Forum empfehlen