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
forum_message forum_message
Mike48 hat einen neuen Beitrag im Thema Farbe der Benutzergruppen geschrieben.
Bei mir funktioniert es richtig. In der neue und auch in der alten Admin wie gehabt. Die Farben werden auch gespeichert. Farbe auswählen und mit dem unten rechts den ColorPicker schließen. Dann speichern.
forum_topic forum_topic
Gemshorn hat das Thema Farbe der Benutzergruppen erstellt
Hallo,gehe ich im Adminbereich zu "Benutzer - Gruppen" und möchte dort die Farben der unterschiedlichen Gruppen bearbeiten, so geht das seit heute nicht mehr. Es öffnet sich beim Klicken auf die aktuelle Farbe zwar die Farbauswahl, aber dort lässt sich nichts verändern. Zudem erscheinen die Werte in...
forum_message forum_message
Gemshorn hat einen neuen Beitrag im Thema Palettentitel bearbeiten geschrieben.
Verstehe. Umso wichtiger wird die Wahl eines guten, selbsterklärenden Icons. Die "Farbpalette" ist eine gute Wahl.
rating rating
Gemshorn hat sich bedankt!
Beitrag: Palettentitel bearbeiten
%usernames% hat sich bedankt!
rating rating
Mike48 hat sich bedankt!
Beitrag: Palettentitel bearbeiten
%usernames% hat sich bedankt!
rating rating
Portaljäger hat sich bedankt!
Beitrag: V6 - Kein Mail Benachrichtung bei Mitglied sperren
%usernames% hat sich bedankt!
forum_message forum_message
l2otbart_57 hat einen neuen Beitrag im Thema Palettentitel bearbeiten geschrieben.
Zitat von Gemshorn im Beitrag #13Anders sei es beim Hovern des Icons in der Iconbardas Problem beim Hovern ist, mobil Nutzer sehen davon nix, wenn keine Maus vorhanden ist.Gerade beim V6 sollte die Handynutzung vorrangig betrachtet werden
forum_message forum_message
Gemshorn hat einen neuen Beitrag im Thema Palettentitel bearbeiten geschrieben.
Danke, Ingmar. Sicher eine gute Lösung.Allerdings denke ich, der Gruppenname ist eigentlich GAR nicht notwendig in der Elementansicht. Anders sei es beim Hovern des Icons in der Iconbar. Aber beim aufgepoppten Auswahlmenü reichten im Grunde auch die darin enthaltenen Elemente.
rating rating
Gemshorn hat sich bedankt!
Beitrag: Palettentitel bearbeiten
%usernames% hat sich bedankt!
forum_message forum_message
spotter46 hat einen neuen Beitrag im Thema manchmal wird die alte Admin-Ansicht angezeigt geschrieben.
Es heißt ja immer, bei Bug-Meldungen reagiert der Support schneller, hier scheint's eine Ausnahme zu geben.Gerade wieder passiert.Aus der Mitgliederliste ein Profil aufgerufen, auf "Profil bearbeiten" geklickt.Automatisch werde ich auf das Profil im Adminbereich geleitet.Profil bearbeitet, speichern...
forum_message forum_message
wildflower hat einen neuen Beitrag im Thema Premium Tarif überzahlt | Support gibt keine Antwort geschrieben.
Hallo nochmal,das Problem besteht noch immer und inzwischen ist unsere Administration auch gesperrt, obwohl ich um zügige Bearbeitung gebeten habe. Es wird behauptet, dass keine Zahlung doppelt einging und auf einen Screenshot der das belegt, wird wieder nicht reagiert. Es ist bald 1 Monat her, dass...
forum_message forum_message
Monika Bodeguero hat einen neuen Beitrag im Thema Hat sich seit heute irgendetwas zum Thema Werbeanzeigen verändert? geschrieben.
In den letzten Jahren sind immer mehr Foren-User zu Facebook abgewandert, und die wenigen, die geblieben sind, beklagen sich zunehmend darüber, dass sie die Themen nicht mehr erreichen können, wenn sie ihr iPhone oder Smartphone benutzen. Mir ist das selbst erst aufgefallen, als ich statt mit dem No...
rating rating
Gabriella und 3 weitere haben sich bedankt!
Beitrag: Palettentitel bearbeiten
%usernames% haben sich bedankt!
rating rating
Lady of the light hat sich bedankt!
Beitrag: Hilfe, ich habe alles vergessen
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema Palettentitel bearbeiten geschrieben.
Zitat von l2otbart_57 im Beitrag #11Doch leider wir bei diesem Text "Icon einfügen" keine Sprache berücksichtigt.Das ist richtig. Da fehlte noch eine Sprachvariable.Zitat von Mike48 im Beitrag #7Die Icons sind in einer Gruppe.Zitat von Gemshorn im Beitrag #8Es sind aber keine Icons, sondern es ist e...
forum_message forum_message
Lonny Fischer hat einen neuen Beitrag im Thema Hilfe, ich habe alles vergessen geschrieben.
Ich habe Hilfe bekommen und bin echt glücklich darüber.Danke !
forum_message forum_message
l2otbart_57 hat einen neuen Beitrag im Thema Palettentitel bearbeiten geschrieben.
hatte auch gedacht, man brauchte nur ein Sprachvariable ändern.Doch leider wir bei diesem Text "Icon einfügen" keine Sprache berücksichtigt.Auch in der Templateentwicklung hat man keinen Zugriff auf die {{iconbar}}, obwohl dort der richtige Ansatzpunkt wäre.nun bleibt nur ein js-Patch in der Iconbar...
forum_message forum_message
Mike48 und 1 weitere haben 6 neue Beiträge im Thema Limit für Freischaltungen geschrieben.
Die Mail Vorlagen gibt es ja schon. Es muss nur im richtigen Moment die passende Mail verschickt werden.
rating rating
Wolfgang hat sich bedankt!
Beitrag: Limit für Freischaltungen
%usernames% hat sich bedankt!
rating rating
Wolfgang hat sich bedankt!
Beitrag: Limit für Freischaltungen
%usernames% hat sich bedankt!
rating rating
Mike48 hat sich bedankt!
Beitrag: Neue Mitglieder - Aktivierung nicht eingestellt.
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar und 1 weitere haben 3 neue Beiträge im Thema Neue Mitglieder - Aktivierung nicht eingestellt. geschrieben.
Zitat von Mike48 im Beitrag #7Ich glaube, es waren Foren, wo ich zum testen das Template/Design schon mal öfter wechseleDu solltest das Design so oft wechseln können wie du möchtest. Dabei dürfen natürlich trotzdem keine Einstellungen verloren gehen Falls du nochmal so einen Fall hast gerne melden.
forum_message forum_message
Ingmar und 1 weitere haben 2 neue Beiträge im Thema Barrierefreiheitsstärkungsgesetz geschrieben.
Ich würde auch sagen euch als Foren-Admins betrifft das erst mal nicht.
forum_message forum_message
Lonny Fischer hat einen neuen Beitrag im Thema Hilfe, ich habe alles vergessen geschrieben.
Danke, da schaue ich mal nach...
forum_message forum_message
Gemshorn und 2 weitere haben 9 neue Beiträge im Thema Palettentitel bearbeiten geschrieben.
Bei Fett, Italic usw. steht ja noch größerer Unsinn im Infotext (das ist aber nicht die gleiche Problematik wie in den aufpoppenden Auswahlfeldern).
rating rating
Gemshorn hat sich bedankt!
Beitrag: Palettentitel bearbeiten
%usernames% hat sich bedankt!
forum_message forum_message
spotter46 hat einen neuen Beitrag im Thema SpendenBox geschrieben.
Bitte die neue Admin-Oberfläche nutzen, bei der alten klappt es nicht.Admin > Premium > Forenkonto Falls aber schon in der neuen Admin-Oberfläche unterwegs, dann die erwähnte eigene Seite deaktivieren.
forum_message forum_message
Gemshorn und 1 weitere haben 2 neue Beiträge im Thema Skript "Header" zweckentfremden geschrieben.
Ja, das ist das Richtige, aber:Lässt sich das auch als Auswahlmenü wie bei den Headers durch einfache Zahleneingabe realisieren?
rating rating
Gemshorn hat sich bedankt!
Beitrag: Skript "Header" zweckentfremden
%usernames% hat sich bedankt!
forum_topic forum_topic
seelenwind hat das Thema SpendenBox erstellt
Irgendwie bekomme ich es nicht hin die Spendenbox einzustellen. Ich lande immer auf meine selbst erstellts Spendenkonto, erstellt auf eigene Seiten. Ich wollte die Spendenbox vom eingestelten System haben um zu wissen was gespendet wurde. Leider landet es immer auf mein Paypalkonto, wo es ja dann ...
rsummary rsummary
Gemshorn und 2 weitere haben 3 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
Gabriella und 4 weitere haben 2 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
Wolfgang und 1 weitere haben 3 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
Wer ist Online?
1 Mitglied und 52 Gäste sind Online
Besucher Statistiken
53 Aktive User
1 Mitglied und 52 Gäste sind Online:
Ingmar

Heute waren Online
Bussinchen, Ingmar, Johannes, Moby, nobody

Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)

Besucherzähler
Heute waren 712 Gäste und 5 Mitglieder, gestern 6956 Gäste und 29 Mitglieder online.

Statistiken
Themen 42003
Beiträge 307599
Mitglieder 12.582
Forum empfehlen