Vorlage:Box: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung |
K (167 Versionen importiert: Hilfe-Seiten aus ZUM-Unterrichten) |
||
(47 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt) | |||
Zeile 10: | Zeile 10: | ||
=== Das sieht man: === | === Das sieht man: === | ||
</noinclude><onlyinclude> | </noinclude><onlyinclude> | ||
<div style="margin: 0 auto .5rem; overflow:hidden; border-left: | <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 7px solid {{{Farbe|{{Farbe | {{{3|unspezifisch}}}}}}}};"> | ||
<div style="height: 100%; padding: 0 1rem .5rem;"><div style="font-size: 110%; font-weight: bold; margin-bottom: .5rem; padding: .25rem"><span style="font-size: 1.95rem; vertical-align: middle;">{{#if: {{{Icon|}}} | |||
|<span class="{{{Icon}}}"></span> | |||
|{{#switch: {{{3}}} | |||
| Hervorhebung1 = {{icon hervorhebung}} | |||
| Hervorhebung2 = {{icon hervorhebung}} | |||
| Zitat = {{icon zitat}} | |||
| Arbeitsmethode = {{icon pencil}} | |||
| Unterrichtsidee = {{icon idea}} | |||
| Meinung = {{icon comment}} | |||
| Lernpfad = {{icon compass}} | |||
| Experimentieren = {{icon flask}} | |||
| Lösung = {{icon checked}} | |||
| Üben = {{icon edit}} | |||
<div style="height: 100%; padding: 0 .5rem; "><div style="font:110% | | Merksatz = {{icon pin}} | ||
| Hervorhebung1 = | | Download = {{icon download}} | ||
| Hervorhebung2 = | | Frage = {{icon question}} | ||
| Zitat = | | Kurzinfo = {{icon info}} | ||
| Arbeitsmethode = | | {{icon point}} }} | ||
| Unterrichtsidee = | }}</span> {{{1}}}</div><div> | ||
| Meinung = | |||
| Lernpfad = | |||
| Experimentieren = | |||
| Lösung = | |||
| Üben = | |||
| Merksatz = | |||
| Kurzinfo = | |||
| | |||
{{{2}}}</div></div></div></onlyinclude><noinclude> | {{{2}}}</div></div></div></onlyinclude><noinclude> | ||
Zeile 63: | Zeile 55: | ||
{{Box|Merksatz|mit Text für Definitionen und Merksätzen|Merksatz}} | {{Box|Merksatz|mit Text für Definitionen und Merksätzen|Merksatz}} | ||
{{Box|Download|mit (möglichst internen) Links zu herunterladbarem Material|Download}} | |||
{{Box|Frage|mit einer Frage|Frage}} | |||
{{Box|Kurzinfo|mit Text oder integrierten Vorlagen für Kurzinfos|Kurzinfo}} | {{Box|Kurzinfo|mit Text oder integrierten Vorlagen für Kurzinfos|Kurzinfo}} | ||
Zeile 89: | Zeile 85: | ||
<div class="box ueben"> | <div class="box ueben"> | ||
== Üben == | == Üben == | ||
mit Text für Übungen und Aufgaben | |||
</div> | </div> | ||
Zeile 153: | Zeile 149: | ||
<div class="box experimentieren"> | <div class="box experimentieren"> | ||
== Experimentieren == | == Experimentieren == | ||
... | |||
</div> | |||
<div class="box download"> | |||
== Download == | |||
... | ... | ||
</div> | </div> | ||
</pre> | </pre> | ||
Es müssen immmer die CSS-Klassen 'box' und ggf. die Art der Box im Beispiel oben also 'ueben' angegeben werden. | Es müssen immmer die CSS-Klassen 'box' und ggf. die Art der Box im Beispiel oben also 'ueben' angegeben werden. | ||
Zeile 162: | Zeile 164: | ||
'''HINWEIS:''' Im Unterschied zur Verwendung des Templates werden die Überschriften im div-Container im Inhaltsverzeichnis aufgeführt. Insofern kann darüber auch gesteuert werden, welche Boxen im Inhaltsverzeichnis erscheinen sollen. | '''HINWEIS:''' Im Unterschied zur Verwendung des Templates werden die Überschriften im div-Container im Inhaltsverzeichnis aufgeführt. Insofern kann darüber auch gesteuert werden, welche Boxen im Inhaltsverzeichnis erscheinen sollen. | ||
== Icon ändern == | |||
Das Icon lässt sich auch überschreiben mit dem Parameter <code>Icon</code>. | |||
'''Das schreibt man''' | |||
<pre>{{Box|Titel|Inhalt|Lösung|Icon=brainy hdg-school}}</pre> | |||
'''Das sieht man''' | |||
{{Box|Titel|Inhalt|Lösung|Icon=brainy hdg-school}} | |||
== Farbe ändern == | |||
Die Farbe lässt sich auch überschreiben mit dem Parameter <code>Farbe</code>. | |||
'''Das schreibt man''' | |||
<pre>{{Box|Titel|Inhalt|Lösung|Farbe={{Farbe|orange|dunkel}} }}</pre> | |||
'''Das sieht man''' | |||
{{Box|Titel|Inhalt|Lösung|Farbe={{Farbe|orange|dunkel}} }} | |||
{{Approved template}} | |||
</noinclude> | </noinclude> | ||
Aktuelle Version vom 9. Februar 2020, 10:11 Uhr
Boxen erstellen mittels Template
Das schreibt man:
{{Box| Titel | Inhalt | class }}
Als Klassen/class stehen einige Varianten zur Verfügung wie Hervorhebung1, Hervorhebung2, Zitat, ... , allerdings ist dies optional (siehe Beispiele!)
Das sieht man:
andere Beispiele
Hinweise zur Gestaltung dieser Vorlage
Diese Vorlage kann für verschiedene Elemente angepasst werden. Dazu kann die Farbe des linken Balkens und das in der Titelzeile eingeblendete Bild an dieser zentralen Stelle für alle Seiten festgelegt werden.
Alternativ: Boxen mittels div-Containern und CSS-Klassen erstellen
Nicht alle Inhalte können als Parameter an Vorlagen (Templates) übergeben werden, z.B. HTML Tags im Wikitext, Tabellen und anderes. Um trotzdem Boxen im gleichen Layout wie mittels obigen Vorlagen zu erstellen, gibt es auch korrespondierende CSS-Klassen. Dazu muss der Text, der in einer Box stehen soll in einen div-Container eingefasst werden:
Das schreibt man:
<div class="box ueben"> == Üben == ... </div>
Das sieht man:
Üben
mit Text für Übungen und Aufgaben
Folgende Boxen stehen zur Verfügung (analog oben)
<div class="box hervorhebung1"> == Hervorhebung 1 == ... </div> <div class="box hervorhebung2"> == Hervorhebung 2 == ... </div> <div class="box zitat"> == Zitat == ... </div> <div class="box arbeitsmethode"> == Arbeitsmethode == ... </div> <div class="box unterrichtsidee"> == Unterrichtsidee == ... </div> <div class="box meinung"> == Meinung == ... </div> <div class="box lernpfad"> == Lenrpfad == ... </div> <div class="box experimentieren"> == Experimentieren == ... </div> <div class="box loesung"> == Lösung == ... </div> <div class="box ueben"> == Üben == ... </div> <div class="box kurzinfo"> == Kurzinfo == ... </div> <div class="box experimentieren"> == Experimentieren == ... </div> <div class="box download"> == Download == ... </div>
Es müssen immmer die CSS-Klassen 'box' und ggf. die Art der Box im Beispiel oben also 'ueben' angegeben werden.
WICHTIG: Die CSS-Klassennamen müssen klein geschrieben sein, Umlaute müssen ersetzt werden (ü zu ue, ß zu sz usw.)
HINWEIS: Im Unterschied zur Verwendung des Templates werden die Überschriften im div-Container im Inhaltsverzeichnis aufgeführt. Insofern kann darüber auch gesteuert werden, welche Boxen im Inhaltsverzeichnis erscheinen sollen.
Icon ändern
Das Icon lässt sich auch überschreiben mit dem Parameter Icon
.
Das schreibt man
{{Box|Titel|Inhalt|Lösung|Icon=brainy hdg-school}}
Das sieht man
Farbe ändern
Die Farbe lässt sich auch überschreiben mit dem Parameter Farbe
.
Das schreibt man
{{Box|Titel|Inhalt|Lösung|Farbe={{Farbe|orange|dunkel}} }}
Das sieht man
Keine Beschreibung.
Parameter | Beschreibung | Typ | Status | |
---|---|---|---|---|
Typ | Typ | keine Beschreibung | Unbekannt | optional |
Überschrift | Überschrift | keine Beschreibung | Unbekannt | optional |
Text | Text | keine Beschreibung | Unbekannt | optional |