Was soll das Plugin können?

Der Text in den Boxheadern (hier = Kategorienamen) auf der Seite Forum Übersicht sollen zentriert ausgerichtet sein.

Was soll einstellbar sein?

Zunächst sind keine Einstellungen notwendig, da diese Ausrichtung für alle Nutzer sichtbar sein soll, sind auch Gruppenrechte nicht zwingend erforderlich.
Später und zu Übungszwecken könnte man noch verschiedene Ausrichtungen einstellbar machen.

Aber warum dann ein Plugin?

Mit dem Plugin kann ich genau und unkompliziert festlegen, in welchem Bereich meine Anweisung zur Wirkung kommen soll.
Und ich habe ein schönes Übungsbeispiel, um die verschiedenen Template-Elemente im Pluginsystem kennenzulernen.
Wenn es mir nicht mehr gefällt, kann ich es einfach deaktivieren, dann ist alles wieder wie vorher, ohne dass ich Code in der CSS ändern oder auskomemntieren muss.

Was brauche ich dafür in meinem Plugin?

* ein in Template-Element für die 'Forum Übersicht'

Und Anweisungen im Code:

* Textausrichtung zentriert für die Klasse Boxheader

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 (das sind hier nur Beispiele).

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 auf der 'Forum Übersicht' 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 'Forum Übersicht' aus.
Darunter setzt du den Punkt auf 'Header'. (Bitte beachte, hier auf dem Bild ist ein anderes Template-Element als Beispiel ausgewählt.)



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 Anweisung - also was soll zentriert werden - die .boxheaderDas ist der Klassenname für die "Überschriften" über den Boxen. Es ist eine StandardKlasse im Business-Template.

.boxheader {text-align: center;}

<style>
    .boxheader {text-align: center;}
</style>
 

<style>
    .cat .boxheader {text-align: center;}
</style>
 

<style>
    .cat .boxheader,.stats .boxheader, .xFeedContainer .boxheader {text-align: center;}
</style>
 

4. Schritt - ich mache die Schrift-Farbe für die Kategorienüberschriften einstellbar

Hierfür nutze ich eine sogenannte ConfigVariable - eine Kofigurationsvariable, mit der ich später etwas einstellen, also konfigurieren kann.

Wir gehen in die Plugin Bearbeitung und klicken auf "Neue Config Variable".



Als nächstes erscheint eine Maske, in der wir einige Angaben zur neuen Variablen machen müssen.



Der "Variablen Name" ist ein interner Name, der nur in diesem Plugin verwendet wird - z.B. katschriftfarbe
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.
Wähle hier z.B. 10

Der "Titel" ist der Name in der Eingabemaske - hier könnte das z.B. Kategorienschriftfarbe sein.

Die "Beschreibung" ist ein optionaler Zusatztext, der ebenfalls in der Einstellmaske steht - z.B. Die Farbe der Schrift in den Boxheadern auf der Forumsübersicht

"Type" ist die Art der Variablen.
Eine genaue Auflistung aller Möglichkeiten und deren Bedeutungen gibt es in einem separaten Thema.
Wir wählen für unsere Schritfarbe htmlcolor und legen schließlich noch den
"default Value" - den voreingestellten Wert fest - es muss immer einer definiert werden.



Nun speichern und die Variable ist erstellt.

	a.cat {
		color: #ff00ff !important;
  }
 

Rechts oben im Editor siehst du '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 mit der Maus über die Zeile 'katschriftfarbe' fährst, erscheint eine weitere Auswahl - JS-insert und TPL-insert.
Du klickst auf 'TPL-Insert'.

Die Variable steht dann in der Zeile: {{plugin_deinPluginname_config_katschriftfarbe}}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.

Eine weitere naheliegende Idee wäre nun, die Textausrichtung, die wir im 3. Schritt fest in den Code geschrieben haben, auch einstellbar zu machen.

Versuche das mit diesem Seminar: Erstellung einer Variablen vom Typ select in deinem Plugin umzusetzen.