Einsatzleiterwiki

Das elektronische Einsatzleiterhandbuch

Benutzer-Werkzeuge

Webseiten-Werkzeuge


wiki:hilfe:anpassungen:wrap-plugin_erweitern

Sie befinden sich in der bearbeitbaren Version des Einsatzleiterwiki-Projekts. Klicken Sie hier für allgemeine Informationen zum Projekt.

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
wiki:hilfe:anpassungen:wrap-plugin_erweitern [13.06.2019 23:14]
christoph_ziehr
wiki:hilfe:anpassungen:wrap-plugin_erweitern [01.11.2020 16:56] (aktuell)
christoph_ziehr userstyle.css durch userall.css ersetzt
Zeile 21: Zeile 21:
 ==== 1. Grafik für die Box ablegen ==== ==== 1. Grafik für die Box ablegen ====
  
-Zuerst muss in den Ordner des wrap-Plugins das Bild abgelegt werden das verwendet werden soll. Im Ordner ''lib/plugins/wrap/images/'' (ausgehende 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 ''ser''.  +Zuerst muss in den Ordner des wrap-Plugins das Bild abgelegt werden das verwendet werden soll. Im Ordner ''lib/plugins/wrap/images/'' (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 ''ser''.  
-Darin speichern wir unsere Grafik ab, in diesem Beispiel also dlk.jpg+Darin speichern wir unsere Grafik ab, in diesem Beispiel also ''dlk.jpg''
  
-Die Grafik für die Drehleiter hat eine Breite von 80 Pixeln, darunter wird es schwierig etwas zu erkennen. Bitte beachten Sie, dass das Bild das abgelegt wird schon auf diese Breite skaliert wurde, eine Verkleinerung/Vergrößerung im CSS-Code ist nicht möglich!+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!
  
 ==== 2. benutzerdefinierten CSS-Code eintragen ==== ==== 2. benutzerdefinierten CSS-Code eintragen ====
  
-Nachdem das Bild abgelegt wurde, kann der CSS-Code eingetragen werden mit dem die Box erzeugt wird. [[wiki:hilfe:administration:konfigurationsdateien_bearbeiten|Öffnen Sie dazu die Datei conf/userstyle.css mit einem Texteditor.]] Sollte die Datei noch nicht existieren, so legen Sie sie an.+Nachdem das Bild abgelegt wurde, kann der CSS-Code eingetragen werden mit dem die Box erzeugt wird. Öffnen Sie dazu die Datei ''[[wiki:hilfe:anpassungen:css|conf/userall.css]]'' (ausgehend vom Wiki-Hauptverzeichnis) [[wiki:hilfe:administration:konfigurationsdateien_bearbeiten|mit einem Texteditor.]] Sollte die Datei noch nicht existieren, so legen Sie sie an.
  
 Fügen Sie in die Datei nun folgenden Block ein: Fügen Sie in die Datei nun folgenden Block ein:
Zeile 53: Zeile 53:
  
 ''padding: 1em 1em .5em 100px;''\\ ''padding: 1em 1em .5em 100px;''\\
-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 50 Pixel breit ist, ändern Sie den Wert hier auf 70 Pixel (50 + 20) und schreiben: ''padding: 1em 1em .5em 70px;''+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: ''padding: 1em 1em .5em 70px;''
  
 ''background-color: #ffffff;''\\ ''background-color: #ffffff;''\\
Zeile 66: Zeile 66:
 ==== 3. neue Box benutzen ==== ==== 3. neue Box benutzen ====
  
-Die eben neu definierte Box kann nun benutzt werden. Dafür müssen wir uns kurz zurückerinnern. Eben in der userstyle.css haben wir geschrieben: ''.dokuwiki div.wrap_<wrap em>dlk</wrap> {''+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: ''.dokuwiki div.wrap_<wrap em>dlk</wrap> {''
  
 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** 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**
wiki/hilfe/anpassungen/wrap-plugin_erweitern.1560460456.txt.gz · Zuletzt geändert: 13.06.2019 23:14 von christoph_ziehr