Hilfe:Vorlagen Design: Unterschied zwischen den Versionen
Zeile 1: | Zeile 1: | ||
− | Diese Seite dient als Übersicht und Veranschaulichung der | + | 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. |
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. | 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. | ||
+ | |||
+ | 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. | ||
__FORCETOC__ | __FORCETOC__ | ||
==Banner== | ==Banner== | ||
− | '''Achtung''' | + | <big>'''Vorlage: Achtung'''</big> |
{{Achtung|Deinen Text hier eingeben!}} | {{Achtung|Deinen Text hier eingeben!}} | ||
Zeile 12: | Zeile 14: | ||
<nowiki>{{Achtung|Deinen Text hier eingeben!}}</nowiki> | <nowiki>{{Achtung|Deinen Text hier eingeben!}}</nowiki> | ||
− | '''Hinweis''' | + | <big>'''Vorlage: Hinweis'''</big> |
{{Hinweis|Deinen Text hier eingeben!}} | {{Hinweis|Deinen Text hier eingeben!}} | ||
Zeile 18: | Zeile 20: | ||
<nowiki>{{Hinweis|Deinen Text hier eingeben!}}</nowiki> | <nowiki>{{Hinweis|Deinen Text hier eingeben!}}</nowiki> | ||
− | '''InArbeit''' | + | <big>'''Vorlage: InArbeit'''</big> |
{{InArbeit | {{InArbeit | ||
| username=Nutzerkennung | | username=Nutzerkennung | ||
Zeile 28: | Zeile 30: | ||
| ende=Voraussichtliches Ende der Bearbeitung}}</nowiki> | | ende=Voraussichtliches Ende der Bearbeitung}}</nowiki> | ||
− | '''These''' | + | <big>'''Vorlage: These'''</big> |
{{These|detail=Deinen Text hier eingeben!}} | {{These|detail=Deinen Text hier eingeben!}} | ||
<nowiki>{{These|detail=Deinen Text hier eingeben!}}</nowiki> | <nowiki>{{These|detail=Deinen Text hier eingeben!}}</nowiki> | ||
− | '''Tipp''' | + | <big>'''Vorlage: Tipp'''</big> |
{{Tipp|text=Hier kommt der Text rein}} | {{Tipp|text=Hier kommt der Text rein}} | ||
Zeile 39: | Zeile 41: | ||
==Literatur und Zitate== | ==Literatur und Zitate== | ||
− | '''Literaturhinweis''' | + | <big>'''Vorlage: Literaturhinweis'''</big> |
{{Literaturhinweis|Autor etc.}} | {{Literaturhinweis|Autor etc.}} | ||
Zeile 45: | Zeile 47: | ||
<nowiki>{{Literaturhinweis|Autor etc.}}</nowiki> | <nowiki>{{Literaturhinweis|Autor etc.}}</nowiki> | ||
− | '''Zitat''' | + | <big>'''Vorlage: Zitat'''</big> |
{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}} | {{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}} | ||
Zeile 51: | Zeile 53: | ||
==Boxen und Kästen== | ==Boxen und Kästen== | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <big>'''Vorlage: CardSmall'''</big> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{CardSmall | {{CardSmall | ||
|bg-color=#85B1D0 | |bg-color=#85B1D0 | ||
Zeile 104: | Zeile 71: | ||
}}</nowiki> | }}</nowiki> | ||
− | + | <big>'''Vorlage: Card-Deck'''</big> | |
+ | |||
<div class="card-deck"> | <div class="card-deck"> | ||
{{CardSmall | {{CardSmall | ||
Zeile 131: | Zeile 99: | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
+ | Also insgesamt: | ||
− | == | + | <nowiki><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></nowiki> | ||
+ | |||
+ | <big>'''Vorlage:CardCollapse'''</big> | ||
{{Cardcollapse | {{Cardcollapse | ||
− | |titel= | + | |titel=Beispieltitel |
− | |text= | + | |text=Beispieltext |
}} | }} | ||
Zeile 144: | Zeile 134: | ||
}}</nowiki> | }}</nowiki> | ||
− | + | <big>'''Vorlage: CardHeader'''</big> | |
{{Cardheader | {{Cardheader | ||
− | |header= | + | |header=Überschrift |
|bg-color= | |bg-color= | ||
− | |headalign= | + | |headalign=Sub-Überschrift |
− | |content= | + | |content=Hier steht der Text. |
}} | }} | ||
Zeile 160: | Zeile 150: | ||
}}</nowiki> | }}</nowiki> | ||
− | == | + | |
+ | <big>'''Vorlage: Kasten'''</big> | ||
+ | {{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... | ||
+ | }} | ||
+ | |||
+ | <nowiki>{{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... | ||
+ | }}</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> | <span style="font-size:20px">☐</span> | ||
<nowiki><span style="font-size:20px">☐</span></nowiki> | <nowiki><span style="font-size:20px">☐</span></nowiki> | ||
− | + | <big>'''Vorlage: CheckSeg'''</big> | |
{{CheckSeg | {{CheckSeg | ||
|titel=Die Uni auf den Kopf stellen | |titel=Die Uni auf den Kopf stellen | ||
Zeile 189: | Zeile 206: | ||
|beherzt die Arme nach oben strecken und gleichzeitig aufstehen}}</nowiki> | |beherzt die Arme nach oben strecken und gleichzeitig aufstehen}}</nowiki> | ||
− | + | <big>'''Vorlage: Clear'''</big> | |
{{Clear}} | {{Clear}} | ||
<nowiki>{{Clear}}</nowiki> | <nowiki>{{Clear}}</nowiki> | ||
Zeile 203: | Zeile 220: | ||
<tt><nowiki>{{Clear|rechts}}</nowiki></tt> bewirkt, dass Objekte mit Eigenschaft ''float:right'' nicht mehr umflossen werden. | <tt><nowiki>{{Clear|rechts}}</nowiki></tt> bewirkt, dass Objekte mit Eigenschaft ''float:right'' nicht mehr umflossen werden. | ||
− | == | + | ==Ausklappmenüs für Text== |
+ | |||
+ | <big>'''Vorlage: Expander'''</big> | ||
{{Expander|Titel|Dieser Text soll expandiert werden}} | {{Expander|Titel|Dieser Text soll expandiert werden}} | ||
Zeile 209: | Zeile 228: | ||
<nowiki>{{Expander|Titel|Dieser Text soll expandiert werden}}</nowiki> | <nowiki>{{Expander|Titel|Dieser Text soll expandiert werden}}</nowiki> | ||
− | + | <big>'''Vorlage: ExpanderOffen'''</big> | |
{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}} | {{ExpanderOffen|Titel|Dieser Text soll expandiert werden}} | ||
Zeile 215: | Zeile 234: | ||
<nowiki>{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}}</nowiki> | <nowiki>{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}}</nowiki> | ||
− | + | '''<big>Vorlage: ExpanderVar</big>''' | |
{{ExpanderVar | {{ExpanderVar | ||
|titel=Titel | |titel=Titel | ||
Zeile 226: | Zeile 245: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <nowiki>{{ | + | ==Header== |
− | | | + | |
− | | | + | <big>'''Vorlage: CardImage'''</big> |
+ | {{CardImage | ||
+ | |image=Datei:DGHochN Icon Emergenz.png | ||
+ | |width=250 | ||
+ | |link= | ||
+ | |titel=Beispiel | ||
+ | |text=Hier steht ein Beispieltext unterhalb des eingefügten Bildes.}} | ||
+ | |||
+ | |||
+ | <nowiki>{{CardImage | ||
+ | |image= | ||
+ | |width=250 | ||
+ | |link= | ||
+ | |titel= | ||
+ | |text=}}</nowiki> | ||
+ | |||
+ | <big>'''Vorlage: CardImageOT'''</big> | ||
+ | {{CardImageOT | ||
+ | |image=Datei:DGHochN Icon Emergenz.png | ||
+ | |width=250 | ||
+ | |link= | ||
+ | |text= 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").}} | ||
+ | <nowiki>{{CardImageOT | ||
+ | |image= | ||
+ | |width=250 | ||
+ | |link= | ||
+ | |text=}}</nowiki> | ||
− | + | <big>'''Vorlage: Jumbotron'''</big> | |
{{Jumbotron | {{Jumbotron | ||
|bg-color= | |bg-color= | ||
Zeile 254: | Zeile 292: | ||
|message=}}</nowiki> | |message=}}</nowiki> | ||
− | + | <big>'''Vorlage: Jumbotron Bilder'''</big> | |
{{Jumbotron_Bilder | {{Jumbotron_Bilder | ||
|bg-color= | |bg-color= | ||
Zeile 267: | Zeile 305: | ||
|message=}}</nowiki> | |message=}}</nowiki> | ||
− | == | + | ==Tabellen== |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <big>'''Vorlage: Themenspeicher'''</big> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{Themenspeicher | {{Themenspeicher | ||
|text1=Kurzbeschreibung | |text1=Kurzbeschreibung | ||
Zeile 340: | Zeile 320: | ||
|name=Name}}</nowiki> | |name=Name}}</nowiki> | ||
+ | <big>'''Vorlage: Ideensammlung'''</big> | ||
+ | {{Ideensammlung | ||
+ | |Idee=Kurzbeschreibung | ||
+ | |Name=Name}} | ||
− | + | <nowiki>{{Ideensammlung | |
− | + | |Idee=Kurzbeschreibung | |
− | + | |Name=Name}}</nowiki> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <nowiki>{{ | ||
− | | | ||
− | | | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Version vom 23. März 2023, 15:52 Uhr
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.
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.
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.
Banner
Vorlage: Achtung
{{Achtung|Deinen Text hier eingeben!}}
Vorlage: Hinweis
{{Hinweis|Deinen Text hier eingeben!}}
Vorlage: InArbeit
Diese Seite wird derzeit von Nutzerkennung, voraussichtlich bis Voraussichtliches Ende der Bearbeitung, bearbeitet. |
{{InArbeit | username=Nutzerkennung | ende=Voraussichtliches Ende der Bearbeitung}}
Vorlage: These
Deinen Text hier eingeben! |
{{These|detail=Deinen Text hier eingeben!}}
Vorlage: Tipp
Hier kommt der Text rein |
{{Tipp|text=Hier kommt der Text rein}}
Literatur und Zitate
Vorlage: Literaturhinweis
Autor etc. |
{{Literaturhinweis|Autor etc.}}
Vorlage: Zitat
Nachts sind alle Katzen grau. |
{{Zitat|Text=Nachts sind alle Katzen grau.|Autor=Hund}}
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:CardCollapse
{{Cardcollapse |titel= |text= }}
Vorlage: CardHeader
Überschrift
Hier steht der Text.
{{Cardheader |header= |bg-color= |headalign= |content= }}
Vorlage: Kasten
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... }}
Vorlage:KastenTürkis
Inhalt
{{KastenTürkis|Head|Inhalt}}
Vorlage: ChBox ☐
<span style="font-size:20px">☐</span>
Vorlage: CheckSeg
operational | Die Uni auf den Kopf stellen | Schnittstellen |
---|---|---|
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
|
Bürgermeister |
{{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}}
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, musst du nur
in die entsprechende Seite eintragen.
{{Clear}} macht das selbe wie {{Clear|both}}, sie beenden das Umfließen nachfolgender Objekte um ein Objekt mit CSS-Eigenschaft, z.B. ein Bild.
{{Clear|left}} bewirkt, dass Objekte mit Eigenschaft float:left nicht mehr umflossen werden. Die ist zu benutzen, wenn rechts eine Sidebar stehen soll.
{{Clear|rechts}} bewirkt, dass Objekte mit Eigenschaft float:right nicht mehr umflossen werden.
Ausklappmenüs für Text
Vorlage: Expander
Dieser Text soll expandiert werden
{{Expander|Titel|Dieser Text soll expandiert werden}}
Vorlage: ExpanderOffen
Dieser Text soll expandiert werden
{{ExpanderOffen|Titel|Dieser Text soll expandiert werden}}
Vorlage: ExpanderVar
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}}