Infobox2

Wie Vorlagen/Beispiel/Infobox, nur anders gestylt:

Hinweis: Das ist ein Hinweis.

Tipp: Das ist ein Tipp.

Achtung: Das ist eine Warnung.

Wichtig! Das ist wichtig.

Beispiel: Das ist ein Beispiel.

Das ist eine neutrale Box.

Vorlage erstellen

1. Erstelle die Seite Vorlage:Box Note
2. Füge den Vorlageninhalt hinzu und speichere die Seite:

   <div class="infobox notification-{{{boxtype}}}">
   <span class="boxlabel">
   {{#switch: {{{boxtype}}}
    | note = Hinweis:
    | tip = Tipp:
    | warning = Achtung:
    | example = Beispiel:
    | important = Wichtig!
    | backgroundbox = 
    | #default = Hinweis:
   }}
   </span>{{{Note text}}}
   </div>
   

Was dieser Code bewirkt:

• Der Container (<div>...</div>) wird zum Gestalten der Box verwendet. Es hat die Stilklassen Infobox und {{{boxtype}}}. Der Parameter boxtype gibt den tatsächlichen Wert an, den der Benutzer bei der Verwendung der Vorlage auswählt.
• Das <span>...</ span> enthält die Beschriftung für die Box. Es zeigt die Beschriftung für den vom Benutzer ausgewählten Kastentyp an. Es hat die Stilklasse boxlabel, mit der das Etikett formatiert wird.
• {{{Hinweistext}}} ist der Platzhalter für den tatsächlichen Text, den der Benutzer auf einer bestimmten Seite erstellt.

Um Benutzern das Einfügen und Verwenden dieser Vorlage im visuellen Bearbeitungsmodus zu erleichtern, haben wir einen Abschnitt <nowiki><templatedata></nowiki> in die Vorlage aufgenommen. Der Tag ist in <nowiki>...<nowiki> eingewickelt, um sicherzustellen, dass dieser Teil der Vorlage nicht auf der Zielseite übertragen wird, die die eigentliche Vorlage verwendet. Diese Funktion der Vorlagenabschnitte beschreibt die Parameter der Vorlage. Außerdem wird das Formular für die visuelle Bearbeitung ausgefüllt:

<div class="infobox notification-{{{boxtype}}}" 
{{#if:{{{bgcolor|}}}|style="background:{{{bgcolor}}}"|}}>
<span class="boxlabel">
{{#switch: {{{boxtype}}}
 | note = Hinweis:
 | tip = Tipp:
 | warning = Achtung:
 | example = Beispiel:
 | important = Wichtig!
 | backgroundbox = 
 | #default = Hinweis:
}}
</span>{{{Note text}}}
</div>
<noinclude>
Kopiervorlage:
<pre>
{{Box_Note|Note text =|bgcolor =}}
</pre>
<templatedata>
{
	"params": {
		"Note text": {},
		"boxtype": {
			"description": "Mögliche Werte: note, tip, warning, important, example, backgroundbox",
			"example": "note",
			"type": "string",
			"default": "note",
			"required": true
		},
		"bgcolor": {
			"label": "bgcolor",
			"description": "Hintergrundfarbe der Box im Hex-format (z.B. #ececec)",
			"type": "string"
		}
	},
	"description": "Erstellt eine Infobox für Hinweise, Warnungen, Tipps, etc.",
	"paramOrder": [
		"boxtype",
		"Note text",
		"bgcolor"
	]
}
</templatedata>
</noinclude>

Was dieser Code bewirkt:

• Es listet die Parameter (boxtype, Note text, bgcolor) auf, die durch ein Komma getrennt sind.
• Es listet die Parameterobjekte auf (optional): Beschreibung, Beispiel, Typ usw. Eine vollständige Liste der Vorlagendatenobjekte finden Sie unter www.mediawiki.org/wiki/Extension:TemplateData#Param_Objekt
• Beschreibt den Zweck der Vorlage (description), damit Benutzer sie von ähnlichen Vorlagen unterscheiden können.

Erstellen der Vorlagenstile

Um das Benachrichtigungsfeld zu formatieren, haben wir drei Stilklassen zugewiesen:

• Infobox: Behälter für die Infobox. Wir können Layout-Eigenschaften wie Rahmen, Hintergrund oder Abstand festlegen
• notification-{{{boxtype}}}: Wird zur Farbcodierung der Box basierend auf dem Typ der Box verwendet, die ein Benutzer auf einer Seite einfügen möchte.
• Boxlabel: Gestaltung des Boxlabels.

So binden Sie das Stylesheet ein:

1. Erstellen der Stylesheet-Seite:Vorlage:Box Note/styles.css. Falls dies in Ihrem Wiki nicht funktioniert, können Sie die styles auch der Seite MediaWiki:Common.css hinzufügen.
2. Styles kopieren und einfügen:

.infobox {
    padding: 10px;
    margin: 2em 0;
}
.boxlabel {
    font-weight: bold;
    padding-right: 0.5em;
}
.notification-note {
border-left: solid 4px #3498db;
background:#d9edf7;
}
.notification-tip {
border-left: solid 4px #f2c412;
background:#FFF5C9;
}
.notification-warning {
border-left: solid 4px #c23c2b;
background: #f2dede
}
.notification-important {
border-left: solid 4px #ffa406;
background: #fedb9c;
}
.notification-example {
border-left: solid 4px #00b241;
background: #dff0d8;
}
.notification-backgroundbox {
background:#ffd67f; 
padding:12px;
}
.notification-backgroundbox .boxlabel {
display:none;
}

Zusätzlich kann eine Hintergrundfarbe als Hexadezimalwert angegeben werden. Dieser überschreibt die vordefinierte Hintergrundfarbe.