Hilfe:Vorlagen Design: Unterschied zwischen den Versionen

Version vom 24. März 2023, 12:37 Uhr

Diese Seite dient als Übersicht und Veranschaulichung der wichtigsten Designvorlagen, die in eine Seite eingebaut werden können. Die Seite muss dazu im Quelltext (oben rechts über die drei Punkte und "Quelltext bearbeiten") bearbeitet werden.

Es gibt Designmöglichkeiten, die über "Wikitext", die Programmiersprache von Mediawiki, eingefügt werden können. Und es gibt Vorlagen, die wir individuell erstellt haben. Diese sind an den Klammern "{{ }}" zu erkennen. Unter dem jeweiligen Beispiel ist auf dieser Seite die Kopiervorlage eingefügt. Entweder der Code für Wikitext oder die Vorlage mit den Klammern "{{ }}". Mit den Klammern startet und endet eine Vorlage. Dazwischen kann in einigen Fällen individueller Text oder Bilder eingefügt werden.

Vorlage:TOC limit

Literatur und Zitate

Vorlage: Literaturhinweis

Autor etc.

Kopiervorlage: {{Literaturhinweis|Autor etc.}}

Vorlage: Zitat

Nachts sind alle Katzen grau.

- Hund

Kopiervorlage: {{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}

Bilder

Bilder können über den VisualEditor hochgeladen und eingebunden werden. Formatierungen können im Quelltext bearbeitet werden.

Vorlage: Clear

{{Clear}}

Es wird aus der Vorlage heraus nichts angezeigt. Die Vorlage verhindert den Textumfluss, ein seitliches umfließen des Textes um ein Bild oder einen Seitenbaustein. Der Effekt der Vorlage: Es geht mit dem Text einfach unterhalb eines Seitenelements weiter. Um diese Vorlage in einen Artikel zu integrieren, muss nur {{Clear}} in die entsprechende Seite eingetragen werden.

Weitere Formatierungsmöglichkeiten: Weitere Optionen für die Formatierung von Bildern sind bei Mediawiki hier beschrieben.

Bildergalerie mit Rahmen

Kopiervorlage:

<gallery>
Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
</gallery>

Der Zusatz "alt=" hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.

Bildergalerie ohne Rahmen

Kopiervorlage:

<gallery mode=packed>
Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
</gallery>

Der Zusatz "alt=" hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.

Slideshow

Kopiervorlage:

<gallery mode=slideshow>
Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
Datei:Name der Datei |alt=
</gallery>

Der Zusatz "alt=" hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.

Weitere Formatierungsmöglichkeiten:

Weitere Optionen für die Formatierung von Bildergalerien sind bei Wikipedia hier beschrieben.

Banner

Vorlage: Achtung

ACHTUNG: Text hier eingeben!

Kopiervorlage: {{Achtung|Text hier eingeben!}}

Vorlage: Hinweis

HINWEIS: Text hier eingeben!

Kopiervorlage: {{Hinweis|Text hier eingeben!}}

Vorlage: InArbeit

Diese Seite wird derzeit von Nutzerkennung, voraussichtlich bis Voraussichtliches Ende der Bearbeitung, bearbeitet.

Kopiervorlage: {{InArbeit | username=Nutzerkennung | ende=Voraussichtliches Ende der Bearbeitung}}

Vorlage: These

Text hier eingeben!

Kopiervorlage: {{These|detail=Text hier eingeben!}}

Vorlage: Tipp

Text hier eingeben

Kopiervorlage: {{Tipp|text=Text hier eingeben}}

Boxen und Kästen

Vorlage: CardSmall

Beispiel

Beispiel Unterüberschrift

Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.

{{CardSmall
  |bg-color=
  |titel=
  |subtitel=
  |text=
}}

Vorlage: Card-Deck

Beispiel

Beispiel Unterüberschrift

Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.

Beispiel

Beispiel Unterüberschrift

Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.

Beispiel

Beispiel Unterüberschrift

Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.

Um die Boxen nebeneinander zu setzen, muss vor die erste Box folgendes gesetzt werden:

<div class="card-deck">

und um zu schließen, hinter die letzte Box

</div>

Also insgesamt:

<div class="card-deck">
{{CardSmall
  |bg-color=#85B1D0
  |titel=Beispiel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
{{CardSmall
  |bg-color=#85B1D0
  |titel=Beispiel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
{{CardSmall
  |bg-color=#85B1D0
  |titel=Beispiel
  |subtitel=Beispiel Unterüberschrift
  |text=Hier steht ein Beispieltext. Die Farbwerte werden unter "bg-color" eingegeben.
}}
</div>

Vorlage: Kasten

Überschrift

Inhalt der Box / Dein Text...

{{Kasten
|headline-bg-color = #FFFFFF
|headline-color    = #000000
|content-bg-color  = #FFFFFF
|content-color     = #000000
|id                = Ankermöglichkeit
|headline          = Überschrift
|content           = Inhalt der Box / Dein Text...
}}

Ausklappmenüs für Text

Vorlage: Expander

Titel

Dieser Text soll expandiert werden

{{Expander|Titel|Dieser Text soll expandiert werden}}

Vorlage: ExpanderOffen

Titel

Dieser Text soll expandiert werden

{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}}

Vorlage: ExpanderVar

Titel

Dieser Text soll expandiert werden

{{ExpanderVar
|titel=Titel
|inhalt=Dieser Text soll expandiert werden}}

Header

Vorlage: CardImage

Beispiel

Hier steht ein Beispieltext unterhalb des eingefügten Bildes.

{{CardImage
  |image=
  |width=250
  |link=
  |titel=
  |text=}}

Vorlage: CardImageOT

Hier steht eine Bildunterschrift. Diese Box hat keinen Titel eingebunden, der daher auch nicht automatisch in ein Inhaltsverzeichnis einer Seite eingebunden wird (im Vergleich zur Vorlage "CardImage").

{{CardImageOT
  |image=
  |width=250
  |link=
  |text=}}

Vorlage: Jumbotron

{{Jumbotron
  |bg-color=
  |color=
  |lead=
  |message=}}

Vorlage: Jumbotron Bilder

{{Jumbotron_Bilder
  |bg-color=
  |color=
  |lead=
  |message=}}

Tabellen

Vorlage: Themenspeicher

Idee	Kurzbeschreibung
Ziel	Ziel
WFI	Weiterführende Informationen
Impulsgeber:in / Ansprechpartner:in	Name

{{Themenspeicher
|text1=Kurzbeschreibung
|text2=Ziel
|text3=Weiterführende Informationen
|name=Name}}

Vorlage: Ideensammlung

Idee	Kurzbeschreibung
Impulsgeber:in / Ansprechpartner:in	Name

{{Ideensammlung
|Idee=Kurzbeschreibung
|Name=Name}}

@@ Zeile 1: / Zeile 1: @@
-Diese Seite dient als Übersicht und Veranschaulichung der wichtigsten Designvorlagen, die in eine Seite eingebaut werden können. Dazu ist unter dem jeweiligen Beispiel die Kopiervorlage eingefügt. Mit den Klammern "{{ }}" startet und endet eine Vorlage. Dazwischen kann in einigen Fällen individueller Text oder Bilder eingefügt werden.
+Diese Seite dient als Übersicht und Veranschaulichung der wichtigsten Designvorlagen, die in eine Seite eingebaut werden können. Die Seite muss dazu im Quelltext (oben rechts über die drei Punkte und "Quelltext bearbeiten") bearbeitet werden.
-Eine solche Vorlage sieht meist so aus, dass ein Pipe "|" und ein Gleichheitszeichen "=" vorangestellt sind. Dahinter kann dann z. B. ein Link zu einem Bild oder ein Titel oder Text eingefügt werden.
+Es gibt Designmöglichkeiten, die über "Wikitext", die Programmiersprache von Mediawiki, eingefügt werden können. Und es gibt Vorlagen, die wir individuell erstellt haben. Diese sind an den Klammern "{{ }}" zu erkennen.
+Unter dem jeweiligen Beispiel ist auf dieser Seite die Kopiervorlage eingefügt. Entweder der Code für Wikitext oder die Vorlage mit den Klammern "{{ }}". Mit den Klammern startet und endet eine Vorlage. Dazwischen kann in einigen Fällen individueller Text oder Bilder eingefügt werden.
-Die Vorlagen im Wiki findet man auch unter den Spezialseiten unter "Vorlagen" oder in dem man den Namen der Vorlage in das Suchfeld eingibt. Dazu muss "Vorlage:[Name der Vorlage]" ins Suchfeld eingegeben werden.
 {{TOC limit|2}}
+==Literatur und Zitate==
+<big>'''Vorlage: Literaturhinweis'''</big>
+{{Literaturhinweis|Autor etc.}}
+Kopiervorlage: <nowiki>{{Literaturhinweis|Autor etc.}}</nowiki>
+<big>'''Vorlage: Zitat'''</big>
+{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}
+Kopiervorlage: <nowiki>{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}</nowiki>
+==Bilder==
+Bilder können über den VisualEditor hochgeladen und eingebunden werden. Formatierungen können im Quelltext bearbeitet werden.
+<big>'''Vorlage: Clear'''</big>
+{{Clear}}
+ <nowiki>{{Clear}}</nowiki>
+Es wird aus der Vorlage heraus nichts angezeigt.
+Die Vorlage verhindert den Textumfluss, ein seitliches umfließen des Textes um ein Bild oder einen Seitenbaustein.
+Der Effekt der Vorlage: Es geht mit dem Text einfach unterhalb eines Seitenelements weiter.
+Um diese Vorlage in einen Artikel zu integrieren, muss nur <nowiki>{{Clear}}</nowiki> in die entsprechende Seite eingetragen werden.
+<big>'''Weitere Formatierungsmöglichkeiten:'''</big>
+Weitere Optionen für die Formatierung von Bildern sind bei Mediawiki [https://www.mediawiki.org/wiki/Help:Images/de hier] beschrieben.
+<big>'''Bildergalerie mit Rahmen'''</big>
+<gallery>
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 1.jpeg|alt=eine Gruppe arbeitet in Diskussionsrunde
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 4.jpeg|alt=Nahaufnahme zweier Teilnehmender in Diskussionsrunde
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 2.jpeg|alt=Nahaufnahme zweier Teilnehmender vor Tafel
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 5.jpeg|alt=Drei Teilnehmende sitzend im Gespräch
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|alt=Nahaufnahme über die Schulter auf einen Laptop
+</gallery>
+Kopiervorlage:
+ <nowiki><gallery>
+Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+</gallery></nowiki>
+Der Zusatz <nowiki>"alt="</nowiki> hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.
+<big>'''Bildergalerie ohne Rahmen'''</big>
+<gallery mode=packed>
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 1.jpeg|alt=eine Gruppe arbeitet in Diskussionsrunde
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 4.jpeg|alt=Nahaufnahme zweier Teilnehmender in Diskussionsrunde
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 2.jpeg|alt=Nahaufnahme zweier Teilnehmender vor Tafel
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 5.jpeg|alt=Drei Teilnehmende sitzend im Gespräch
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|alt=Nahaufnahme über die Schulter auf einen Laptop
+</gallery>
+Kopiervorlage:
+ <nowiki><gallery mode=packed>
+Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+</gallery></nowiki>
+Der Zusatz <nowiki>"alt="</nowiki> hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.
+<big>'''Slideshow'''</big>
+<gallery mode=slideshow>
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 1.jpeg|alt=eine Gruppe arbeitet in Diskussionsrunde
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 4.jpeg|alt=Nahaufnahme zweier Teilnehmender in Diskussionsrunde
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 2.jpeg|alt=Nahaufnahme zweier Teilnehmender vor Tafel
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 5.jpeg|alt=Drei Teilnehmende sitzend im Gespräch
+Datei:DG-Hub Nachhaltigkeitsstrategien 230306 3.jpeg|alt=Nahaufnahme über die Schulter auf einen Laptop
+</gallery>
+Kopiervorlage:
+ <nowiki><gallery mode=slideshow>
+Datei:Name der Datei |alt=eine Gruppe arbeitet in Diskussionsrunde
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+Datei:Name der Datei |alt=
+</gallery></nowiki>
+Der Zusatz <nowiki>"alt="</nowiki> hinter dem Dateinamen dient zur Bildbeschreibung für Personen, die das Bild nicht sehen können bzw. für Screenreader. Es ist keine Pflichtangabe.
+<big>'''Weitere Formatierungsmöglichkeiten:'''</big>
+Weitere Optionen für die Formatierung von Bildergalerien sind bei Wikipedia [https://de.wikipedia.org/wiki/Hilfe:Galerie hier] beschrieben.
 ==Banner==
 <big>'''Vorlage: Achtung'''</big>
-{{Achtung|Deinen Text hier eingeben!}}
+{{Achtung|Text hier eingeben!}}
+Kopiervorlage: <nowiki>{{Achtung|Text hier eingeben!}}</nowiki>
- <nowiki>{{Achtung|Deinen Text hier eingeben!}}</nowiki>
 <big>'''Vorlage: Hinweis'''</big>
-{{Hinweis|Deinen Text hier eingeben!}}
+{{Hinweis|Text hier eingeben!}}
+Kopiervorlage: <nowiki>{{Hinweis|Text hier eingeben!}}</nowiki>
- <nowiki>{{Hinweis|Deinen Text hier eingeben!}}</nowiki>
 <big>'''Vorlage: InArbeit'''</big>
@@ Zeile 26: / Zeile 129: @@
 | ende=Voraussichtliches Ende der Bearbeitung}}
+Kopiervorlage:
- <nowiki>{{InArbeit
+<nowiki>
+{{InArbeit
 | username=Nutzerkennung
 | ende=Voraussichtliches Ende der Bearbeitung}}</nowiki>
 <big>'''Vorlage: These'''</big>
-{{These|detail=Deinen Text hier eingeben!}}
+{{These|detail=Text hier eingeben!}}
- <nowiki>{{These|detail=Deinen Text hier eingeben!}}</nowiki>
+Kopiervorlage: <nowiki>{{These|detail=Text hier eingeben!}}</nowiki>
 <big>'''Vorlage: Tipp'''</big>
-{{Tipp|text=Hier kommt der Text rein}}
+{{Tipp|text=Text hier eingeben}}
- <nowiki>{{Tipp|text=Hier kommt der Text rein}}</nowiki>
-==Literatur und Zitate==
-<big>'''Vorlage: Literaturhinweis'''</big>
-{{Literaturhinweis|Autor etc.}}
- <nowiki>{{Literaturhinweis|Autor etc.}}</nowiki>
+Kopiervorlage: <nowiki>{{Tipp|text=Text hier eingeben}}</nowiki>
-<big>'''Vorlage: Zitat'''</big>
-{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}
- <nowiki>{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}</nowiki>
 ==Boxen und Kästen==
@@ Zeile 122: / Zeile 217: @@
 }}
 </div></nowiki>
-<big>'''Vorlage:CardCollapse'''</big>
-{{Cardcollapse
-  |titel=Beispieltitel
-  |text=Beispieltext
-}}
- <nowiki>{{Cardcollapse
-  |titel=
-  |text=
-}}</nowiki>
-<big>'''Vorlage: CardHeader'''</big>
-{{Cardheader
-  |header=Überschrift
-  |bg-color=
-  |headalign=Sub-Überschrift
-  |content=Hier steht der Text.
-}}
- <nowiki>{{Cardheader
-  |header=
-  |bg-color=
-  |headalign=
-  |content=
-}}</nowiki>
@@ Zeile 173: / Zeile 240: @@
 }}</nowiki>
-<big>'''Vorlage:KastenTürkis'''</big>
-{{KastenTürkis|Head|Inhalt}}
- <nowiki>{{KastenTürkis|Head|Inhalt}}</nowiki>
-<big>'''Vorlage: ChBox'''</big>
-<span style="font-size:20px">☐</span>
- <nowiki><span style="font-size:20px">☐</span></nowiki>
-<big>'''Vorlage: CheckSeg'''</big>
-{{CheckSeg
-|titel=Die Uni auf den Kopf stellen
-|orientierung=operational
-|inters1=Bürgermeister
-|inters2=Mensa
-|inters3=Schlüsseldienst
-|freetext=Um die Uni auf den Kopf zu stellen, müssen wir zuerst wissen, wo die Füße sind. Zudem sind folgende schritte auszuführen.
-|In die Hocke gehen
-|Die Füße greifen
-|beherzt die Arme nach oben strecken und gleichzeitig aufstehen}}
- <nowiki>{{CheckSeg
-|titel=Die Uni auf den Kopf stellen
-|orientierung=operational
-|inters1=Bürgermeister
-|inters2=Mensa
-|inters3=Schlüsseldienst
-|freetext=Um die Uni auf den Kopf zu stellen, müssen wir zuerst wissen, wo die Füße sind. Zudem sind folgende schritte auszuführen.
-|In die Hocke gehen
-|Die Füße greifen
-|beherzt die Arme nach oben strecken und gleichzeitig aufstehen}}</nowiki>
-<big>'''Vorlage: Clear'''</big>
-{{Clear}}
- <nowiki>{{Clear}}</nowiki>
-Es wird aus der Vorlage heraus nichts angezeigt.
-Die Vorlage verhindert den Textumfluss, ein seitliches umfließen des Textes um ein Bild oder einen Seitenbaustein.
-Der Effekt der Vorlage: Es geht mit dem Text einfach unterhalb eines Seitenelements weiter.
-Um diese Vorlage in einen Artikel zu integrieren, musst du nur {{Clear}} in die entsprechende Seite eintragen.
-<tt><nowiki>{{Clear}}</nowiki></tt> macht das selbe wie <tt><nowiki>{{Clear|both}}</nowiki></tt>, sie beenden das Umfließen nachfolgender Objekte um ein Objekt mit CSS-Eigenschaft, z.B. ein Bild.
-<tt><nowiki>{{Clear|left}}</nowiki></tt> bewirkt, dass Objekte mit Eigenschaft ''float:left'' nicht mehr umflossen werden. Die ist zu benutzen, wenn rechts eine Sidebar stehen soll.
-<tt><nowiki>{{Clear|rechts}}</nowiki></tt> bewirkt, dass Objekte mit Eigenschaft ''float:right'' nicht mehr umflossen werden.
 ==Ausklappmenüs für Text==