Meine individuelle ToDo-Liste

Wartungsmodus im Forum per Plugin gestalten.

05.04.2015 11:58 (zuletzt bearbeitet: 05.04.2015 17:48)
avatar  TripleM
#1
Tr

Was soll das Plugin können?

Dem Admin die Möglichkeit geben, sein Forum in den Wartungsmodus zu setzen.
In dieser Zeit soll kein Zugang zu den Seiten möglich sein und eine entsprechende Information dazu erscheinen.

So soll das Forum während der Wartungsarbeiten aussehen:



Was soll einstellbar sein in dem Plugin?

Gruppenrechte, um allen Gruppen den Zutritt zu verwehren, außer dem Admin.
Wartungshinweis in Form eines Textes.
Wartungshinweis Textfarbe.
Wartungshinweis Textgröße.
Höhe des Hinweises. (Das brauchen wir, damit auch bei langen Foren alles überdeckt wird.)

Also los - fangen wir an mit Schritt 1.


 Antworten

 Beitrag melden
05.04.2015 12:23 (zuletzt bearbeitet: 05.04.2015 16:25)
avatar  TripleM
#2
Tr


1. Schritt - Wir legen ein Plugin an.


Als Templates Element wählen wir Obere Leiste - Header.

Somit ist die Wartungsanzeige später immer und überall sichtbar.

Wir benötigen in diesen Plugin zum einen eine DIV, die ungefähr so aussehen sollte:

1
 
<div id="Hier name für deine Div"></div>
 


In meinen Beispiel, nehme ich einfach "wartungsmodus"

Und eine Style Anweisung:

<style>.....</style>

Somit sollte das hier schon mal in dem PI sein:


 Antworten

 Beitrag melden
05.04.2015 12:36 (zuletzt bearbeitet: 05.04.2015 18:02)
avatar  TripleM
#3
Tr


2. Schritt - Vorbereiten der Konfigurationsvariablen (ConfigVar)


Wir erstellen folgende Variablen, die später in der Maske einstellbar sein sollen:

Rechte (grouprights) - Wer soll den Wartungshinweis sehen? - default-Einstellung: allen Gruppen
Höhenangabe (chars) - Wie hoch (in %) muss die überdeckende Grafik sein? (Eingabe ohne %, das wird später direkt in den Code geschrieben) - default-Einstellung: 300
Wartungsmodus Bild (fileurl) - halbtransparentes Bild, das sich über das Forum legen soll - default-Einstellung: (Bitte ein Bild hochladen)
wartungsarbeiten.png - Bild entfernt (keine Rechte)

Wartungsmodus Hinweistext (chars) - Hinweistext für die Besucher deines Forums - default-Einstellung: Das Forum ist wegen Wartungsarbeiten kurzfristig geschlossen.
Textfarbe (htmlcolor) - Farbe für den Hinweistext - default-Einstellung: (wählt irgendeine Farbe beim Erstellen)
Textgröße (chars) - Für die Textgröße stehen die Überschriftenformate <h1>(groß) bis <h6>(klein) zur Verfügung. Die vollständigen h-Tags stehen später im Code. Hier werden nur die Ziffern 1 - 6 eingegeben. - default-Einstellung: 6

Solltet ihr das haben, sieht es in der Plugin-Entwicklung so aus:


 Antworten

 Beitrag melden
05.04.2015 12:43 (zuletzt bearbeitet: 08.04.2015 13:51)
avatar  TripleM
#4
Tr


3. Schritt - Einsetzen eines Platzhalters für den Hinweistext


Wo kommt unser Wartungshinweis nun rein?

Der Hinweistext soll als Überschrift in den div-Container in eingesetzt werden, den wir im 1. Schritt schon angelegt haben.

Also kommt <h1></h1> zwischen <div id="wartungsmodus"> ... </div>.

Ein Text als Platzhalter wird einfach zwischen <h1></h1> gesetzt: <h1>XXXX</h1>.

Wenn du nun alles richtig gemacht hast, sollte das in deinen Plugin so aussehen:


 Antworten

 Beitrag melden
05.04.2015 12:56 (zuletzt bearbeitet: 08.04.2015 14:07)
avatar  TripleM
#5
Tr


4. Schritt - Style-Anweisungen


Für die ID #wartungsmodus { ... } brauchen wir nun folgende Anweisungen:

    height:XX;
    width:XX;
    position:XX;
    z-index:XX;
    background-image: url(XXX) !important;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:XX;

Die Style Anweisungen setzen wir zwischen die Klammern {}.

Die XXX sind Platzhalter für die ConigVariablen, die wir in Schritt 2. schon angelegt haben oder für Werte, die wir später noch einsetzen.

Dieser ganze CSS-Block kommt zwischen das <style>-Tag.

Und somit sollte das so aussehen in euren Plugin:


 Antworten

 Beitrag melden
05.04.2015 13:56 (zuletzt bearbeitet: 08.04.2015 18:02)
avatar  TripleM
#6
Tr


5. Schritt - Einsetzen der Konfigurationsvariablen


Nun müssen die Variablen, die wir in Schritt 2. vorbereitet haben, eingesetzt werden.
Fangen wir mit den Rechten an.

5.1 Die Gruppenrechte

Rahmt mit der im 2. Schritt erstellten Gruppenrechtsvariable den kompletten Code ein.

... oder vergessen hast, wie das geht.

Du musst 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.

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. Hier ist das ganz oben, oberhalb des Codes.
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 'wartungsrechte' fahren, erscheint eine weitere Auswahl.
Du klickst auf 'TPL-Insert'.

Die Variable steht dann in der Zeile: {{plugin_deinPluginname_config_wartungsrechte}}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_wartungsrechte==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.
Hier ist das ganz am Ende des gesamten Codes.

{{plugin_deinPluginname_config_wartungsrechte==true.end}}

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

Speichern ... dann kannst du deine Gruppenrechte in der Einstellmaske deines Plugins regeln.


Wenn ihr die Rechte-Variable um den kompletten Code gelegt habt, sollte es also bei euch so aussehen:


5.2 Die Höhe der Wartungsgrafik

Weiter geht es mit der Variable für die Höhe - height.
Setzt sie bitte so ein (wieder über die Liste rechts oben als TPL-Insert):

heigth: {{ variable für die höhe }}%;


Dann wird der Wert, der in der Einstellung als Zahlenwert eingegeben wird vom Plugin eingesetzt.

So sollte es dann aussehen bei euch:


5.3 Die Wartungsgrafik

Machen wir weiter mit der Variable für das Bild. Geht bitte in euren Code und setzt die Variable für das Bild in die Zeile mit der Bildadresse.

backgound-image: url({{ variable für die bildadresse }});


Nun sollte das so aussehen bei euch:


5.4 Der Hinweistext

Nun soll die Variable für den Wartungshinweistext eingestzt werden. Setzt diese Variable bitte oben in die DIV zwischen <h1> und </h1> an stelle der drei XXX.

Das sollte so aussehen bei euch:


5.5 Die Textfarbe

Die Variable für die Textfarbe setzt ihr bitte im Code hinter color ein.

color: {{ variable für den farbwert }};


Dann sollte das bei euch so ausschauen in den Plugin:


5.6. Die Textgröße

Und nun die letzte Variable. Der Textgröße wird ja in unserem Fall mit <h1></h1> bis <h6></h6> bestimmt.

Wir haben in unseren Code zwischen der DIV bereits den Wartungshinweistext umrahmt von der <h1></h1> stehen.
Nun wollen wir mit Hilfe der Schriftgrößenvariable die Ziffern 1 bis 6 variabel machen. Das h bleibt dabei unangetastet.
Dazu setzen wir die Variable für Schriftgröße anstelle der Zahl 1 ein der Rest bleibt bitte wie es ist.

Nun sollte das so aussehen bei euch:


Was fehlt nun noch? Richtig die anderen Style-Anweisungen, die wir nicht einstellbar machen wollen.

Auf zum letzten Schritt


 Antworten

 Beitrag melden
08.04.2015 11:06 (zuletzt bearbeitet: 08.04.2015 18:04)
avatar  TripleM
#7
Tr


6. Schritt - Style-Anweisungen mit festen Werten


Was noch fehlt ist folgendes:

width:XX;
position:XX;
z-index:XX;

Für width nehmt bitte 100% für position bitte absolute und für z-index bitte 1000000

dann sollte das ganze bei dir so aussehen:


Und wenn ihr nun alles richtig habt, sieht es so aus in eurem Forum:

1.JPG - Bild entfernt (keine Rechte)

Wenn ihr nun noch den Text zentrieren wollt, setzt die DIV in <center></center>:

1
2
 
<center><div id="wartungsmodus"><h{{plugin_wartungsmodus_config_textgroesse}}>{{plugin_wartungsmodus_config_wartungstext}}</h{{plugin_wartungsmodus_config_textgroesse}}></div></center>
 
 



Und schon ist der Text zentriert.

Das Plugin ist somit fertig und kann in euren Forum genutzt werden, ohne dass es euch einen Plugin-Platz kostet und ihr am Template Hand angelegt habt.


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Forenspende

Das Forenkonto ist ein gebührenfreies Konto bei der Firma Miranus. Von diesem Konto wird automatisch unser Tarif abgebucht.

Der Tarif ist für

  • Unsere Domain friends-of-xobor.de/
  • HTTPS-Verschlüsselung
  • Unbegtenzter Speichplatz für Bilder und Dateien statt nur 100MB
  • Wiki-Modul
  • E-Mail Newsletter
  • Foren-Chat

Jede Spende hilft!
Das Spendenziel für 1 Jahr ist zu
91%
 
erreicht