TemplateStyles

Diese Seite zeigt einige Formatierungen, die dank der TemplateStyles-Erweiterung möglich werden. Das zugehörige Stylesheet findet sich unter Vorlage:TemplateStyles/styles.css. Es wird wie folgt eingebunden:

<templatestyles src="TemplateStyles/styles.css" />

---

Indirekte Anordnung von Unterelementen

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

<div class="box">
Dies ist ein Beispieltext.
</div>

<div class="box">
Dies ist ein Beispieltext.
</div>

<div class="in-row">
<div class="box">
Dies ist ein Beispieltext.
</div>

<div class="box">
Dies ist ein Beispieltext.
</div>

<div class="box">
Dies ist ein Beispieltext.
</div>
</div>

Indirekte Formatierung von Links

Dies ist ein Beispieltext mit einem Wikilink.

Dies ist ein Beispieltext mit einem Wikilink.

<div class="in-row">
<div class="box">
Dies ist ein Beispieltext mit einem [[Wikilink]].
</div>

<div class="box negativ">
Dies ist ein Beispieltext mit einem [[Wikilink]].
</div>
</div>

Fluide Bildgrößen

Zum Testen Broswerfenster skalieren. Bild wird immer auf die zur Verfügung stehende Breite skaliert.

<div class="in-row">
<div class="full-box fluid-image">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
<div class="full-box fluid-image">[[File:MK 0461-0481 Kurhaus Wiesbaden.jpg|800px]]</div>
<div class="full-box fluid-image">[[File:MK53831-32_Palais_des_Papes_d'Avignon.jpg|800px]]</div>
</div>

<div class="in-row">
<div class="full-box fluid-image" style="width:30%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
<div class="full-box fluid-image" style="width:20%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
<div class="full-box fluid-image" style="width:13.3%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
<div class="full-box fluid-image" style="width:8.8%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
</div>

Breakpoints

Aussehen ändert sich abhängig von der Viewport-Größe. Zum Testen Broswerfenster skalieren.

Dies ist ein Beispieltext mit einem Wikilink.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div class="box full-width-small-down float-right-medium-up">
Dies ist ein Beispieltext mit einem [[Wikilink]].
</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.