Iconbar in Schnellantwort einbauen per Plugin

04.01.2016 11:31

Hier Erkläre ich euch wie man in die Schnellantwort eine Iconbar einbauen kann mit Hilfe eines Plugins.
Wolfgang hat es bereits in seinen Forum als Templates Änderung vorgestellt.
Ich habe mir nun überlegt wie kann man das Ohne Templates Änderung machen. Der einbau ist ebenso Einfach als wenn man es als Templates Änderung macht.
Großen Dank an Wolfgang der den Code in seinen Forum zur Verfügung gestellt hat.

Hier könnt ihr das Ergebnis Sehen wie es
später aussieht.

Nun hier eine Stück für Stück Anleitung für den Einbau ohne das Templates anzufassen.

Wir Fangen nun an ein Plugin zu erstellen und gehen dazu unter Admin/Plugin/Plugin Entwicklung.

Dort gehen wir auf "Neues Plugin erstellen"

Dann geben wir dem Plugin eine ID und einen Namen

Dann gehen wir auf "Plugin anlegen" und kommen in die Plugin Entwicklung.

Nun müssen wir ein neues Element Erstellen in dem wir zum Späteren Zeitpunkt unseren Code sowie die Variablen Einbauen können.
Dazu scrollen wir weiter nach unten und gehen auf "Neues Element Erstellen"

Und als nächstes auf "Templates Element"

Es öffnet sich nun ein Bereich in dem wir unseren Element erstellen.

Diese füllen wir nun wie folgt aus:

geht nun auf Hinzufügen und ihr kommt in dem Bereich wo der Code eingefügt werden kann.

In das Feld können wir den von Wolfgang in seinen Forum zu Verfügung gestellten Code einfügen der wie folgt lautet:

Den Code findet ihr in Wolfgang sein Forum

Geht nun auf Speichern. Und anschließend auf Zurück.

Nun habt ihr das Plugin so weit schon fertig. Es kann nun je nach euren Einstellungen noch sein das ihr die beiden Icons noch von der Position anpassen müsst. In meinen Fall habe ich das im Code bereits gemacht. Die Icons sollten an der Position sichtbar sein:

Ist das nicht der Fall könnt ihr die Position im Code auf euer Forum anpassen an Folgender Stelle:

Für den Smileys

1
2
3
4
 
<div class="iconbar_main" style="display: inline;">
<div style="position:absolute;left:200px;margin-top:5px;z-index:2;" onMouseOut="hide_tab('tab_smilies')" onmouseover="show_tab('tab_smilies');this.style.cursor='pointer';">
<img src="http://www.bilder-hochladen.net/files/1tys-rb-1689.png" alt="[smile]" border=0 title="Smileys" width="18" height="18">
<div id="tab_smilies" style="display: none; position: absolute; left:-30px; background-color: white; padding:5px; width:320px; border:1px solid #777777;border-radius:5px;">
 

Und für die Textbearbeitung

1
2
3
4
 
<div class="iconbar_main" style="display: inline;">
<div style="position:absolute;left:225px;margin-top:5px;z-index:3;" onMouseOut="hide_tab('tab_format')" onmouseover="show_tab('tab_format');this.style.cursor='pointer';">
<img src="http://www.bilder-hochladen.net/files/kr03-13-a577.png" alt="" border=0 width="17" height="17">
<div id="tab_format" style="display: none; position: absolute; left:-20px; background-color: white; padding:5px; width:200px; border:1px solid #777777;border-radius:5px;">
 

Und somit sollte es bei Richtiger Positionierung So aussehen wie in diesem Bild

Viel Spaß beim Nachbauen.

PS. Ihr könnt die Smileys natürlich mit euren Bilder Befüllen. Was ich auch jeden Rate. Denn so habt ihr die Bilder direkt in eurem Forum und nicht über Wolfgang sein von wo sie ja erst geladen werden müssen.

Dazu hier mal die Bilder

https://addpics.com/share/b9e22/slide

LG
TripleM