Sie befinden sich in der bearbeitbaren Version des Einsatzleiterwiki-Projekts. Klicken Sie hier für allgemeine Informationen zum Projekt.
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
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 '' | + | Zuerst muss in den Ordner des wrap-Plugins das Bild abgelegt werden das verwendet werden soll. Im Ordner '' |
- | Darin speichern wir unsere Grafik ab, in diesem Beispiel also dlk.jpg | + | Darin speichern wir unsere Grafik ab, in diesem Beispiel also '' |
- | 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 | + | 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 |
==== 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: | + | Nachdem das Bild abgelegt wurde, kann der CSS-Code eingetragen werden mit dem die Box erzeugt wird. Öffnen Sie dazu die Datei '' |
Fügen Sie in die Datei nun folgenden Block ein: | Fügen Sie in die Datei nun folgenden Block ein: | ||
Zeile 53: | Zeile 53: | ||
'' | '' | ||
- | 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: '' | + | 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 |
'' | '' | ||
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: | + | 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: |
Die Box können wir erzeugen, indem wir den folgenden Code schreiben. Der " | Die Box können wir erzeugen, indem wir den folgenden Code schreiben. Der " |