Was soll das Plugin können?

• Ich will die Avatare in der Mitgliederliste für bestimmte Nutzergruppen komplett ausblenden.
• Auch für Nutzergruppen, die Avatare sehen dürfen, sollen die Bilder zunächst ausgeblendet bleiben.
• Beim Überfahren mit der Maus sollen die Avatare sichtbar werden.

• ein Template-Element für die 'Mitgliederliste' (oder für 'Wer ist online?')
• Eine Gruppenrechts-Variable

1. Ich muss die Avatare ausblenden.
2. Dann muss ich sie wieder einblenden.
3. Dann stelle ich sie auf transparent.
4. Und schließlich sage ich, dass sie beim Hovern nicht transparent sein sollen.

1. Schritt - ich lege mir ein eigenes Plugin an

... oder vergessen hast, wie es geht.

Gehe in die 'Administration' deines Forums auf den Reiter 'Plugins'.
Dort siehst du den PluginStore und auch den Reiter 'Plugin-Entwicklung'.
Den klickst du an.



Nun klickst du auf 'Neues Plugin erstellen'.



Nun musst du deinem Plugin eine ID und einen Namen geben.

Die ID muss eindeutigDie ID´s werden im Pluginsystem Xobor-weit gespeichert und sorgen dafür, dass die Plugins angesprochen und verwaltet werden können.
Jedes Plugin benötigt eine solche eigene Zeichenfolge, mit der es eindeutig identifiziert werden kann, ähnlich wie eine Konto- oder Personalausweisnummer.
Deshalb erscheint die Meldung, dass diese ID schon vergeben ist, wenn man eine eingibt, die es schon gibt. Man nimmt dann einfach eine andere ID. sein.



Der Name ist der Titel des Plugins, wie er später auch im Store erscheinen würde.
Der Name lässt sich jederzeit ändern, auch wenn alles schon fertig ist.

Also wenn nun ID und Name eingetragen sind, klicke auf 'Plugin anlegen'.



Und schon hast du ein eigenes Plugin erstellt. Es ist zwar noch leer und tut nix, aber es ist schon mal in der Liste deiner Plugins in der Pluginentwicklung zu sehen.

2. Schritt - ich lege mir ein Template-Element an

Du sagst deinem Plugin nun, wo du es ausführen möchtest.

Dein Code soll in der 'Mitgliederliste' oder in 'Wer ist online?' ausgeführt werden.
Also lege ein solches Template-Element an.

... oder du vergessen hast, wie es geht.

Du klickst in deinem Plugin auf 'Neues Element erstellen'



In der Auswahl, die dann erscheint, klickst du auf 'Template Element'.



In der nun erscheinenden Tabelle wählst du in der Option 'Template' das Element 'Mitglieder Liste' (oder 'Wer ist online?') aus.
Darunter setzt du den Punkt auf 'Header'.



Und schließlich klickst du auf 'Hinzufügen'.

Schwub - und schon bist du im Plugineditor, der nur darauf wartet, dass du deinen Code hinein schreibst.

3. Schritt - ich schreibe die Anweisungen in den Code, die mein Plugin ausführen soll

Zunächst brauchst du den Selektor für die Avatarbildchen - .c_r_content2Das ist der Klassenname für den Bereich, in dem unter anderem die Avatare liegen. imgDas sagt, dass es um die Bilder geht (Images), denn dieser Bereich beherbergt ja noch mehr Elemente.

1. ausblenden - display: none = nicht anzeigen
2. einblenden - display: block = anzeigen
3. transparent darstellen - opacity: 0.0 = komplett Transparent
   und filter: alpha(opacity=0) Extrawurst für iE8 und älter
4. nicht transparent darstellen - opacity: 1.0 = überhaupt nicht transparent
   und filter: alpha(opacity=100) Extrawurst für iE8 und älter

<style>
	.c_r_content2 img {display: none;}
	.c_r_content2 img {
		display: block;
    	        opacity: 0.0;
    	        filter: alpha(opacity=0);
	}
	.c_r_content2 img:hover {
		opacity: 1.0;
    	        filter: alpha(opacity=100);
	}
</style>
 

4. Schritt - ich erstelle eine Gruppenrechtsvariable

Als Nächstes legst du eine Config VariableKonfigurationsvariable, die dir später erlaubt, Optionen in der Eisntellungsmaske des Plugins vorzunehmen. für die Berechtigung deiner Nutzergruppen an.

Hierfür gehst du in die in die Plugin Bearbeitung, (wenn du noch im Plugin-Editor bist, gelangst du mit dem grünen Pfeil 'Zurück' dorthin) und legst dort die Gruppenrechtsvariable an.

... oder nicht mehr weißt, wie das geht.

Nun klickst du auf 'Neue Config Variable'.



Es erscheint eine Maske, in der du einige Angaben zur neuen Variable machen musst:



Der "Variablen Name" ist ein interner Name, der nur in diesem Plugin verwendet wird.
In anderen Plugins ist es also durchaus erlaubt den selben Namen wieder zu verwenden.
Im Code werden wir später sehen warum es damit keine Probleme gibt.

Die "Gewichtung" ist die SortierungsnummerIn der Feldliste steht dieser Wert dann in der Spalte Sort nach dem Speichern..
In der Einstellungsmaske des Plugins werden die Eingabefelder(Die werden automatisch angelegt wenn eine Variable existiert. aufsteigend nach der Gewichtung sortiert.
Diese Eingabe kann man auch weglassen. Dann werden die Felder unsortiert angezeigt.

Der "Titel" ist der Name dieser Option in der Eingabemaske.
Schreibe hier z.B.: Wer darf die Avatare sehen?

Die "Beschreibung" ist ein optionaler Zusatztext.
Schreibe hier z.B.: Die Nutzergruppen mit Häkchen dürfen Avatare sehen.

"Type" ist der Variablentyp.
Für die Gruppenrechte gibt es einen Spezialtyp: 'grouprights'. Den wählst du aus.

Es erscheint sofort eine Auswahl der Benutzergruppen.
Du kannst dort schon anhaken, welche Gruppe standardgemäß die Avatare sehen darf und wer nicht.

So sieht die Maske nun aus:



Vergiss nicht, anschließend die Variable zu speichern.

5. Schritt - ich füge die Gruppenrechtsvariable in den Code ein

Damit die Avatare nur für bestimmte Nutzergruppen sichtbar sind, muss die Gruppenrechtsvariable so im Code positioniert werden, dass sie nur die Anweisungen zulässt, die die Avatare anzeigen und hovern.
Diese Anweisungen sollen ausgeführt werden, wenn die entsprechende Berechtigung angeklickt ist:

.c_r_content2 img - Avatarbildchen 
		display: block - anzeigen
    	        opacity: 0.0 - aber transparent darstellen
    	        filter: alpha(opacity=0) - für iE8 und älter

.c_r_content2 img:hover - Avatarbildchen beim Hovern
		opacity: 1.0 - nicht transparent darstellen
    	        filter: alpha(opacity=100) - für iE8 und älter

... oder vergessen hast, wie das geht.

Du musst nun wieder in den Code, also in den Plugineditor.

Du gelangst dort hin, indem du auf den Bearbeitungsstift unter 'Action' in der Zeile deines Template-Elements unter 'Pages' klickst.

[Bild folgt]

In deinem Code fügst du an die Stelle, wo die Anweisungen beginnen, die ausgeführt werden sollen, wenn die entsprechende Berechtigung eingestellt ist, eine Leerzeile ein.
Dort positionierst du den Cursor.

Rechts oben siehst du nun 'Config Variablen'.



Wenn du mit der Maus drüber fährt, erscheint deine Variable (wenn du mehrere angelet hast, erscheint dort eine ganze Liste).



Wenn du über die Zeile 'grechte' fahren, erscheint eine weitere Auswahl.
Du klickst auf 'TPL-Insert'.

Die Variable steht dann in der Zeile: {{plugin_deinPluginname_config_rechte}}Hier sieht man, warum der Variablenname nur in diesem Plugin verwendet wird. Der Variablenname ist aus 4 Teilen zusammen gesetzt: "plugin" - "Plugin ID" - "config" - "Variablenname". Die 4 Teile sind durch Unterstriche getrennt.

Aber Achtung - solange die Variable grau markiert ist, ist sie empfindlich. Wenn du dann beginnst, etwas zu schreiben, und sei es nur ein Leerzeichen, ist sie wieder futsch und du muss sie noch einmal reinklicken. Also sorge vor dem Weiterarbeiten dafür, dass du die Markierung los wirst, in dem du z.B. wo anders hinklickst.

So, wie die Variable nun da steht, nützt sie dir noch nichts. Du musst nun klar machen, dass hier das Codestückchen beginnt, das bei vorhandener Berechtigung ausgeführt werden soll.

{{plugin_deinPluginname_config_rechte==true.start}}

==true.start musst du mit der Hand dazu schreiben.

Dann musst du noch die Stelle in deinem Code feslegen, wo die Anweisungen enden, die bei vorhandener Berechtigung ausgeführt werden sollen.

{{plugin_deinPluginname_config_rechte==true.end}}

Also kopiere das doch einfach unten noch einmal und ändere nur das start zu end.

So sieht der Code nun aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

<style>
	.c_r_content2 img {display: none;}
{{plugin_deinPluginname_config_grecht==true.start}}
	.c_r_content2 img {
		display: block;
		opacity: 0.0;
    	       filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.c_r_content2 img:hover {
		opacity: 1.0;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
{{plugin_deinPluginname_config_grecht==true.end}}	
</style>
 

Nun noch speichern ... dann kannst du deine Gruppenrechte in der Einstellmaske deines Plugins regeln.