Mini-Plugin | Kategoriennamen auf der Forum-Übersicht formatieren
Die Perfektionistin
Multiprojektmanagerin
Die Perfektionistin
Multiprojektmanagerin
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.
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.
Die Perfektionistin
Multiprojektmanagerin
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.
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.
Liebe Grüße
.BiL.
.BiL.
Die Perfektionistin
Multiprojektmanagerin
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.
Nachdem, was wir oben geplant haben, brauchst du folgende Anweisungen für die Boxheader:
.boxheader {text-align: center;}Das ganze kommt in einen Stylebereich <style>...</style> in den Plugin-Editor.1
2
3
2
3
<style>
.boxheader {text-align: center;}
</style>
Achte bei der Eingabe des CSS-Codes auf jedes einzelne Zeichen - { ;} - selbst die vorangestellten Punkte sind wichtig für die class ...
Oben rechts - 'Speichern' nicht vergessen.
Nun sollten die Kategoriennamen auf deiner Forumsübersichtsseite zentriert sein, aber sonst nirgends.
In einer nächsten Stufe könnten wir nun noch verschiedene Ausrichtungen einstelbar machen und damit den Umgang mit ConfigVariablen lernen.
Durch die Wahl des Template-Elementes "Forenübersicht" beschränkt sich die Zentrierung auf die Boxheader in der Forenübersicht.
Das ist auch so gewollt.
Standardboxen werden bei Xobor oft aus 3 verschachtelten Div´s mit den Klassennamen
box, boxheader und boxcontent aufgebaut.
Wenn man Elemente mit diesen Klassennamen erstellt und einbaut, werde diese mit den hinterlegten CSS-Eigenschaften formatiert.
Sie werden also dem aktuellen Style automatisch angepasst.
Das ist von den Autoren meist auch so gewollt.
Wenn man aber aktive Plugins mit solchen Elementen hat,
ist die neue Zentrierung dort evtl. unpassend.
Denn auch auf diese Header wirkt es sich aus.
Zusätzlich werden die Header des Activity Feed und der Statistikbox zentriert.
Auch das ist evtl. nicht gewollt.
Um das zu vermeinden kann man das gewählte Element in der Style-Anweisung weiter einschränken.
Die Element-Untersuchung zeigt,
daß der .boxheader noch von einem Div mit zwei Klassennamen umschlossen ist.
.box und .cat
.cat ist ein eindeutig auf die Kategorieboxen bezogener Klassenname.
Folgende Anweisung zentriert nun nur die Boxheader die zu einer Kategorie gehören.
Das ist auch so gewollt.
Standardboxen werden bei Xobor oft aus 3 verschachtelten Div´s mit den Klassennamen
box, boxheader und boxcontent aufgebaut.
Wenn man Elemente mit diesen Klassennamen erstellt und einbaut, werde diese mit den hinterlegten CSS-Eigenschaften formatiert.
Sie werden also dem aktuellen Style automatisch angepasst.
Das ist von den Autoren meist auch so gewollt.
Wenn man aber aktive Plugins mit solchen Elementen hat,
ist die neue Zentrierung dort evtl. unpassend.
Denn auch auf diese Header wirkt es sich aus.
Zusätzlich werden die Header des Activity Feed und der Statistikbox zentriert.
Auch das ist evtl. nicht gewollt.
Um das zu vermeinden kann man das gewählte Element in der Style-Anweisung weiter einschränken.
Die Element-Untersuchung zeigt,
daß der .boxheader noch von einem Div mit zwei Klassennamen umschlossen ist.
.box und .cat
.cat ist ein eindeutig auf die Kategorieboxen bezogener Klassenname.
Folgende Anweisung zentriert nun nur die Boxheader die zu einer Kategorie gehören.
1
2
3
2
3
<style>
.cat .boxheader {text-align: center;}
</style>
Das funktioniert auch wenn man nicht explizit die "Forenübersicht" als Template-Element wählt.
Der Activity Feed und die Statistik erhlaten nun keine Zentrierung mehr.
Falls man es nun doch wieder möchte,
kann man sie zusätzlich ansprechen.
1
2
3
2
3
<style>
.cat .boxheader,.stats .boxheader, .xFeedContainer .boxheader {text-align: center;}
</style>
Liebe Grüße
.BiL.
Die Perfektionistin
Multiprojektmanagerin
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.
Ich lege dafür eine ConfigVariable vom Typ html-Color an
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.
Nun lege ich im Code fest, wo die Variable eingesetzt werden soll
Bevor wir aber die Variable einsetzen, erstellen wir den Code dafür im Plugin und testen seine Wirkungsweise.
Wieder müssen wir zunächst den richtigen Selektor finden. Einfach nur boxheader anzusprechen funktioniert nicht.
Also habe ich die Elementuntersuchung bemührt und gefunden:
a.cat - das ist der Kategorienname im Header
Er sollen nun eine Farbe bekommen.
Die Eigenschaft für Schriftfarbe heißt: color - siehe auch: CSS-Code | Aufbau - und gehört auch in den Style-Bereich im Plugincode.
Der Farbwert kann unter anderem in Hexadezimalschreibweise eingegeben werden: #ff00ff (für pink) oder auch als Wort: red (für rot).
Da die Farbe für diese Elemente eigentlich global festgelegt ist, müssen wir hier mit !important hinter dem Farbwert etwas nachhelfen und deutlich machen, dass die ursprüngliche Einstellung überschrieben werden soll.
1
2
3
2
3
a.cat {
color: #ff00ff !important;
}
Erst, wenn das funktioniert und der Text tatsächlich die gewählte Farbe hat, setzen wir die Variable, die wir vorbereitet haben, ein.
Möchten wir weitere Elemente mit der gleichen Farbe ansprechen, bilden wir eine kleine Aufzählung, mit Komma getrennt. Z.B.:
a.cat, .boxheader strong (für die Überschriften im AF und in der Statistik)
Anstelle des Farbwertes setze ich nun die Variable in den Code ein
Lösche in deinem Code den Farbwert (#ff00ff) hinter color: und bleibe mit dem Cursor dort stehen.
Dort soll nun deine Farbvariable eingesetzt werden.
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.
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.
Oben links speichern und dann kannst du unter Pluginsystem > Home das Plugin öffnen und eine Farbe einstellen. Speichere diese Einstellung und schau, ob die gewünschte Farbe zu sehen ist.
27.03.2015 13:19 (zuletzt bearbeitet: 27.03.2015 13:30)
#6
bis hierhin alles supi verstanden..hier mal mein eingesetzter code
1
2
3
4
5
6
2
3
4
5
6
<style>
.boxheader {text-align: center;}
a.cat, .boxheader strong, #foverview_legend, #foverview_stat3 {
color: {{plugin_frechdax1_config_kat_schriftfarbe}} !important;
}
</style>
und so sieht das ergebniss aus
die angesprochenen Variableblen hab ich mal mit inem Pfeil gekennzeichnet
Mit freundlichen Grüßen
Mike (DJ-Frechdax)
www.german-intruders.de
Borad ID: 642672
Gratulation zu deinem ersten einstellbaren Plugin.
Die Perfektionistin
Multiprojektmanagerin
27.03.2015 14:13 (zuletzt bearbeitet: 27.03.2015 14:15)
#8
so ausgetestet ...hier mal mein Code
1
2
3
4
5
6
2
3
4
5
6
<style>
.boxheader, a.cat, .boxheader strong, #foverview_legend, #foverview_stat3 {
color: {{plugin_frechdax1_config_kat_schriftfarbe}} !important;
text-align: {{plugin_frechdax1_config_ausrichtung_}};
}
</style>
admin.JPG - Bild entfernt (keine Rechte)
rechtsbuündig.JPG - Bild entfernt (keine Rechte)
Mit freundlichen Grüßen
Mike (DJ-Frechdax)
www.german-intruders.de
Borad ID: 642672
27.03.2015 14:33
#9
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<style>
.boxheader, a.cat, .boxheader strong, #foverview_legend, #foverview_stat3 {
color: {{plugin_frechdax1_config_kat_schriftfarbe}} !important;
}
.boxheader, a.cat, .boxheader strong, #foverview_legend {
text-align: {{plugin_frechdax1_config_ausrichtung_}};
}
</style>
hab den code nochmal angepasst da ich nicht alle ansprechen wollte zwecks ausrchtung
hoffe der iss richtig so
27.03.2015 16:31
#10
so Plugin um die Variable Größe erweitert
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<style>
.boxheader, a.cat, .boxheader strong, #foverview_legend, #foverview_stat3 {
color: {{plugin_frechdax1_config_kat_schriftfarbe}} !important;
}
.boxheader, a.cat, .boxheader strong, #foverview_legend {
text-align: {{plugin_frechdax1_config_ausrichtung_}};
}
.boxheader, a.cat, .boxheader strong {
font-size:{{plugin_frechdax1_config_schriftgr}}px;
}
</style>
größe.JPG - Bild entfernt (keine Rechte)
Das Thema ist geschlossen
Sie haben keine Rechte zu antworten
Bereits Mitglied?
Jetzt anmelden!
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Jetzt registrieren!
