Vorlage:Box: Unterschied zwischen den Versionen

Aus ZUM Grundschullernportal
(Die Seite wurde neu angelegt: „<noinclude>Diese Vorlage erzeugte eine Hinweisbox mit Überschrift. <nowiki>{{Box|rot|Bild:Verweis.png Titel|Der eigentliche Text}}</nowiki> {{Box|rot|…“)
 
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Zeile 1: Zeile 1:
<noinclude>Diese Vorlage erzeugte eine Hinweisbox mit Überschrift.
<noinclude>
[[Kategorie:Vorlage:Standard]]
== Boxen erstellen mittels Template ==
=== Das schreibt man: ===
<pre>
{{Box| Titel | Inhalt | class }}
</pre>


  <nowiki>{{Box|rot|[[Bild:Verweis.png]] Titel|Der eigentliche Text}}</nowiki>
Als Klassen/class stehen einige Varianten zur Verfügung wie Hervorhebung1, Hervorhebung2, Zitat, ... , allerdings ist dies optional (siehe Beispiele!)
=== Das sieht man: ===
</noinclude><onlyinclude>
<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}}
| Merksatz = {{icon pin}}
| Download = {{icon download}}
| Frage = {{icon question}}
| Kurzinfo = {{icon info}}
| {{icon point}} }}
}}</span> {{{1}}}</div><div>
{{{2}}}</div></div></div></onlyinclude><noinclude>


{{Box|rot|Titel|Dies ist ein Beispiel für eine '''rote''' Box}}
=== andere Beispiele ===
{{Box|gelb|Titel|Dies ist ein Beispiel für eine '''gelbe''' Box}}
{{Box|blau|Titel|Dies ist ein Beispiel für eine '''blaue''' Box}}
{{Box|grün|Titel|Dies ist ein Beispiel für eine '''grüne''' Box}}
{{Box|orange|Titel|Dies ist ein Beispiel für eine '''orange''' Box}}
{{Box|grau|Titel|Dies ist ein Beispiel für eine '''graue''' Box}}
{{Box|rw|Titel|Dies ist ein Beispiel für eine '''rot-weiße''' Box|Breite = 250px}}
{{Box|türkis|Titel|Dies ist ein Beispiel für eine '''türkise''' Box}}
* Der erste Parameter gibt die Farbe der Box an. Möglich sind blau, rot, gelb, grau, grün, rw (rot-weiß) und türkis. Andere Werte werden ignoriert und eine blaue Box erzeugt.
* Der zweite Parameter wird als Titel ausgegeben. Der Titel wird immer als Fettschrift ausgegeben (font-weight:bold;)
* Der dritte Parameter ist dann der eigentliche Text.


'''Einsatz der Boxen'''
{{Box|Hervorhebung1|mit Text für Hervorhebungen| Hervorhebung1 }}


Die Boxen werden häufig für Systemhinweise und andere Meldungen eingesetzt. Dabei sind bestimmte Farben jeweils einer Gruppe von Meldungen zugeordnet. Eine Aufstellung findet man im Handbuch unter [[Hilfe:Vorlagenübersicht]].
{{Box|Hervorhebung2|mit Text für Hervorhebungen|Hervorhebung2}}


'''Die benutzten Farben'''
{{Box|Zitat|mit Text für Zitate und Quellen|Zitat }}
* rot: <span style="background-color:#ff2222">#ff2222</span> und <span style="background-color:#ffc0c0">#ffc0c0</span>
* gelb: <span style="background-color:#fdee6a">#fdee6a</span> und <span style="background-color:#fff9ac">#fff9ac</span>
* blau: <span style="background-color:#729fcf">#729fcf</span> und <span style="background-color:#acceec">#acceec</span>
* grün: <span style="background-color:#99ee99">#99ee99</span> und <span style="background-color:#e0ffe0">#e0ffe0</span>
* orange: <span style="background-color:#fcaf3e">#fcaf3e</span> und <span style="background-color:#ffe28c">#ffe28c</span>
* grau: <span style="background-color:#888a85">#888a85</span> und <span style="background-color:#d3d7cf">#d3d7cf</span>
* rw: <span style="background-color:#FF3030">#ff3030</span> und <span style="background-color:#ffffff">#ffffff</span>
* türkis: <span style="background-color:#63B8FF">#63b8ff</span> und <span style="background-color:#CDEFFF">#cdefff</span>


</noinclude><includeonly>{{#switch:{{lc:{{{1|}}}}}|rot=
{{Box|Arbeitsmethode|mit Text für Arbeitsmethoden|Arbeitsmethode }}
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #ff2222; padding: 0px; background-color:#ffc0c0;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#ff2222; font-weight:bold;">{{{2}}}</span></div>
{{Box|Unterrichtsidee|mit Text für Unterrichtsidee|Unterrichtsidee }}
<div style="padding: 2px 1em;">{{{3}}}</div>
 
</div>|gelb=
{{Box|Meinung|mit Text für Meinungen|Meinung}}
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #fdee6a; padding: 0px; background-color:#fff9ac;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#fdee6a; font-weight:bold;">{{{2}}}</span></div>
{{Box|Lernpfad |mit Text für Lernpfade|Lernpfad }}
<div style="padding: 2px 1em;">{{{3}}}</div>
 
</div>|grün=
{{Box|Experimentieren|mit Text für Experimente und Versuche|Experimentieren}}
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #99ee99; padding: 0px; background-color:#e0ffe0;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#99ee99; font-weight:bold;">{{{2}}}</span></div>
{{Box|Lösung|mit Text für Lösungen|Lösung}}
<div style="padding: 2px 1em;">{{{3}}}</div>
 
</div>|grau=
{{Box|Üben|mit Text für Übungen und Aufgaben|Üben}}
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #888a85; padding: 0px; background-color:#d3d7cf;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#888a85; font-weight:bold;">{{{2}}}</span></div>
{{Box|Merksatz|mit Text für Definitionen und Merksätzen|Merksatz}}
<div style="padding: 2px 1em;">{{{3}}}</div>
 
</div>|orange=
{{Box|Download|mit (möglichst internen) Links zu herunterladbarem Material|Download}}
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #fcaf3e; padding: 0px; background-color:#ffe28c;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#fcaf3e; font-weight:bold;">{{{2}}}</span></div>
{{Box|Frage|mit einer Frage|Frage}}
<div style="padding: 2px 1em;">{{{3}}}</div>
 
</div>|rw=
{{Box|Kurzinfo|mit Text oder integrierten Vorlagen für Kurzinfos|Kurzinfo}}
<div width=40px style="margin:0em 0em 0.5em 0em; border: 1px solid #FF3030; padding: 0px; background-color:#ffffff;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#FF3030; font-weight:bold;">{{{2}}}</span></div>
 
<div style="padding: 2px 1em;">{{{3}}}</div>
=== Hinweise zur Gestaltung dieser Vorlage ===
</div>|türkis=
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.
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #63b8ff; padding: 0px; background-color:#cdefff;">
 
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#63b8ff; font-weight:bold;">{{{2}}}</span></div>
 
<div style="padding: 2px 1em;">{{{3}}}</div>
== Alternativ: Boxen mittels div-Containern und CSS-Klassen erstellen ==
</div>|blau|#default=
Nicht alle Inhalte können als Parameter an Vorlagen (Templates) übergeben werden, z.B. HTML Tags im Wikitext, Tabellen und anderes.
<div style="margin:0em 0em 0.5em 0em; border: 1px solid #729FCF; padding: 0px; background-color:#acceec;">
Um trotzdem Boxen im gleichen Layout wie mittels obigen Vorlagen zu erstellen, gibt es auch korrespondierende CSS-Klassen.
<div style="margin-top: 3px; margin-bottom: 5px;"><span style="padding: 5px 1em; background-color:#729FCF; font-weight:bold;">{{{2}}}</span></div>
Dazu muss der Text, der in einer Box stehen soll in einen div-Container eingefasst werden:
<div style="padding: 2px 1em;">{{{3}}}</div>
 
</div>}}</includeonly><noinclude>[[Kategorie:Boxvorlagen|Box]]</noinclude>
 
=== Das schreibt man: ===
<pre>
<div class="box ueben">
== Üben ==
...
</div>
</pre>
 
 
=== Das sieht man: ===
<div class="box ueben">
== Üben ==
mit Text für Übungen und Aufgaben
</div>
 
 
=== Folgende Boxen stehen zur Verfügung (analog oben) ===
 
<pre>
<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>
</pre>
 
 
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 <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>
 
__NOEDITSECTION__
<noinclude>
<templatedata>
{
"params": {
"Typ": {},
"Überschrift": {},
"Text": {}
},
"paramOrder": [
"Typ",
"Überschrift",
"Text"
],
"format": "block"
}
</templatedata>
</noinclude>

Version vom 11. Februar 2019, 16:08 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:

{{{1}}}
{{{2}}}

andere Beispiele

Hervorhebung1
mit Text für Hervorhebungen


Hervorhebung2
mit Text für Hervorhebungen


Zitat
mit Text für Zitate und Quellen


Arbeitsmethode
mit Text für Arbeitsmethoden


Unterrichtsidee
mit Text für Unterrichtsidee


Meinung
mit Text für Meinungen


Lernpfad
mit Text für Lernpfade


Experimentieren
mit Text für Experimente und Versuche


Lösung
mit Text für Lösungen


Üben
mit Text für Übungen und Aufgaben


Merksatz
mit Text für Definitionen und Merksätzen


Download
mit (möglichst internen) Links zu herunterladbarem Material


Frage
mit einer Frage


Kurzinfo
mit Text oder integrierten Vorlagen für Kurzinfos


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

Titel
Inhalt

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

Titel
Inhalt


Überprüfte Vorlage
Ein Admin hat diese Vorlage überprüft und entschieden, dass diese Vorlage benötigt wird.



Keine Beschreibung.

Vorlagenparameter

Diese Vorlage bevorzugt Blockformatierung von Parametern.

ParameterBeschreibungTypStatus
TypTyp

keine Beschreibung

Unbekanntoptional
ÜberschriftÜberschrift

keine Beschreibung

Unbekanntoptional
TextText

keine Beschreibung

Unbekanntoptional
Abgerufen von „https://grundschullernportal.zum.de/index.php?title=Vorlage:Box&oldid=9014“