✎ wrap-Plugin erweitern [Umweltschuzzug WIKI]

<h1 class="page-header pb-3 mb-4 mt-5"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" role="presentation" class="iconify mr-2"><path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2h9m3-4v-2H6v2h12z"/></svg> wrap-Plugin erweitern</h1>
<div class="level1">

Gegenüber dem Standard-Wiki-Code lassen sich mithilfe des <a href="/doku.php?id=wiki:hilfe:plugins:standard:wrap" class="wikilink1" title="wiki:hilfe:plugins:standard:wrap" data-wiki-id="wiki:hilfe:plugins:standard:wrap">wrap-Plugins</a> optisch ansprechende Wiki-Seiten herstellen. Fortgeschrittene Nutzer wünschen sich manchmal jedoch, diese noch weiter anpassen zu können.

Dies ist mittels <a href="/doku.php?id=wiki:hilfe:anpassungen:css" class="wikilink1" title="wiki:hilfe:anpassungen:css" data-wiki-id="wiki:hilfe:anpassungen:css">Anpassung der CSS-Dateien</a> problemlos möglich. Auf dieser Seite werden Beispiele dafür gesammelt.

</div>

<h2 class="page-header pb-3 mb-4 mt-5">Individuelle wrap-Boxen erstellen</h2>
<div class="level2">

Sicherlich kennen Sie bereits die Funktion des wrap-Plugins um Boxen mit Symbolen zu erstellen, wie zum Beispiel diese hier:

&lt;WRAP center round todo 100%>
Zu-Erledigen-Box
&lt;/WRAP>

Bei einer Feuerwehr bestand der Wunsch, im Einsatzleiterwiki Standardeinsatzregeln (SER) zu hinterlegen. Jeweils pro Szenario gibt es für die Besatzungen der einzelnen Fahrzeuge verschiedene Aufgaben zu erledigen. Um diese im Einsatzfall schnell optisch auffindbar zu machen, sollte pro Fahrzeug eine Box erstellt werden, in der die Einsatzaufträge aufgeführt sind, hier am Beispiel der Drehleiter demonstriert:

Diese Schritte müssen erledigt werden, um eine eigene Box einfügen zu können:

</div>

<h3 class="page-header pb-3 mb-4 mt-5">1. Grafik für die Box ablegen</h3>
<div class="level3">

Zuerst muss in den Ordner des wrap-Plugins das Bild abgelegt werden das verwendet werden soll. Im Ordner <code>lib/plugins/wrap/images/</code> (ausgehend vom Wiki-Hauptverzeichnis) befinden sich die Grafiken für die Boxen. In diesem Ordner legen wir einen Unterordner an, um die Grafiken sauber zu trennen. Diesen nennen wir in diesem Beispiel <code>ser</code>. 
Darin speichern wir unsere Grafik ab, in diesem Beispiel also <code>dlk.jpg</code>

Die Grafik für die Drehleiter hat eine Breite von 80 Pixeln, darunter wird es schwierig etwas zu erkennen. Bitte beachten Sie, dass Sie das Bild das abgelegt wird schon auf diese Breite skaliert haben, eine nachträgliche Verkleinerung/Vergrößerung im CSS-Code ist nicht möglich!

</div>

<h3 class="page-header pb-3 mb-4 mt-5">2. benutzerdefinierten CSS-Code eintragen</h3>
<div class="level3">

Nachdem das Bild abgelegt wurde, kann der CSS-Code eingetragen werden mit dem die Box erzeugt wird. Öffnen Sie dazu die Datei <code><a href="/doku.php?id=wiki:hilfe:anpassungen:css" class="wikilink1" title="wiki:hilfe:anpassungen:css" data-wiki-id="wiki:hilfe:anpassungen:css">conf/userall.css</a></code> (ausgehend vom Wiki-Hauptverzeichnis) <a href="/doku.php?id=wiki:hilfe:administration:konfigurationsdateien_bearbeiten" class="wikilink1" title="wiki:hilfe:administration:konfigurationsdateien_bearbeiten" data-wiki-id="wiki:hilfe:administration:konfigurationsdateien_bearbeiten">mit einem Texteditor.</a> Sollte die Datei noch nicht existieren, so legen Sie sie an.

Fügen Sie in die Datei nun folgenden Block ein:

<pre class="code css">.dokuwiki div.wrap_dlk {
 padding: 1em 1em .5em 100px;
 margin-bottom: 1.5em;
 min-height: 68px;
 background-position: 10px 50%;
 background-repeat: no-repeat;
 color: inherit;
 overflow: hidden;
 background-color: #ffffff;
 border: 5px solid #ff0000;
 background-image: url(lib/plugins/wrap/images/ser/dlk.jpg);
}

</pre>

Auch wenn dieser Code erst einmal kompliziert aussieht - er muss nur an wenigen Stellen angepasst werden, um weitere Boxen erzeugen zu können:

<code>.dokuwiki div.wrap_dlk {</code>

In der ersten Zeile definieren Sie, mit welchem Code Sie die Box einbinden möchten (dazu gleich mehr). Wenn Sie neben der DLK-Box als nächstes eine Box für einen ELW erzeugen möchten, schreiben Sie dann also <code>.dokuwiki div.wrap_elw {</code>

<code>padding: 1em 1em .5em 100px;</code>

Falls Ihre Grafik nicht die Breite 80 Pixel (px) hat sondern breiter oder schmaler ist, sollten Sie diese Zeile anpassen (die padding-Eigenschaft definiert die Abstände zu anderen Elementen). Der Abstand nach rechts (hier: 100px) sollte 20 Pixel größer sein als Ihr Bild breit ist, ansonsten werden die Abstände zu groß oder zu klein. Falls Ihre Grafik beispielsweise 50 Pixel breit ist, ändern Sie den Wert hier auf 70 Pixel (50 + 20) und schreiben: <code>padding: 1em 1em .5em 70px;</code>

<code>background-color: #ffffff;</code>

Hiermit definieren Sie die Hintergrundfarbe der Box. <code>#ffffff</code> ist die Farbe weiß (diese Art der Farbangabe nennt sich "Hex-Code"). Ihr Wunschfarbe lässt sich mit entsprechenden Hilfsmitteln wie einem <a href="https://www.w3schools.com/colors/colors_picker.asp" class="urlextern" target="_blank" title="https://www.w3schools.com/colors/colors_picker.asp" rel="ugc nofollow noopener">HTML Color Picker</a> einfach herausfinden.

<code>border: 5px solid #ff0000;</code>

Hier wird die Breite des Rahmens der Box angegeben, in diesem Fall ein 5 Pixel breiter (<code>5px solid</code>) Rahmen, der rot (<code>#ff0000</code>) ist. Die Änderung der Farbe funktioniert auch hier wie im Absatz zuvor beschrieben.

<code>background-image: url(lib/plugins/wrap/images/ser/dlk.jpg);</code>

In der letzten Zeile wird der Pfad zur Grafik angegeben, die dargestellt werden soll. Aus Gründen der Übersichtlichkeit empfiehlt es sich, der Datei den gleichen Namen zu geben wie der Box.

</div>

<h3 class="page-header pb-3 mb-4 mt-5">3. neue Box benutzen</h3>
<div class="level3">

Die eben neu definierte Box kann nun benutzt werden. Dafür müssen wir uns kurz zurückerinnern. Eben in der userall.css haben wir geschrieben: <code>.dokuwiki div.wrap_&lt;wrap em>dlk&lt;/wrap> {</code>

Die Box können wir erzeugen, indem wir den folgenden Code schreiben. Der "Name" für die Box entspricht dem rot markierten Teil, also in diesem Fall dlk

<pre class="code">&lt;WRAP dlk&gt;
Text für die Drehleiter-Box
&lt;/WRAP&gt;

</pre>

Natürlich können beim Text für die Box noch weitere Argumente mitgegeben werden (wie bei den Standard-wrap-Boxen auch), um die Box schöner aussehen zu lassen. Folgender Code würde eine Drehleiter-Box erzeugen, die abgerundete Ecken hat, 80 Prozent der Seitenbreite einnimmt und horizontal zentriert ist:

<pre class="code">&lt;WRAP center round dlk 80%&gt;
Text für die Drehleiter-Box
&lt;/WRAP&gt;

</pre>

Tipp aus der Praxis

Wenn Sie mehrere Boxen für verschiedene Fahrzeuge erzeugen, wird es schnell unübersichtlich. Es empfiehlt sich dann, auf einer Seite eine Übersicht über die ganzen Boxen zu erstellen, also alle verfügbaren Boxen untereinander aufzulisten. Gleichzeitig macht es Sinn, in der Box den Code anzugeben, mit dem die Box erzeugt wird. Das sieht dann beispielsweise so aus:

Um diese Box darzustellen, ist der folgende Code einzugeben (lässt sich leider nur als Bild einbinden, da er sonst durchs Wiki verarbeitet werden würde):

</div>

<h3 class="page-header pb-3 mb-4 mt-5">DokuWiki-Aktualisierung</h3>
<div class="level3">

Bei einer Aktualisierung des Plugins bzw. des ganzen Wikis werden die Anpassungen nicht überschrieben, da keine Systemdateien bearbeitet wurden. Eine <a href="/doku.php?id=wiki:hilfe:administration:datensicherung" class="wikilink1" title="wiki:hilfe:administration:datensicherung" data-wiki-id="wiki:hilfe:administration:datensicherung">Datensicherung</a> ist natürlich trotzdem immer empfehlenswert.

</div>

Aktiviere komplexe Tabellen Editorhöhe px Zusätzliche Unterstützung beim Einfügen von Bildern aus der Zwischenablage Ein

Zusammenfassung: Kleine Änderungen